Climbing to the top of the Lighthouse with Scully
summary
Rewrites an Angular site with Scully static pre-rendering, uses headless-browser prerendered routes plus transfer-state to avoid flicker, swaps large images to inline SVG for LCP and WebP, reduces fonts and icon sets, splits and analyzes bundles, and adds caching via workbox service worker and CDN headers. The concrete claim is reached: a rebuilt site hits 100% Lighthouse score on desktop and mobile after these steps, with measurable bundle and image savings and stabilized test runs across hosts and times.
AI-written summary · about
chapters (8)
- 0:00Start
- 0:51Who Am I
- 2:32Basics about Scully and Lighthouse
- 4:40Lighthouse
- 8:18Tips about Improving the Lighthouse
- 8:45Approving the Low Hanging Fruits
- 11:36Update Your Libraries and Framework
- 17:39Webpack Bundle Analyzer
related talks
35mExploring the Lighthouse
22mUsing Lighthouse in the Real World
23mAngular + Scully - Wicked-fast Angular apps
32mImproving Lighthouse score for media-heavy React applications
20mBringing Lighthouse to Angular
40mNon-trivial optimization techniques in Angular
24mSuperpowers of browser's Web API
08mAngular and Scully, the power couple!