Fixing Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures how much visible content moves around while a page loads. To fix it, you reserve space for anything that arrives late (images, ads, embeds, fonts, and injected banners) so the layout stays stable from first paint. A good CLS score is 0.1 or less at the 75th percentile of real users. This guide walks through the common causes and the exact changes that remove them.

What causes layout shift

CLS goes up when an element that was already visible gets pushed to a new position by content loading above or around it. The score is the impact fraction (how much of the viewport moved) multiplied by the distance the content traveled, summed across unexpected shifts. Shifts that happen within 500ms of a user interaction are excluded, so the goal is to eliminate the movement that users did not ask for. For the official definition and thresholds, see web.dev on CLS.

Fix images and video

Missing image dimensions are the most common cause. The browser does not know how tall the image will be, so it collapses the space until the file arrives, then reflows everything below it.

1. Add explicit width and height attributes to every <img> and <video> tag. Modern browsers use these to compute an aspect ratio and reserve the correct box before the file loads.
2. For responsive images, keep the attributes and let CSS scale them: img { height: auto; }. The aspect ratio is preserved and no shift occurs.
3. For background or CSS-driven media, reserve the box with the aspect-ratio property, for example aspect-ratio: 16 / 9;.

Reserve space for ads, embeds, and iframes

Ad slots, social embeds, and third party iframes often inject content after load. Give each slot a fixed minimum size that matches the most common creative, using min-height on the container. If the slot can be empty, still reserve the space so a late fill does not shove the article down. Never insert content above existing content unless it is in response to a user action.

Stop fonts from shifting text

When a web font swaps in late, line heights and widths change and text reflows. Reduce this by adding font-display: optional or swap to your @font-face rule, preloading the primary font file, and choosing a fallback font with similar metrics so the swap is barely visible.

Handle dynamic and injected content

Cookie banners, notification bars, and lazy loaded sections all move the page if they push content down. Overlay them (fixed or sticky positioning) instead of inserting them into the document flow, or reserve their height in advance. Animate layout changes with transform rather than properties like top or height, since transforms do not trigger layout shifts.

Measure before and after

1. Open Chrome DevTools, run a Lighthouse report, and read the CLS value plus the list of shifting elements.
2. Use the Performance panel and enable Layout Shift regions to see exactly which elements move and when.
3. Confirm the field result in Google Search Console under Core Web Vitals, which reports real user data rather than a single lab run.

Fast, consistent delivery makes these fixes stick. On our LiteSpeed and CloudLinux stack with server level caching, assets return quickly and predictably, which keeps render timing stable across visits. Learn more about our SEO web hosting, browse the rest of the performance and Core Web Vitals guides, or contact us if you want help profiling a slow page.