Fixing common Web Vitals issues
summary
CLS is computed by a PerformanceObserver that sums layout-shift entries and only finalizes on a document visibilitychange to hidden, with shifts within 500 ms of most user input excluded (scrolling is not excluded). DevTools offers layout shift regions for debugging, and fixing often means adding width/height to images/iframes or changing UX like top banners. Lazy-load third-party scripts with IntersectionObserver or time after first paint (setTimeout is only a minimum); consider tag-manager restrictions. For RUM, use web-vitals JS or CloudFlare Browser Insights and Search Console URL groups for page-level data.
AI-written summary · about
chapters (8)
- 0:00Start
- 0:57Calculating CLS
- 1:27Reporting CLS
- 5:30UX patterns can be a source of CLS.
- 6:23Lazy-loading 3P scripts
- 8:06Google Tag Manager
- 8:32Differences between tools
- 10:16Collect your own RUM
related talks
39mCore Web Vitals under control
25mCore Web Vitals under control
43mDemystifying and leveraging Web Vitals
29mCore Web Vitals: Put Your App into Orbit with Best Practices
25mCore Web Vitals under control
42mA crash course in core web vitals for React developers
31mPanel Discussion: Get to Know: Web Performance and Core Web Vitals
15mCore Web Vitals – Measuring Performance Like a Pro