Improving Lighthouse score for media-heavy React applications
summary
Shows a concrete workflow: use ImageKit Next.js SDK with S3 + CloudFront, convert GIFs to MP4 by URL and serve AVIF/WebP, apply responsive sizing, lazy load offscreen media and preload the LCP image. Local test reports go from Lighthouse 64→94, LCP drops 19s→2s, FCP 1.1s→0.88s and CLS ~0.078; a sample image shrinks from ~600 KB to ~21 KB. Demonstrates live URL-based transforms and cached AI-backed background edits, and the demo works end-to-end.
AI-written summary · about
chapters (9)
- 0:00Introduction and setup
- 3:53Why optimize media performance
- 8:16Lighthouse metrics and penalties
- 9:19Optimizing images for Lighthouse
- 12:32Optimizing videos for Lighthouse
- 13:34Case study: E-commerce app optimization
- 19:13Future of media optimization with AI
- 20:42Live demo: AI-powered image transformations
- 31:29Conclusion and Q&A
related talks
14mHigh-quality, performant images & videos on your React website (and some AI magic!)
35mExploring the Lighthouse
26mFast and Beautiful Modern Image Delivery Techniques
39mFrom make it work to make it fast: quick wins to boost your application
16mFrom beginner to expert in web performance
46mSpeed Matters: Client Side Performance Improvement Tips & Tricks
29mA deep dive into optimizing LCP
20mClimbing to the top of the Lighthouse with Scully