Cumulative Layout Shift (CLS)

Wordpress » Performance » Core Web Vitals (CWV) » Cumulative Layout Shift (CLS)

Layout Shift caused by CSS transitions

What is Cumulative Layout Shift (CLS) and how to fix it

Tools to detect:

CLS Visualizer Chrome extension, and maybe CLS Checker - Journey Further and Core Web Vitals Visualizer

Measure layout shifts Lighthouse user flows  |  Articles  |  web.dev

lighthouse/docs/user-flows.md at 6859c5f6a183c65b15021ed6e342f6f83af21a87 · GoogleChrome/lighthouse · GitHub

Remove lazy loading for the main banner and add width and height for each image. This should improve your CLS score…

We get a lot of feedback where Lighthouse does not match CrUX for CLS (example). Often this is due to items “below the fold” without explicit dimensions. It would be good to be able to have a “Scroll to bottom of page after load” option in Lighthouse to pick those up - perhaps highlighted if lab CLS has large mismatch with field CLS?

Recording A User Flow In Chrome DevTools | DebugBear