Cumulative Layout Shift (CLS) is one of Google’s three Core Web Vitals and measures how much a web page’s layout still shifts after the first render. When content jumps down afterwards because an image without a height attribute loads late, a cookie banner collapses or an asynchronous ad slots in, a layout shift occurs. That’s not just unpleasant to read – it regularly leads to misclicks (“Where did my button go?”) and has been a direct Google ranking factor since 2021.
How is CLS measured?
CLS is reported as a dimensionless score. Every layout shift is broken down into:
- Impact fraction: what percentage of the viewport was shifted
- Distance fraction: how far (relative to the viewport height)
Multiplied together, they yield the shift score. CLS sums all shifts not triggered by a user action within 5-second windows and takes the worst window value as the final result (session window).
Thresholds
| Value | Rating |
|---|---|
| ≤ 0.1 | good (green) |
| 0.1 – 0.25 | needs improvement (orange) |
| > 0.25 | poor (red) |
Measurement happens at the 75th percentile of real user traffic from Google’s CrUX dataset.
Typical causes of high CLS
- Images and videos without
width/heightattributes: the browser only knows the image size once the file loads, and reserves no space until then - Asynchronously embedded ads, embeds or iframes: slots are only filled when the third-party system responds
- Web fonts with FOIT/FOUT: the font swap leads to changed line breaks
- Dynamically inserted banners: cookie banners, promo bars or newsletter pop-ups that push the layout down afterwards
- DOM manipulation via JavaScript after the first paint: elements get inserted above the viewport afterwards
- Animations that use
top/leftinstead oftransformand recalculate the entire layout
How is CLS optimised?
- Give all media fixed dimensions:
widthandheightdirectly in the HTML, alternativelyaspect-ratioin CSS - Reserve slots for asynchronous content: fixed heights for ad containers, embeds, recommendations
font-display: optionalorswapinstead of FOIT; preload the critical font variant- Build cookie banners as overlays instead of pushing blocks
- Animate with
transform: translate(...)instead oftop/left: runs on the GPU, doesn’t affect the layout - Skeleton screens / placeholders for lazily loading UI areas, so the space is already reserved
Which layout shifts do not count?
CLS deliberately ignores shifts occurring within 500 ms of a user interaction – a click on “Show more” may lengthen the layout without raising the score. What matters is that the triggering interaction clearly comes from the user; auto-loaders or scroll animations don’t count as user interaction.
Tools for measuring
- Google PageSpeed Insights: field data (CrUX) + lab score
- Lighthouse: in the performance audit with a detailed shift list
- Chrome DevTools / Performance panel: shows every shift as an entry in the timeline
- Google Search Console: CLS history across real users
- web-vitals JS library: measure CLS actively and forward it to your analytics
Frequently asked questions about CLS
Does CLS = 0 mean there may be no layout shifts at all? No – just no unexpected ones. Shifts following an explicit user action don’t count.
Why do I see CLS = 0 on my machine but 0.2 in Search Console? Lab tests are a single run under ideal conditions; Search Console aggregates real user behaviour across many devices, connections and sessions. Late layout shifts caused by slow ads or tracking scripts show up there.
How quickly do optimisations take effect? Search Console aggregates over 28 days; visible improvement therefore typically takes 4–6 weeks.
Conclusion
CLS is the most direct measure of layout stability – an important UX signal that simultaneously feeds into the Google ranking. The most common cause (images without dimensions) is fixed quickly; more complex sources like asynchronous ads or banners need architectural solutions. We’re happy to analyse and optimise CLS as part of an SEO audit – get in touch for a no-obligation consultation.