CLS stands for Cumulative Layout Shift. It is a Google Core Web Vitals metric that measures how much the visible content on a page unexpectedly moves during loading. A high CLS score means your page content is shifting around as it loads, which Google penalises as a poor user experience.

What is a good CLS score?

A CLS score under 0.1 is considered good by Google. Scores between 0.1 and 0.25 need improvement, and scores above 0.25 are poor. Google uses CLS as a Core Web Vitals ranking signal, so a poor score can lower your page's position in search results.

What causes a high CLS score?

The most common causes of a high CLS score are images without width and height attributes, ads or embeds that load after the page content and push everything down, web fonts that swap during loading causing text to reflow, and dynamically injected banners or cookie notices that appear after the initial page load.

How do I fix CLS caused by images?

Add explicit width and height attributes to every img tag in your HTML. This tells the browser exactly how much space to reserve for the image before it has finished downloading, preventing the layout from shifting when the image appears.

How do I check my CLS score?

You can check your CLS score using Google PageSpeed Insights at pagespeed.web.dev — enter your page URL and the CLS score appears in the Core Web Vitals section. You can also use the AIPageSEO audit tool at aipageseo.com/seo-audit-platform.html which flags CLS issues and identifies the specific elements causing the shift.

⭐ Beginner — No coding experience needed

High CLS? How to Fix Cumulative Layout Shift — Beginner's Guide

CLS stands for Cumulative Layout Shift. It measures how much the content on your page unexpectedly moves around while it is loading. You have experienced this — you are about to click a button and suddenly an image loads above it, pushing everything down, and you click the wrong thing. Google measures this and penalises pages that do it. This guide explains exactly what CLS is, how to check your score, and how to fix the most common causes.

⏱ About 20 minutes 🛠 Notepad++ & FileZilla required 📄 You will edit one HTML file 🟢 Suitable for complete beginners

What you will learn in this guide

What CLS is and why Google penalises pages with layout shift
What counts as a good CLS score and what is too high
How to measure your current CLS score using free tools
How to fix CLS caused by images without width and height attributes
How to fix CLS caused by ads, embeds or iframes loading late
How to fix CLS caused by web fonts swapping during load
How to verify your CLS score has improved after making changes

🛠️ Before You Start — Tools You Need New to editing website files? You need Notepad++ and FileZilla set up before following this tutorial. Open Setup Guide →

1 What is CLS?

CLS stands for Cumulative Layout Shift. Before we go any further, let us make sure this means something to you — because you have definitely experienced it even if you have never heard the term.

Have you ever done this?

You load a webpage. You see a button you want to click. You move your finger or mouse to click it. Then — just as you are about to click — an image loads above the button, or an advert appears, and everything shifts down. You end up clicking the wrong thing. You are now on a page you did not want to be on, or you have accidentally submitted something, or you have clicked an advert you did not mean to click.

That is layout shift. That is exactly what CLS measures. And Google hates it — because visitors hate it.

What does Cumulative mean?

Cumulative means the total of all layout shifts combined. Every time something shifts during page load, Google adds that shift to a running total. The final total is your CLS score. The more things shift, and the bigger those shifts are, the higher your CLS score.

What counts as a good CLS score?

CLS score	Rating	What it means
Under 0.1	🟢 Good	Passes Google's Core Web Vitals assessment
0.1 to 0.25	🟡 Needs improvement	Below Google's threshold — affects rankings
Over 0.25	🔴 Poor	Significant layout instability — ranking impact likely

What causes layout shift?

Cause	What happens	Section that fixes it
Images without width and height attributes	Browser does not know how much space to reserve — image appears and pushes everything down	Section 4
Ads, embeds or iframes loading late	Ad slot appears after page has loaded, shoving content down	Section 5
Web fonts swapping	Page loads with system font, then swaps to web font — text reflows and shifts layout	Section 6
Dynamically injected banners or cookie notices	Cookie banner or announcement bar appears after load and pushes everything down	Section 7
Animation or transitions affecting layout	CSS animations that change element size or position cause shift	Section 8

2 Measure your current CLS score

Before you fix anything, get your actual CLS score and find out which elements are causing the shift.

Tool 1 — Google PageSpeed Insights

1 Go to Google PageSpeed Insights Open a new tab and go to https://pagespeed.web.dev.
2 Enter your page address and click Analyse Type the full address of your page and click Analyse. Wait about 30 seconds.
3 Find your CLS score At the top you will see the Core Web Vitals scores. CLS is one of them — shown as a number like 0.05 or 0.42. Write it down. Anything over 0.1 needs fixing.
4 Find which elements are shifting Scroll down to the Diagnostics section and look for Avoid large layout shifts. This lists the specific elements on your page that are causing layout shift. Write down each one — these are what you need to fix.

Tool 2 — AIPageSEO audit

1 Run the AIPageSEO audit Go to https://aipageseo.com/seo-audit-platform.html, enter your page address and run the audit. The Performance section will show your CLS score and flag any layout shift issues found.

💡 Check both mobile and desktop. Google PageSpeed Insights shows separate scores for mobile and desktop. Google primarily uses the mobile score for ranking purposes. Your CLS score on mobile may be worse than on desktop because mobile pages load differently and adverts are often repositioned for smaller screens.

3 Identify exactly what is shifting on your page

You need to see the layout shift happening with your own eyes. This section shows you how to watch it happen in slow motion so you can identify the culprit.

1 Open your page in Google Chrome Go to your page in Chrome. Right-click anywhere on the page and choose Inspect. A panel will open on the right side or bottom of the screen — this is Chrome DevTools.
2 Click the Performance tab At the top of the DevTools panel you will see a row of tabs — Elements, Console, Sources, Network, Performance and so on. Click Performance.
3 Click the record button and reload the page Click the circular record button (it looks like a filled circle) in the top left of the Performance panel. Then immediately press Ctrl + R to reload the page. The panel will record everything that happens during the page load.
4 Stop recording and look for red triangles After the page finishes loading, click the Stop button. A timeline of the page load appears. Look for red triangles — these mark layout shift events. Click on a red triangle to see which element caused the shift. The element name will be shown in the Summary panel below.
5 Match the element to the fixes below Once you know which element is causing the shift, find it in the table in Section 1 and go to the corresponding fix section.

4 Fix — Add width and height to every image

This is the most common cause of CLS and the easiest fix. When an image tag in your HTML does not have a width and height specified, the browser does not know how much space to reserve for it. So it loads the page without any space for the image, then when the image arrives it inserts it — pushing everything below it down the page.

What the fix looks like

❌ Causes layout shift

<img src="/images/hero.webp" alt="Hero image">

Browser has no idea how tall this image is. It reserves zero space. When the image loads, everything shifts.

✅ No layout shift

<img src="/images/hero.webp" alt="Hero image" width="1200" height="630">

Browser knows exactly how much space to reserve before the image loads. Nothing shifts.

How to find your image dimensions

1 Find the image file on your computer or server If you have the image on your computer, right-click it and choose Properties (Windows) or Get Info (Mac). The dimensions are listed as width × height in pixels — for example 1200 × 630.
2 Or find dimensions in Chrome DevTools On your webpage, right-click the image and choose Inspect. In the DevTools panel hover over the image tag in the HTML — a tooltip will appear showing the image's actual dimensions.

How to add dimensions to your images in Notepad++

3 Open FileZilla and connect to your server Fill in Host, Username and Password, leave Port blank, click Quickconnect.
4 Download your page file Navigate to httpdocs or public_html. Right-click your page file and download a backup copy. Then download a working copy to your Desktop.
5 Open in Notepad++ Open Notepad++ → File → Open → navigate to Desktop → click the file → click Open.
6 Find all image tags Press Ctrl + F and search for <img. Press Enter to jump through each image tag one by one. For each one, check whether it has width= and height= attributes. If either is missing, add it.
7 Add width and height to each image that is missing them Click just before the closing > of the image tag and add the width and height attributes. Use the pixel dimensions you found in steps 1 or 2. For example:
<img src="/images/about-team.jpg" alt="Our team" width="800" height="450">
8 Save the file Press Ctrl + S. The red dot disappears when saved.

5 Fix — Reserve space for ads, iframes and embeds

Adverts, Google Maps embeds, YouTube videos and other iframes often load after the main page content. When they appear, they push everything below them down — causing layout shift.

The fix — reserve space before the content loads

You tell the browser in advance how big the ad or embed will be by giving its container a minimum height. The browser reserves that space immediately, so when the content loads nothing needs to shift.

1 Find the container holding your ad or embed In your HTML file in Notepad++, press Ctrl + F and search for iframe or the name of your ad script. Look at the <div> that wraps around it — this is the container you need to give a minimum height.
2 Add a min-height to the container Add a style attribute to the container div with a minimum height matching the expected size of the ad or embed. For a standard banner ad:
 <div class="ad-container">  </div>  <div class="ad-container" style="min-height:90px">  </div>

Common ad sizes: leaderboard 728×90px, rectangle 300×250px, half page 300×600px. Use the size that matches your ad unit.
3 For iframes, add width and height directly For iframes like Google Maps or YouTube embeds, add explicit width and height attributes directly on the iframe tag rather than using min-height on a wrapper:
<iframe src="https://www.google.com/maps/embed?..." width="100%" height="350" style="border:0;" loading="lazy"> </iframe>
4 Save and upload Press Ctrl + S to save. Upload the file back to your server using FileZilla.

6 Fix — Stop web fonts causing layout shift

When a page uses a web font — a font loaded from Google Fonts or another service — the browser initially renders text using a system font (like Arial or Times New Roman). When the web font finishes downloading, the browser swaps to it. This swap changes the size and spacing of the text, which shifts everything below it down the page.

Fix 1 — Add font-display: swap to your font CSS

If you are loading fonts using a @font-face rule in your own CSS file, add font-display: swap; to each font declaration. This tells the browser to use the fallback font immediately and swap to the web font when it is ready, without triggering a layout shift.

@font-face {
  font-family: 'YourFont';
  src: url('/fonts/yourfont.woff2') format('woff2');
  font-display: swap;
}

Fix 2 — Add display=swap to your Google Fonts URL

If you are loading fonts from Google Fonts, check your font URL. It should already contain display=swap. If it does not, add it:

❌ Without swap — causes layout shift

https://fonts.googleapis.com/css2?family=Lato

✅ With swap — no layout shift

https://fonts.googleapis.com/css2?family=Lato&display=swap

1 Open your HTML file in Notepad++ and find the Google Fonts link Press Ctrl + F and search for fonts.googleapis. Find the link tag that loads your Google Fonts.
2 Add display=swap to the URL if it is missing Click at the end of the URL inside the href="..." attribute — just before the closing quote mark. If the URL already ends with other parameters, add &display=swap. If the URL has no parameters yet, add ?display=swap.
3 Save and upload Press Ctrl + S to save. Upload the file back to your server using FileZilla.

7 Fix — Cookie notices and dynamically injected content

Cookie consent banners, announcement bars and chat widgets that appear after the page has loaded are a very common source of layout shift. When they pop in at the top or bottom of the page, they push existing content up or down.

The right way to handle cookie banners

Cookie banners should be fixed-positioned so they float over the content rather than pushing it. This means they appear on top of the page without affecting the layout of anything underneath them.

1 Find the cookie banner code in your HTML In Notepad++, press Ctrl + F and search for cookie or consent. Find the div that contains your cookie banner.
2 Make it position fixed Add or update the CSS style of your cookie banner to use position: fixed. Fixed positioning removes the element from the document flow — it floats over the page and does not affect the layout of anything else:
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; }
3 For chat widgets and other third-party scripts Chat widgets like Intercom, Drift or Tidio are usually already fixed-positioned by the provider. If yours is causing layout shift, contact the widget provider's support and ask them to confirm their widget is set to fixed positioning. Most modern chat widgets do not cause CLS.

8 Fix — CSS animations causing layout shift

Some CSS animations move elements in ways that affect the layout of other elements — causing layout shift. The fix is to use transform-based animations instead, which do not affect layout.

Animations that cause CLS

Animations that change these CSS properties affect layout and cause CLS:

width or height
top, left, right or bottom (when not position: fixed or absolute)
margin or padding

Animations that do NOT cause CLS

These CSS properties are handled by the GPU and do not affect layout:

transform: translateX() or translateY() — use instead of changing left/top
transform: scale() — use instead of changing width/height
opacity — fading in and out causes no layout shift

❌ Causes CLS

@keyframes slideIn {
  from { left: -100px; }
  to { left: 0; }
}

✅ No CLS

@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

9 Upload your fixed files and verify your CLS score

1 Upload all updated files via FileZilla Right-click each updated file in the left panel of FileZilla and choose Upload. Click Overwrite when prompted. Do this for every file you changed.
2 Re-run Google PageSpeed Insights Go to https://pagespeed.web.dev and test your page again. Your CLS score should now be lower. Aim for under 0.1.
3 Re-run the AIPageSEO audit Go to https://aipageseo.com/seo-audit-platform.html and run the audit again. The CLS result should now show green.
4 If CLS is still high, work through each fix section CLS can have more than one cause on the same page. If your score is still above 0.1 after fixing images, work through Sections 5, 6, 7 and 8 in order. Use Chrome DevTools from Section 3 to identify which element is still shifting after each fix.

✅ Tutorial complete — your CLS has been measured, diagnosed and improved.

10 Common mistakes to avoid

⚠ Adding wrong dimensions to an image If you add a width and height that do not match the actual image dimensions, the browser will distort the image — stretching or squashing it. Always check the actual pixel dimensions of the image before adding them to the HTML tag.
⚠ Fixing images but forgetting iframes Images without dimensions are the most common cause of CLS but iframes — Google Maps embeds, YouTube videos, social embeds — also need explicit dimensions. Check every iframe on your page, not just img tags.
⚠ Thinking CLS only matters on the first load Google measures CLS during the entire page session — not just the initial load. If content shifts when a user scrolls down, clicks something, or when a delayed element loads 5 seconds into the session, that shift still counts toward the CLS score.
⚠ Only testing once after making changes PageSpeed Insights results can vary slightly between tests. Run the test three times after making your fixes and use the middle result to judge whether the improvement is real.

Written by

John

Founder, AIPageSEO

CLS is the Core Web Vital nobody talks about — but it is the one that makes visitors angriest. When page content jumps around as it loads, people click the wrong thing and lose their place. I wrote this guide because fixing layout shift is almost always caused by just one or two simple things that are easy to put right once you know where to look.

🔗 AIPageSEO.com 📰 Blog 🔍 Check your CLS score →