What is CLS in Core Web Vitals? How to stop your page jumping

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible content unexpectedly shifts around on a screen while a page loads. If you have ever tried to tap a button on your phone only to have a banner load at the last millisecond and cause you to tap an ad instead, you have experienced a poor CLS score firsthand.

Google treats visual stability as a key indicator of user experience. Pages that jump around irritate visitors, increase bounce rates, and lead to accidental clicks that frustrate potential customers.

Google measures CLS on a scale starting at zero, calculated by multiplying how far unstable elements move by the percentage of the screen they affect. A good CLS score is 0.1 or lower. A score between 0.1 and 0.25 needs improvement, and anything above 0.25 is considered poor. In my client work, keeping this number under 0.1 is essential for passing Google's real-user page experience assessments, as outlined in my guide on Core Web Vitals explained.

Why web pages shift while loading

Browsers build web pages incrementally. When someone requests your URL, the browser starts reading the HTML document from top to bottom, rendering text and basic structural elements immediately before all media files and external scripts finish downloading.

When an image, script, or custom font arrives a fraction of a second later, the browser must adjust the layout to fit that new asset. If your code did not tell the browser how much room to reserve ahead of time, existing text and buttons get pushed downward or sideways.

Layout shifts do not just happen during the initial page load. Any delayed action—such as an automated newsletter pop-up, an accordion expanding without smooth transitions, or a cookie consent banner loading late—contributes to your overall CLS score if it moves visible elements without direct user interaction.

The three most common causes of high CLS

In almost every website audit I perform, high layout shift scores come down to three specific technical oversights. Fixing these issues usually resolves the majority of page stability problems immediately.

• Images, videos, and iframes without dimensions: When media tags lack explicit width and height attributes in the HTML, the browser allocates zero vertical pixels until the file downloads, suddenly shoving down everything beneath it when the image renders.
• Dynamically injected banners and ads: Third-party scripts often insert cookie notices, chat widgets, marketing notification bars, or ads at the very top of the page after the initial layout has rendered.
• Custom web fonts: When custom web fonts load slowly, the browser displays a temporary fallback font. If the custom font has different letter widths or line heights than the fallback, the entire text block reflows and shifts once the font arrives.

How to find which elements are shifting

Before changing your code, you need to identify exactly which elements are moving. You can start by running your page through Google PageSpeed Insights or using a free website speed test to see your current laboratory and field metrics.

Under the Diagnostics section in PageSpeed Insights, locate the audit titled 'Avoid large layout shifts'. Expanding this section reveals the exact HTML elements responsible for the highest shift scores, alongside screenshots showing the page before and after the shift occurred.

For a more granular view, open Chrome DevTools on your computer, navigate to the Performance tab, and record a page reload. DevTools creates an 'Experience' row that flags every individual layout shift with a red bar, listing the exact element and shift contribution when clicked.

How to fix CLS and keep your layout stable

Once you know which elements are causing the movement, the technical fixes are straightforward to implement in production code.

Always define explicit width and height attributes on your image and video elements. Modern browsers use these attributes to calculate the aspect ratio automatically, reserving the exact box space before the image file even downloads. If you build with modern frameworks like Next.js, the built-in Image component handles this automatically by requiring dimensions or an explicit layout fill strategy.

For dynamic elements like cookie banners or promotional headers, reserve space in your CSS using min-height or skeleton loaders. By reserving the height upfront, the container simply fills in when the script executes, preventing the main navigation and hero copy from dropping down.

To solve font shifting, use modern CSS font-display properties like 'optional' or adjust fallback font metrics to match your custom font dimensions. If you are struggling to resolve shifting across complex templates, bringing in a targeted speed and Core Web Vitals fix helps isolate script conflicts and stabilizes critical rendering paths.

Practical takeaways for a stable website

Eliminating layout shifts requires adopting consistent layout habits during development and marketing updates. Keeping these simple rules in mind protects your user experience and keeps your Core Web Vitals in the green.

• Aim for a CLS score under 0.1 across both mobile and desktop visitors.
• Never add an image, video, or iframe without explicit dimensions or an aspect-ratio rule in CSS.
• Reserve vertical container space for third-party scripts, cookie notices, and marketing banners.
• Preload key web fonts and align fallback font metrics to prevent text reflows.
• Test your pages on throttled mobile connections before launching new components.

Want help with this? See my Speed & Core Web Vitals fix service, or send me your site for a free review.