A crash course in core web vitals for React developers

on YouTube ↗42m

" summary

Core Web Vitals are LCP FID and CLS measured at the 75th percentile and passing them correlates with 24% less abandonment and a search-rank boost; about 30% of sites currently pass. Field data from CrUX matters more than Lighthouse lab scores; PageSpeed Insights mixes both. Practical fixes include SSR with CDN and cache-key normalization, lazy hydration, lazy-load non‑LCP images, critical CSS and image optimization, and RUM via use RUM/web-vitals (create-react-app includes web-vitals) for minutes‑level feedback.

AI-written summary · about

" chapters (36)

1. 0:00Intro
2. 0:25What we'll cover
3. 1:05Our jam: Large, complex sites
4. 1:36Jamstack for Production
5. 1:59Around the web
6. 2:44We're hiring
7. 3:05What are Core Web Vitals (CWV)?
8. 4:06The road to Core Web Vitals
9. 5:32Core Web Vitals matter
10. 6:25CWV is Measurable Ranking Factor
11. 7:17Lab Data
12. 8:10CWV is Field Data
13. 13:10Core Web Vitals Optimization Journey
14. 14:37Argh!
15. 15:06RUM in Create React App
16. 15:43try.layero.co/react-day
17. 16:18Challenges when optimizing CWv
18. 16:40LCP (Largest Contentful Paint)
19. 17:07LCP Example
20. 18:09React Single Page Applications & CWV
21. 20:54Optimizing LCP
22. 21:29SSR: Better for LCP
23. 22:40SSR can negatively impact throughput and TTFB
24. 23:13Make your pages cacheable
25. 23:43Normalize Cache Keys
26. 24:37Image Optimizations
27. 26:05FID (First Input Delay)
28. 26:30Understanding FID
29. 27:31Approximating FID with TBT (Total Blocking Time)
30. 28:24Use Lazy Hydration
31. 29:12LazyHydrate in
32. 29:30Other FID Optimizations
33. 30:16CLS (Cumulative Layout Shift)
34. 30:36Understanding CLS
35. 30:59Frequent Causes of Poor CLS
36. 34:23Further Reading

" related talks

• 39mCore Web Vitals under controlMarta Wiśniewska · Web Summer Camp 2024
• 29mCore Web Vitals: Put Your App into Orbit with Best PracticesN. FRIZZARIN · Devoxx France 2023
• 43mDemystifying and leveraging Web VitalsClément Pasteau · reactjsday 2020
• 30mThe ins and outs of Core Web VitalsDan Shappir · JSConf Budapest 2022
• 25mCore Web Vitals under controlMarta Wiśniewska · Voxxed Days Zurich 2023
• 15mCore Web Vitals – Measuring Performance Like a ProOfir Elarat · ReactNext 2024
• 25mCore Web Vitals under controlMarta Wiśniewska · JNation 2024
• 01h 14mCore Web Vitals: Theory and practiceElizabeth Sweeny, Ivan Akulov · HolyJS 2020 Moscow