How to Fix Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals, and a poor CLS score is one of the most noticeable user experience failures on the web. Unlike LCP or INP, CLS is not about speed — it is about stability. A page with a poor CLS literally moves as it loads, and the result is accidental clicks, lost context and frustrated visitors. The good news is CLS has only five sources, and each has a clear fix.

Source 1: Images without dimensions

This is the most common cause of layout shift. When the browser loads the HTML, it reserves no space for an image because no width or height attributes are set. The image loads a moment later, pushes everything below it down, and the shift registers in the CLS score.

The fix is simple: always add width and height attributes to every img element. These do not need to match the rendered display size — they just need to set the aspect ratio. Modern CSS then scales the image responsively while preserving the aspect ratio.

For example, if an image is 1200 by 800 pixels, add width="1200" height="800" to the img tag. Even if the image displays at 600 by 400 on the page, the browser reserves the correct proportional space before the image loads. This single change can move a failing CLS score into the green.

Images are also the biggest factor in LCP. Combining dimension attributes with the image optimisation techniques for LCP covers both metrics at once.

Source 2: Ads and embeds

Ads are the second most common CLS offender because ad networks inject content after the page has loaded. The ad slot is either empty, then populated with an ad of unknown dimensions, pushing the surrounding content.

Reserve the ad space in advance. Give every ad container a fixed width and height in the CSS. If the ad is taller or shorter than the reserved space, the container clips or leaves whitespace — either is better than a layout shift. Some ad networks support fluid sizing that respects the reserved space.

Third-party embeds like YouTube videos, Twitter timelines and map widgets cause the same problem. With embeds, the fix is to wrap them in a container with a known aspect ratio. A common approach is the padding-bottom percentage trick for responsive video containers: set padding-bottom to the aspect ratio percentage and position the embed absolutely inside.

Source 4: Dynamic content injections

Content added to the page after the initial render — cookie consent banners, notification bars, promotional popups — pushes existing content down. These are especially frustrating because they often appear after the user has started reading.

Reserve space at the top or bottom of the page. If you know a banner may appear, set aside space for it in the initial layout. For cookie consent, consider a persistent footer banner that does not shift the main content, or push it above the viewport so it slides in without moving the content below.

Use position: fixed or position: sticky for overlays and banners that must appear on top. These do not cause CLS because they are removed from the document flow.

Source 3: Web fonts

When a page uses a custom web font, the browser first renders the text in a fallback font, then swaps to the custom font once it downloads. If the two fonts have different metrics, the text reflows and shifts everything below it.

Use font-display: swap with size-adjust. The font-display: swap CSS property tells the browser to render text immediately with the fallback font and swap later. Combined with the size-adjust descriptor in your @font-face rule, you can match the fallback font metrics to the custom font so the swap causes no visible shift.

Preload your primary font. Add a preload link for the font file in the page head. This tells the browser to download the font early in the loading process, reducing the window in which the fallback font is visible.

Source 5: Animations and transitions

CSS animations that change layout properties — width, height, margin, padding, top, left — cause shifts. These properties trigger layout recalculations that the browser counts as shifts.

Only animate transform and opacity. Transform and opacity can be animated without triggering layout recalculations because the GPU handles them on a separate compositor layer. Use transform: translate() instead of changing left or top. Use transform: scale() instead of changing width or height.

If you are unsure which properties are safe, a good rule of thumb is: if it changes where other elements sit, it causes CLS. If it only changes the element's appearance, it probably does not.

Diagnosing CLS on your site

Before you can fix CLS, you need to identify which elements are causing the shifts. Google Search Console includes a Core Web Vitals report that flags pages with poor CLS. Within each affected page, you need to find the specific elements that shifted.

Use the Chrome DevTools Performance panel. Record a page load and look for red bars in the Layout Shift section. Clicking a bar highlights the element that shifted on screen and shows the shift score. This is the most direct way to identify the source.

Try the CLS debugger bookmarklet. Several free tools highlight shifting elements during page load and display their contribution to the total CLS score. Run these on your homepage, your most visited content pages and your checkout or enquiry flow — the pages where CLS causes the most conversion damage.

Run field data through the CrUX API. The Chrome User Experience Report gives you real CLS data aggregated from actual visitors. If your field CLS is poor but your lab tests look clean, the shift may be caused by something that only happens in real-world conditions — a slow ad network, a dynamically loaded font or a third-party script that behaves differently under load.

For a broader perspective on how CLS, LCP and INP work together to affect your site's performance, revisit our Core Web Vitals explained guide and our complete diagnostic speed checklist.

Prioritising CLS fixes by effort and impact

Not all CLS fixes are equal. Some take five minutes and fix the largest shift on the page. Others require significant development work for a small improvement. Prioritise based on the size of the shift and the effort to fix it.

Quick wins (fix immediately): Adding width and height attributes to images usually takes minutes per page and can reduce total CLS by 0.1 or more. Setting explicit dimensions on ad containers and iframes is similarly quick. These two fixes alone bring most sites into the good CLS range.

Medium effort (schedule next sprint): Implementing font-display: swap with size-adjust for web fonts is a CSS change that takes an hour and fixes text reflow. Replacing layout-animating CSS properties (width, height, margin) with transform-based animations is a larger code change but eliminates a recurring source of shift.

Larger projects (plan for the quarter): Rebuilding how dynamic content is injected — moving cookie banners to fixed positioning, reserving space for notification bars — requires coordination between design and development teams but is necessary for sites that consistently fail CLS on mobile.

Your goal is a CLS score under 0.1 for the 75th percentile of page loads, measured from field data in Search Console. Once you reach that threshold, maintain it by adding CLS checks to your deployment pipeline and testing every new page template before it goes live.