CLS: What It Is and How to Fix It in 2026 - Ighenatt Blog

You have landed on a website, started reading an article, and just as you were about to click a link, the content shifted downwards and you clicked an ad instead. That is a layout shift. When that shift accumulates during page loading, you have a CLS problem, and Google measures it, records it and uses it as a quality signal.

CLS (Cumulative Layout Shift) is probably the Core Web Vitals metric that is easiest to understand and most annoying for users. Unlike LCP or INP, which measure load and interaction times, CLS measures visual stability. And a fast site with jumping content is a worse experience than a slow but stable one.

What CLS is and why Google penalizes it

CLS quantifies unexpected shifts of visible elements during the lifespan of the page. It does not measure all movements, only those the user did not trigger. If you click a button and content expands, that does not count. If an image loads late and pushes text downwards, that does count.

Google sets three thresholds for CLS at the 75th percentile of field data:

• Good: 0.1 or below.
• Needs improvement: between 0.1 and 0.25.
• Poor: above 0.25.

CLS is part of the Core Web Vitals set alongside LCP and INP. A high CLS not only affects ranking; it directly impacts user experience, bounce rate and the perceived professionalism of your site.

The CLS formula combines two factors: the fraction of the viewport affected by the shift (impact fraction) and the distance the element shifted (distance fraction). A large element that moves a lot generates more CLS than a small element that shifts slightly.

How to measure CLS: tools and what they report

There are lab tools (which simulate loading under controlled conditions) and field tools (data from real users). For CLS, field data is more reliable because it captures shifts that occur after the initial load, during user interaction.

PageSpeed Insights shows both types of data. Field data comes from the Chrome UX Report (CrUX) and represents the real experience of users who visit your site with Chrome. Lab data comes from Lighthouse and simulates a load under specific conditions.

Chrome DevTools: Performance tab. Record the page load and look for blocks marked as “Layout Shift” in the timeline. Each block shows which elements shifted, how much CLS they contributed and when during the load it occurred.

Layout Shift Regions in DevTools. Activate this option from the Rendering menu in DevTools. Every time an element changes position, it is visually highlighted with a blue border. This is the most intuitive way to identify what is causing CLS in real time.

Google Search Console: Core Web Vitals report. Groups your URLs by CLS performance and shows historical trends. It does not identify the specific element, but it points to which page templates or site sections have issues.

Web Vitals Extension. Shows cumulative CLS in real time as you browse your site. Useful for detecting layout shifts that occur during interaction, not just during loading.

The most frequent causes of high CLS

Images and videos without dimensions

When an image does not have defined width and height attributes, the browser does not know how much space to reserve until it downloads. In the meantime, it renders the rest of the content. When the image finally loads, it pushes all content below it downwards. According to HTTP Archive data, this is the most frequent cause of CLS, affecting 63% of websites with high scores.

Dynamic ads and banners

Ad spaces filled with JavaScript after the initial load are frequent offenders. A Google Ads banner that appears between the title and the first paragraph pushes all visible content and generates a significant layout shift.

Web fonts with FOUT

Flash of Unstyled Text occurs when the browser displays text with a system font and then replaces it with the custom font when the download finishes. If the metrics of both fonts are different (height, width, spacing), the font swap causes shifts in text blocks.

Dynamically injected content

Cookie banners, notification bars, newsletter pop-ups and any element inserted into the DOM after the initial render can cause CLS if it displaces existing content. This is especially problematic when the element is inserted at the top of the page.

Iframes without dimensions

Iframes (such as YouTube embeds or Google Maps) without explicit dimensions behave just like images without dimensions: the browser does not know how much space to reserve until the iframe content loads.

How to fix CLS caused by images without dimensions

The fundamental solution is to reserve space for each image before it is downloaded. There are three ways to do this:

Width and height attributes in HTML. The most direct approach. Define the attributes directly on the <img> tag. Modern browsers calculate the aspect ratio from these attributes and reserve the corresponding space, even if CSS modifies the final size with width: 100%.

CSS aspect-ratio. The aspect-ratio property is the modern solution for reserving space. Apply aspect-ratio: 16/9 (or the relevant ratio) to the container or directly to the image. The browser reserves the space before downloading the resource.

Padding-top containers (legacy). Before aspect-ratio, the standard technique was to use a container with percentage padding-top (padding-top: 56.25% for 16:9). It works but is less readable than aspect-ratio. If your project needs compatibility with older browsers, this technique remains valid.

For every type of image on your site, the rule is the same: the browser must know the dimensions before initiating the download. This applies to hero images, thumbnails, avatars, SVG icons with variable sizes and any visual resource that occupies space in the layout.

Keeping LCP under control and CLS within healthy thresholds are complementary objectives: optimizing images with explicit dimensions and modern formats improves both metrics simultaneously.

How to fix CLS caused by ads and banners

Ads are the most difficult case because you do not control the content that loads, but you do control the space reserved for it.

Containers with fixed dimensions. Define a <div> with the exact dimensions of the ad format before the ads script fills it. For a 728x90 banner, the container should have min-height: 90px and width: 728px (or the responsive equivalent). The space exists from the first render and the ad loads inside it without displacing anything.

Fixed or sticky position for adhesive ads. Ads that should remain visible during scrolling (sticky headers, adhesive footers) should use position: sticky or position: fixed. These positionings take the element out of the document flow and do not cause layout shifts when they appear or disappear.

Avoid inserting ads above the fold. If the ad loads with a delay and is inserted between visible content, the CLS will be high. Place ads in positions that do not displace critical content, or ensure the space is reserved from the static HTML.

Visual placeholder. While the ad loads, show a placeholder with a light grey background or a loading skeleton that maintains the dimensions of the reserved space. This not only prevents CLS but tells the user that something is going to appear in that space.

For websites that rely on advertising revenue, maintaining a low CLS requires discipline in implementation, but the impact on user experience and perceived web speed justifies the technical effort.

Frequently asked questions about CLS

What CLS is acceptable according to Google?

Google classifies CLS in three levels: good (0.1 or below), needs improvement (between 0.1 and 0.25) and poor (above 0.25). The goal is to keep CLS at 0.1 or less at the 75th percentile of field data.

Do Google Ads always cause CLS?

Not necessarily. Ads cause CLS when no space is reserved for them before they load. The solution is to define a container with the exact dimensions of the ad using CSS (min-height or aspect-ratio) so the space exists before the ad loads.

How do I know which element is causing the CLS?

In Chrome DevTools, open the Performance tab, record the page load and look for Layout Shift events in the timeline. Each one shows which elements moved and how much CLS they contributed. You can also activate Layout Shift Regions in the rendering menu to see changes in real time.

If your site has a CLS above 0.1 and you cannot identify or fix the causes, you need a technical diagnosis that analyses layout shifts in both field and lab data. Contact us to audit the visual stability of your website and apply the corrections needed to meet Core Web Vitals thresholds.