Demystifying and leveraging Web Vitals

on YouTube ↗43m

" summary

Defines the actionable claim: measure Core Web Vitals (LCP, FID, CLS) in production and CI using the web-vitals npm package, debug with the Chrome DevTools Performance tab and Lighthouse, and send real-user metrics to analytics. Builds a demo from create-react-app that shows three layout shifts and a 500ms main-thread task; fixes include downsizing an image, reserving banner space, and trimming JavaScript. Result is LCP moving earlier, layout shifts disappearing and total blocking time dropping to zero, proving the approach works.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 0:45Clement Pasteur
3. 4:20Intro
4. 4:40Web Vitals
5. 6:46First Input Delay
6. 11:22Lighthouse
7. 13:18Cumulative Layout Shift
8. 13:57Total Blocking Time
9. 16:27Layout Shifts
10. 19:57The Web Vitals Extension
11. 21:33Page Speed Insights
12. 28:16Summary
13. 34:52What Is the Impact of Measuring a Dev versus Prod Build of a Create React App Using Performance Tab in Chrome
14. 38:47Placeholders
15. 41:11Are There some Best Practices in Order To Correctly Fix the Things Reported by Web Vitals Test

" related talks

• 29mCore Web Vitals: Put Your App into Orbit with Best PracticesN. FRIZZARIN · Devoxx France 2023
• 31mPanel Discussion: Get to Know: Web Performance and Core Web VitalsHoussein Djirdeh, Cassidy Williams, Tamas Piros · React Summit Remote Edition 2021
• 39mCore Web Vitals under controlMarta Wiśniewska · Web Summer Camp 2024
• 42mA crash course in core web vitals for React developersIshan Anand · React Day New York 2021
• 25mCore Web Vitals under controlMarta Wiśniewska · Voxxed Days Zurich 2023
• 01h 14mCore Web Vitals: Theory and practiceElizabeth Sweeny, Ivan Akulov · HolyJS 2020 Moscow
• 34mOptimizing Web Applications with Core Web VitalsANDREINA GOMEZ · Nerdearla 101 2022
• 15mCore Web Vitals – Measuring Performance Like a ProOfir Elarat · ReactNext 2024