Core Web Vitals under control
summary
Core Web Vitals are measured with real-user and lab tools and have concrete thresholds: LCP below 2.5s is good, 2.5–4s needs improvement, CLS is measured as cumulative layout shift (transcript example shows a 44% shift reduced to 0%), and FID is replaced by Interaction to Next Paint. Practical fixes: add explicit width/height or aspect-ratio, lazy-load images/iframes, convert thumbnails to lightweight images (WebP), preload and limit fonts, split JS. Use Chrome DevTools Performance (Web Vitals), Lighthouse + GitHub Actions (lighthouse-budgets.json), web-vitals npm -> Google Analytics to measure and enforce results.
AI-written summary · about
chapters (24)
- 0:00Introduction to Core Web Vitals
- 2:18Meet the assistant Clippy
- 3:22Why Core Web Vitals matter
- 5:07Key Core Web Vitals metrics
- 8:15Thresholds and 75th percentile
- 9:00Improving Largest Contentful Paint
- 11:29Boosting interactivity
- 12:33Fixing visual stability issues
- 16:01Tools for measuring Core Web Vitals
- 18:11Lab vs field tools explained
- 18:34Using Chrome DevTools
- 19:18Automating checks with GitHub
- 20:44Browser extension for monitoring
- 22:09Building your own monitoring tool
- 23:57Case study app overview
- 26:50Fixing cumulative layout shift
- 28:58Adding dimensions to assets
- 30:23Implementing lazy loading
- 32:07Optimizing thumbnails and placeholders
- 33:59Compressing images to WebP
- 35:05Reserving space for HTML elements
- 36:29Optimizing fonts and preloading
- 37:12Final results and key takeaways
- 38:40Resources and closing remarks
related talks
25mCore Web Vitals under control
25mCore Web Vitals under control
29mCore Web Vitals: Put Your App into Orbit with Best Practices
15mCore Web Vitals – Measuring Performance Like a Pro
01h 14mCore Web Vitals: Theory and practice
30mThe ins and outs of Core Web Vitals
43mDemystifying and leveraging Web Vitals
42mA crash course in core web vitals for React developers