Learn
CLS Layout Shifts Fix Guide: Improve Cumulative Layout Shift and Page Experience
A practical guide to finding and fixing Cumulative Layout Shift: what causes elements to jump, how to reserve space, and how to prove the layout is stable.
Run a fresh DomainLens audit and use the report as your priority list.
What CLS measures and why it frustrates users
Cumulative Layout Shift (CLS) measures visual stability — how much the visible content moves around while the page is loading and being used. Every time an element that was already on screen jumps to a new position without the user causing it, that counts as a layout shift, and the score adds up the largest bursts of movement over the visit.
A good CLS is 0.1 or below; above 0.25 is poor. The reason it matters is not abstract: shifts make people tap the wrong button, lose their place in an article, or accidentally click an ad. It is the metric that most directly maps to "this page feels cheap and broken."
The usual sources of layout shift
Almost every shift comes from content that arrives late into space that was not reserved for it. The common culprits:
- Images and video without width and height attributes, so the browser cannot reserve the box until the file loads.
- Web fonts that swap in and reflow text (FOUT), pushing everything below them down.
- Ads, embeds, and iframes injected after render into a container with no fixed height.
- Banners, cookie notices, and "you might also like" widgets pushed in above existing content.
- Dynamically injected DOM — a promo bar or A/B test that appears a beat after first paint.
How to find shifts you might not notice
Shifts often happen faster than the eye registers, or only on a slow connection, so you need tooling rather than a quick look.
- In the Performance panel, record a load with network throttling and open the Layout Shifts track — each entry highlights the element that moved and its score contribution.
- Use the Web Vitals extension to watch CLS accumulate live as you scroll and interact.
- Check field data in Search Console/CrUX to confirm real users see it, and on which template.
- Test on a throttled connection: many shifts only appear when fonts, images, or ads arrive late.
How to reserve space so nothing jumps
- Always set width and height (or a CSS aspect-ratio) on images, video, and iframes so the browser reserves the box before the file loads.
- Give ad slots, embeds, and dynamic widgets a min-height matching their typical size, so late content fills reserved space instead of pushing the page.
- Load fonts with font-display: optional or swap plus a well-matched fallback and size-adjust to minimise reflow when the web font arrives.
- Reserve space for banners and notices in the layout instead of inserting them above content after load — or pin them so they overlay rather than push.
- Use CSS transforms for animation, never properties like top or height that trigger layout.
Mistakes that reintroduce layout shift
- Removing dimensions when moving to a "responsive" image and relying on CSS width alone without an aspect-ratio.
- Lazy-loading above-the-fold images, which delays them into an unreserved space.
- Testing only on a fast desktop where fonts and images arrive instantly and no shift is visible.
- Fixing the homepage and assuming the product or article template is fine — CLS is per-template.
How to validate a stable layout
Re-record the load in the Performance panel with throttling and confirm the Layout Shifts track is empty for the viewport, then watch the CLS field data in Search Console trend down over the following weeks as real visits accumulate.
In DomainLens, treat CLS alongside LCP and INP: a page that loads fast but jumps around still fails page experience. The strongest fix is a layout that is stable from first paint, on the slow mobile connection your visitors actually use.