You have seen it as a user: you go to tap a button, an image finishes loading above it, and the whole page shoves the button down so you tap the wrong thing. That jump is layout shift, measured by Google as Cumulative Layout Shift (CLS). This article explains why content jumps, how to reserve space so it does not, and the mistakes that keep CLS high even after you “fixed” it.
Why content jumps in the first place
The browser lays out the page as content arrives. When an element loads later than the text around it and no space was set aside, the browser has to push existing content out of the way to fit it. Every uninvited push is a layout shift. The usual culprits are images without dimensions, ads and embeds that arrive late, web fonts that swap and change text size, and content injected by JavaScript after the page is visible.
Reserve space for images and video
The single biggest win is telling the browser how big media will be before it loads. When you set the width and height attributes on an image, modern browsers compute the aspect ratio and hold that space open, then scale the image responsively with CSS. The gap is reserved from the first paint, so nothing jumps when the file arrives.
- Always set
widthandheightattributes on. - For responsive images, keep the attributes and let CSS handle
max-widthandheight: auto. - Use the CSS
aspect-ratioproperty for containers whose size you know in advance.
Handle fonts so text does not reflow
Web fonts often load after a fallback font has already rendered. If the two fonts have different sizes, the text reflows when the swap happens, shifting everything below it. Reduce this by preloading key fonts, choosing fallback fonts with similar metrics, and using font-display thoughtfully. The size-adjust descriptor on @font-face can align a fallback’s metrics to the web font so the swap is nearly invisible.
Give late content a home
Ads, embeds, cookie banners, and “related items” widgets are common shift sources because they load late and push content. Reserve a fixed-size container for them. If a slot might be empty, decide whether to collapse it gracefully or keep the reserved height. Never insert content above existing content once the user can see it, unless it is a direct response to their own interaction.
A real scenario
On a blog I audited, the hero image had no dimensions and a newsletter banner was injected by script near the top after load. On a slow connection, readers would start reading the first paragraph, then the image and banner would appear and shove the text down two full screens. CLS was well into the “poor” range. Adding width and height to the hero and reserving a fixed height for the banner container dropped CLS to near zero, and readers stopped losing their place.
Common mistakes and how to fix them
- Setting only CSS width and forgetting height. Without a height or aspect ratio, the browser still cannot reserve vertical space. Provide both, or use
aspect-ratio. - Measuring only on a fast desktop. Shifts appear on slow networks and mobile, where assets arrive late. Test with throttling.
- Animating layout properties. Animating
top,height, ormarginmoves surrounding content. Animatetransformandopacityinstead, which do not trigger layout shift. - Injecting banners above the fold after load. Reserve the space up front, or insert below the current viewport.
- Ignoring the font swap. If your brand font is much wider than the fallback, the swap alone can cause visible shift. Match metrics or preload.
Action checklist
- Add explicit
widthandheightto every image and video. - Reserve fixed containers for ads, embeds, and injected widgets.
- Preload your primary web fonts and pick a metrics-compatible fallback.
- Replace layout-triggering animations with
transformandopacity. - Measure CLS in the lab and in the field, on throttled mobile.
Conclusion
Layout shift comes from space the browser did not know to reserve. Tell it the sizes in advance and late-loading content stops disrupting the reader. Your next step: open your busiest page, run it through a Core Web Vitals check, and fix the largest shift source first. The improvement is often dramatic and quick.
FAQ
What CLS score should I aim for?
Google’s Core Web Vitals guidance treats a CLS of 0.1 or below as good and above 0.25 as poor, measured on real user visits.
Do image dimensions hurt responsive design?
No. The width and height attributes set the aspect ratio; CSS still scales the image to its container. You get responsiveness and reserved space together.
Why is my lab CLS good but field CLS bad?
Lab tests often run on fast connections where assets arrive quickly. Real users on slow mobile see late-loading content shift more. Trust field data from real visits.
Does lazy loading cause layout shift?
It can, if the lazy image has no reserved space. Lazy loading is fine as long as you still set dimensions or an aspect ratio for the slot.
References
- Google web.dev: Cumulative Layout Shift and Core Web Vitals documentation.
- MDN Web Docs: the
aspect-ratioCSS property and@font-facedescriptors.