How to improve Cumulative Layout Shift for a better page experience

Опубликовано 19 октября 2021, 13:00

Learn how to reduce your website's Cumulative Layout Shift. This video covers what a Cumulative Layout Shift is, its common issues and solutions, how to measure it, and what's a good score.

Chapters
0:00 Introduction
0:31 What is Cumulative Layout Shift (CLS)
5:14 What is a good CLS score?
5:55 How do I find my CLS score?
11:12 How to fix common issues with Cumulative Layout Shift
11:41 Images
12:52 iframes/embeds
14:19 Dynamic content
14:47 Web fonts
17:42 Wrap up

Learn more:
Cumulative Layout Shift doc→ goo.gle/3BA5Iix
CrUX Report → goo.gle/3mRQelN
Optimize CLS → goo.gle/2YRdWES
Updates to how CLS is calculated → goo.gle/2YAOGlX
Lighthouse → goo.gle/3iUBjo0
Calculating CLS in my own JS → goo.gle/30lLc7R
Best Practices for Fonts → goo.gle/3v6FXEr
Optimize WebFont loading → goo.gle/3v2YLEu
Monica Dinculescu's Font-style-matcher → goo.gle/3BDXTZe
Web-vitals → goo.gle/3oVTtJK

Watch more Getting started with Page Experience → goo.gle/3xgTJUu
Subscribe so you don’t miss an episode Getting started with Page Experience → goo.gle/SearchCentral

#CoreWebVitals #WebDev #PageExperience


product: AMP - Page Experience; fullname: Patrick Kettner;