Cumulative Layout Shift measures how much visible content moves around unexpectedly while a page loads. It is the metric users complain about without naming: tapping a button as the page jumps and hitting an advert instead.
It is also the most fixable of the three, because the causes are a short and well-understood list.
The causes, which are nearly always these
Images without dimensions
The most common cause by a wide margin. Without width and height attributes, the browser cannot reserve space, so everything below shifts when the image arrives.
- Set width and height on every image, or use a CSS aspect ratio.
- This applies to logos and icons, not just large images.
- Modern browsers use the attributes to reserve space even when CSS resizes the image.
Ads, embeds and iframes without reserved space
Anything injected after load pushes content down unless space is held. Reserve the container at its known size before the content arrives.
Web fonts causing reflow
Text rendered in a fallback font and then swapped to a custom one shifts if the metrics differ. Use font-display swap with a fallback of similar metrics, and preload fonts used above the fold.
Content injected above existing content
Cookie banners, promotional bars and notification strips inserted at the top after render push everything down. Reserve their space or overlay them rather than inserting into the flow.
Animations that affect layout
Animating height, width or position causes reflow. Animate transform and opacity instead, which do not.
Why it often looks fine to you and fails in the field
Layout shift is worst on slow connections, where the gap between initial render and asset arrival is longest. On a fast development machine with warm caches the page appears stable. The field data reflects users on mobile connections, which is what is measured.
- Test with network throttling.
- Test with an empty cache.
- Test on mobile, where the effect is strongest.
- Trust field data over your own experience of the page.
Where to start
- Add dimensions to every image. This alone resolves most CLS problems.
- Reserve space for anything injected: ads, embeds, banners.
- Check the cookie or consent banner, which is a frequent and easily missed offender.
- Review font loading.
- Re-measure in field data rather than in the lab.
Frequently asked questions
What is a good CLS?
Under 0.1 at the 75th percentile. Above 0.25 is poor. It is a unitless score rather than a time.
Our CLS looks fine locally but fails in the field. Why?
Local testing has fast connections and warm caches, so assets arrive before they can cause a shift. Throttle the connection and clear the cache to reproduce what users experience.
Does the cookie banner count?
Yes, if it pushes content down. Overlaying it rather than inserting it into the layout avoids the shift entirely, and is usually a small change.
Is CLS the most important of the three?
Not necessarily, but it is usually the cheapest to fix. Adding image dimensions is a small change with a disproportionate effect.
Consulting CTA
If your pages shift while loading and you are unsure which elements are responsible, book an SEO consultation for a layout stability review.