Lighthouse for Chrome
summary
Chrome’s built-in audit Lighthouse in Chrome DevTools runs performance, PWA and accessibility audits and pinpoints real fixes: move critical CSS to the head, inline above‑the‑fold styles, defer or async/defer non‑critical JS, compress images (examples: ImageOptim saved ~70% on screenshots), enable gzip on the server, use preconnect/prefetch/preload hints, set cache headers and ETag or URL fingerprinting. One second slower costs ~7% conversions; restructuring CSS/JS often gains 10–15 Lighthouse points and images can cut seconds from load time.
AI-written summary · about
chapters (10)
- 0:00Why faster apps matter
- 6:05Introducing Lighthouse
- 9:36How web pages load
- 15:42Optimizing critical rendering path
- 21:57CSS and JavaScript optimization
- 25:29Image optimization techniques
- 33:01Preconnect, prefetch, and preload
- 37:01Gzip compression and caching
- 43:26Lighthouse beyond performance
- 45:55Q&A
related talks
35mExploring the Lighthouse
14mRun to the light Carol Anne: Auditing with Lighthouse
20mBringing Lighthouse to Angular
30mThe Pharos Of PWA, Deconstructing a Lighthouse Audit
22mYou’re Probably Using Lighthouse Wrong
27mHow to Measure Performance Effectively?
29mLighthouse, Headless Chrome, and Puppeteer
27mWays of Frontend performance auditing with Lighthouse