What it means
CLS adds up unexpected layout shifts, weighted by how much of the screen moved and how far. It is one of the three Core Web Vitals.
web.dev defines a good CLS as 0.1 or less and a poor one as more than 0.25, at the 75th percentile of visits.
Why it matters
Shifting content makes people lose their place and mis-tap: a late banner pushes a link down just as someone taps it. Google uses Core Web Vitals in its ranking systems.
web.dev’s case study on Yahoo! JAPAN News reports 15% more page views per session after it reduced CLS.
How to find it yourself
- PageSpeed Insights shows field and lab CLS and highlights the elements that moved.
- In Chrome DevTools, the Performance panel marks layout shifts on the timeline.
How to fix it
On any website
- Give every image and video width and height attributes, or a CSS aspect-ratio, so the browser reserves space.
- Reserve space for ads, embeds and banners that load late, and don’t insert content above what’s already shown.
- Load web fonts with font-display and a fallback of similar size to limit the jump when the font swaps in.
On Shopify
- Check announcement bars, pop-ups and app widgets that inject content at the top of the page after load.
On WordPress and WooCommerce
- Make sure the theme outputs image dimensions, and check cookie banners and ad plugins that push content down.
How to check the fix
- Run the speed test again; field CLS updates over the following 28 days.
How FixReports finds it
The speed test measures CLS during a throttled phone load and also shows Chrome UX Report field data when available. We flag a CLS over 0.1.