CLS: What Is Cumulative Layout Shift and How to Eliminate It

You have experienced CLS even if you did not know it had a name: you are about to click a button and just before your finger touches it, a banner appears above it and the button shifts down. You just clicked the banner instead. That is a layout shift. CLS (Cumulative Layout Shift) quantifies how much that happens on your page and has a direct impact on SEO.

How is CLS calculated?

Each individual layout shift is calculated by multiplying the fraction of the viewport that moved (impact fraction) by the distance it moved relative to the viewport (distance fraction). The final CLS score is the sum of all layout shifts grouped into 5-second time windows.

Cause 1: Images and videos without defined dimensions

The most common cause of CLS. When an image loads without the browser knowing its size in advance, the browser does not reserve space for it and surrounding content shifts when the image appears.

<!-- Incorrect: browser does not know the size until the image loads -->
<img src="/photo.jpg" alt="Description">

<!-- Correct: always define width and height -->
<img src="/photo.jpg" alt="Description" width="800" height="600">

<!-- For responsive CSS, preserve the aspect-ratio with the padding technique -->
<style>
  .image-container {
    aspect-ratio: 4 / 3; /* Reserves the correct space */
    width: 100%;
  }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

Cause 2: Ads, embeds, and iframes without reserved space

Ads are the number one cause of CLS on sites with advertising. When an ad loads after the content and pushes text down, it produces a huge shift. The same applies to social media embeds, YouTube videos, and other iframes.

• •Always reserve a minimum space for ad slots before they load — use min-height on the ad container.
• •Avoid inserting ads above content that is already visible on screen.
• •For YouTube embeds, use the placeholder technique with the video thumbnail — load the actual iframe only when the user clicks.
• •Define width and height on all iframes, or use aspect-ratio so the browser reserves the space.

Cause 3: Web fonts with FOUT (Flash of Unstyled Text)

When the browser first displays text with the system font and then replaces it with the web font, if both fonts have different metrics (line height, spacing), the text reflow occupies different space and produces a layout shift.

• •Use font-display: optional for decorative fonts — the browser only applies the web font if it is already cached, avoiding FOUT.
• •Adjust the fallback font metrics with size-adjust, ascent-override, and descent-override properties to match the web font.
• •Preload critical fonts so they are available before the first render.

/* size-adjust technique to approximate fallback font to web font */
@font-face {
  font-family: 'MyFontFallback';
  src: local('Arial');
  size-adjust: 105%;         /* Adjusts size to occupy the same space */
  ascent-override: 90%;      /* Adjusts character height */
  descent-override: 20%;     /* Adjusts space below baseline */
}

Cause 4: Dynamically injected content

Cookie banners, welcome pop-ups, notification bars, and any content injected into the DOM after the initial render can produce CLS if inserted above or between existing content.

• •Cookie banners should be overlays that appear above content (position: fixed or position: sticky), not elements that push content down.
• •If you need to insert dynamic content, do so at the end of the DOM — outside the visible viewport — rather than at the top.
• •For entrance animations, use transform and opacity — they do not change the layout. Avoid animating height, width, margin, or padding.

Cause 5: CSS animations affecting layout

CSS animations that modify layout-affecting properties (height, width, margin, padding, top, left) cause browser reflows and can produce shifts. Animations using transform and opacity are much more efficient and do not produce CLS.

/* Incorrect: animates layout-affecting properties */
@keyframes slide-in-bad {
  from { margin-top: -100px; }
  to { margin-top: 0; }
}

/* Correct: uses transform which does not affect the layout of other elements */
@keyframes slide-in-good {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

How to identify what is causing your CLS

iRankly's Core Web Vitals Monitor shows you the current CLS for each URL along with specific recommendations. For a more detailed analysis, open Chrome DevTools → Performance → record while the page loads and look for the red "Layout Shift" blocks in the timeline. Click each one to see which element caused the shift.