"Web Vitals": See and Optimize
summary
Explains the Web Vitals performance standards and why naive optimizations can mislead due to each metric’s measurement quirks and ongoing spec changes. Shows how to use Chrome DevTools’ Performance Insights panel (and the standard Performance panel) to reverse-engineer the web-vitals.js metrics, including beta metrics, to understand and properly optimize them.
AI-written summary · about
chapters (8)
- 0:00Introduction to Web Vitals
- 3:13DevTools vs benchmarks issue
- 10:25Key Web Vitals metrics
- 15:47Interaction to Next Paint
- 21:51Performance Insights in DevTools
- 29:45Data attribution and correlations
- 35:08Summary and optimization
- 35:51Q&A
related talks
15mCore Web Vitals – Measuring Performance Like a Pro
45mWeb Vitals — Try to Improve Me
31mPanel Discussion: Get to Know: Web Performance and Core Web Vitals
29mCore Web Vitals: Put Your App into Orbit with Best Practices
34mOptimizing Web Applications with Core Web Vitals
43mDemystifying and leveraging Web Vitals
29mGoogle's Core Web Vitals
33mDemystifying Web Performance Tooling