Stop Layout Shift (CLS) by Reserving Space for Media

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) measures how much your content moves around while the page loads. Every time an element jumps because an image, ad, or font loads late, it adds to the score. Those jumps are why you sometimes tap the wrong button on a half-loaded page.

CLS is the Core Web Vital that tracks visual stability, and it is one of the easiest to fix once you know the causes.

What is a good CLS score?

A good CLS is 0.1 or less. According to Google, scores at or below 0.1 pass, scores above 0.25 are poor, and the value is measured at the 75th percentile of real visits. CLS is a unitless score, not a measure of time.

Lower is better, and a score of zero is realistic on a carefully built page.

How do you stop images and embeds from shifting?

Reserve the space before the content loads. When the browser knows an element's size in advance, it holds the spot and nothing below it jumps.

• Set width and height on every image. Modern browsers use these attributes to calculate an aspect ratio and reserve space before the file arrives.
• Give ads and iframes a fixed container. Wrap ad slots in a box with a defined min-height so late-loading creatives fill reserved space instead of shoving text down.
• Reserve space for embeds. YouTube frames, maps, and social widgets all need a sized container with a known aspect ratio.

How do fonts cause layout shift?

Web fonts trigger shifts when the fallback font swaps for your custom font at a slightly different size. Every line of text nudges as the swap happens, which quietly inflates your CLS.

Control it with the font-display property and font metrics:

• Preload your critical fonts so they arrive sooner.
• Use font-display: optional or swap to control how the browser handles the swap.
• Match the fallback font's metrics to the web font with size-adjust, so the swap barely moves anything.

Fix the biggest offenders first. Open the Performance panel in Chrome DevTools, find the Layout Shift regions and the elements that move most, and reserve their space. Re-test in PageSpeed Insights and watch field CLS drop over the following month.

Want the full playbook? Read our guide on Technical SEO Audits: Which Fixes to Prioritize First.