How to keep Cumulative Layout Shift under 0.1
Cumulative Layout Shift should be under 0.1. It scores how much visible content jumps around while the page loads. Reserve space for images, ads and embeds, and avoid inserting content above what the visitor is already reading, so nothing moves under their finger.
By ratemysite.ai editorial team. Updated .
How do you fix it?
- Find shifting elements in the Chrome DevTools Performance panel (Layout Shifts track) or in PageSpeed Insights.
- Add width and height attributes, or an aspect-ratio rule, to every image, video and iframe.
- Reserve a fixed height for ad slots, embeds, cookie banners and late-loading widgets.
- Avoid injecting banners or content above existing content, and use transform animations instead of animating layout.
- Preload fonts and use font-display: optional or swap with matching fallback metrics, then re-run the audit.
What is Cumulative Layout Shift?
Cumulative Layout Shift, or CLS, is a Core Web Vitals metric that adds up unexpected movements of visible elements during a page visit. Each shift is scored by how much of the screen moved and how far. A total of 0.1 or less is good, and over 0.25 is poor. A high score is the reason you tap one button and hit another because the page moved at the last moment.
How do I stop things from jumping?
Tell the browser how much space each element needs before it loads. For images, width and height attributes let it compute the ratio at once. For ads, set a min-height on the container equal to the tallest creative. For banners, place them in reserved space or at the bottom. Fonts cause smaller shifts, which you can reduce with preload and size-adjust. After the fixes, test on a slow connection, where late content shows up and shifts become obvious.
How much does this check matter?
- This check is worth about 2.7% of the overall score.
- A finished report is reused for 24 hours before you can re-analyze it.
- Each page is fetched with a timeout of 10 seconds, and HTML larger than 2 MB is not audited.
What else do people ask?
- What causes most layout shift?
- Images without dimensions, ads and embeds without reserved space, and web fonts that swap with different sizes are the most common causes.
- Does CLS count shifts after the user taps?
- Shifts within 500 ms of a user input are excluded, because the user expects them. Unexpected shifts are what count.