Core Web Vitals under control
summary
Core Web Vitals are LCP, interactivity (now INP) and visual stability with concrete targets: LCP ≤ 2.5s (2.5–4s caution, >4s bad), INP ≤ 200ms (200–500ms caution, >500ms bad), and cumulative layout shifts measured as percent ranges (transcript uses <10%, 10–25%, >25%). Common causes: slow server/large assets, long JS tasks, missing image/iframe dimensions, and font swaps. Tools: Lighthouse, Chrome DevTools, PageSpeed Insights/CrUX, web-vitals library and GitHub Actions via budget.json. Practical fixes shown: add dimensions or aspect-ratio, lazy loading images, replace iframe thumbnails with images, convert to WebP, and preload key fonts with font-display: optional.
AI-written summary · about
chapters (8)
- 0:00Introduction to Core Web Vitals
- 2:09Core Web Vitals explained
- 6:24Reasons for poor Core Web Vitals
- 11:42Tools to measure Core Web Vitals
- 13:28Automating Core Web Vitals checks
- 15:57Tracking Core Web Vitals yourself
- 16:40Demo app improvements
- 24:49Summary and key takeaways
related talks
39mCore 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
42mA crash course in core web vitals for React developers
34mOptimizing Web Applications with Core Web Vitals