CLS (Cumulative Layout Shift): What It Is and How to Avoid It

CLS (Cumulative Layout Shift) measures the total sum of all unexpected visual movement that occurs on a page while it loads. In plain terms: it quantifies how much elements "jump around" before the page settles into its final layout.

A good CLS score is 0.1 or lower. Scores above 0.25 are considered poor by Google and can hurt your search rankings.

Why CLS Matters (and What Causes It)

Picture this: you're reading an article on your phone, you reach for a link, and at that exact moment an image finishes loading, pushing everything down. You just tapped the wrong button. That's a layout shift — and it happens millions of times a day on sites with a high CLS.

The most common causes are:

• Images without width and height attributes: the browser doesn't reserve space until the image downloads.
• Ads, embeds and iframes without fixed dimensions: they appear from nowhere and push surrounding content around.
• Web fonts (FOUT/FOIT): when the downloaded font has different metrics than the fallback, text shifts in size.
• Dynamically injected content: banners, popups or widgets inserted on top of already-visible content.
• CSS animations using layout-triggering properties: using top, left, or margin instead of transform.

How CLS Is Calculated

Each individual layout shift is the product of two factors:

• Impact fraction: what percentage of the viewport was affected.
• Distance fraction: how far the furthest-moved element traveled, as a fraction of the viewport.

The total CLS is the sum of all individual shift scores throughout the page's lifespan (using 5-second session windows to group consecutive shifts).

This is why a single large ad appearing at the top of the page can immediately push your CLS above 0.5.

How to Measure Your Current CLS

Measure before you fix. These tools give you accurate data:

The Core Web Vitals report in Search Console is the most important because it uses real Chrome user data (CrUX). If you're showing red there, Google is already factoring it against your rankings.

Concrete Techniques to Reduce CLS

1. Always declare dimensions on images and videos

Add width and height to every <img> tag. Modern browsers automatically calculate the aspect ratio and reserve the needed space before downloading the image:

<img src="photo.jpg" width="800" height="450" alt="Descriptive alt text here">

For responsive images, combine this with max-width: 100% in CSS. The browser will calculate the proportional space even before the image arrives.

2. Reserve space for ads and iframes

If you use advertising or third-party embeds, define a container with fixed minimum dimensions via CSS:

.ad-slot {
  min-height: 250px;
  width: 300px;
}

Even if the ad takes time to load, the space is already reserved and nothing on the page will shift.

3. Control web fonts with font-display

Use font-display: optional or font-display: swap together with font metrics overrides to minimize visual impact when swapping from fallback to the downloaded font:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

optional is the most aggressive option: if the font isn't cached, the browser simply uses the system font and skips the swap entirely, eliminating the shift completely.

4. Avoid inserting content above existing content

Cookie banners, newsletter popups and notification bars that appear at the top push all content downward. Place them in fixed positions (position: fixed or position: sticky) that don't affect document flow, or display them before the user can interact with the page.

5. Animate with transform, never with layout properties

When you need to animate elements, use transform and opacity. These properties are handled by the GPU and don't trigger reflows:

/* Bad — triggers layout shift */
.alert { transition: top 0.3s; }

/* Good — compositing only */
.alert { transition: transform 0.3s; }

CLS in WordPress: Quick Wins

If your site runs on WordPress, performance plugins handle much of the heavy lifting:

• WP Rocket: includes options to preload fonts and optimize images with automatic dimension detection.
• Imagify / ShortPixel: convert images to WebP and can automatically add size attributes.
• Autoptimize: lets you control font loading and defer scripts that might cause layout shifts.

For a broader look at all performance metrics, browse the full web performance optimization section.

Need expert help bringing your CLS and Core Web Vitals into the green? The team at elenlace.com audits and optimizes websites to meet Google's standards and convert more visitors into customers.

Key Takeaways

• CLS measures visual instability during page load; the "good" threshold is ≤ 0.1.
• Images without dimensions and ads without reserved containers are the top culprits.
• Adding width and height to every <img> is the highest-impact, lowest-effort fix.
• Reserve space for third-party content (ads, embeds) before it loads.
• Use font-display: optional to eliminate layout shifts caused by web fonts.
• Animate only with transform/opacity, never with properties that affect flow.

FAQ

Does CLS directly affect my Google rankings?

Yes. Since May 2021, CLS has been part of the Page Experience signals Google uses as a ranking factor. A poor CLS (above 0.25) can cause you to lose positions to competitors with more visually stable sites.

How long does it take for CLS improvements to show up in Search Console?

Google updates the Core Web Vitals report in Search Console approximately every 28 days, using real user data accumulated over that period. You'll see improvements reflected within 4 to 6 weeks of implementing changes.

Is CLS measured the same on mobile and desktop?

The formula is the same, but scores often differ because viewports are different sizes and elements reflow differently. Mobile CLS is commonly higher; check both reports in Search Console independently.

Can I have a high CLS even if all my images have dimensions?

Yes. Images are the most common cause, but not the only one. Web fonts with metrics different from their fallback, ads without containers, scripts injecting dynamic content, and poorly implemented animations all generate significant layout shifts.

Prefer it done for you? El Enlace handles hosting and professional web development.

Useful resources

Other providers and guides worth comparing:

• GoDaddy
• HostGator México
• Hostinger