Exploring the Lighthouse
summary
Explains concrete steps to raise Lighthouse scores: runs audits via Chrome DevTools or the Node CLI and CI, strips unused CSS and inlines critical CSS, lazy-loads below‑the‑fold assets with IntersectionObserver, serves appropriately sized images and WebP, and implements manifest.json plus a service worker install fetch activate strategy that returns an offline placeholder image. A demo page moves from failing checks to 100% accessibility and SEO and much higher Performance/PWA/Best‑Practices scores.
AI-written summary · about
chapters (11)
- 0:00Introduction and overview
- 3:02What is Lighthouse and how to use it
- 7:35Lighthouse in action demo
- 11:33Performance optimization tips
- 13:20Progressive Web App requirements
- 18:40Accessibility best practices
- 20:56Best practices and SEO basics
- 24:47Step-by-step code improvements
- 29:45Testing offline functionality
- 31:56When to use Lighthouse results
- 33:23Customizing audits and resources
related talks
48mLighthouse for Chrome
22mUsing Lighthouse in the Real World
14mRun to the light Carol Anne: Auditing with Lighthouse
56mContinuous Accessibility: Adding Lighthouse to Your CI/CD Pipeline
20mBringing Lighthouse to Angular
22mYou’re Probably Using Lighthouse Wrong
20mClimbing to the top of the Lighthouse with Scully
27mWays of Frontend performance auditing with Lighthouse