Cumulative Layout Shift: Keeping the Web Steady

Picture this: You’re on the bus to work, perhaps clutching a takeaway coffee, trying to read the morning news on your mobile. You see a headline that catches your eye. You go to tap the link. But just as your thumb descends, a massive advert for car insurance loads at the top of the screen. The entire page jolts downwards.

Instead of reading the news, you’ve accidentally clicked the advert. Now you’re loading a page you didn’t want, wasting data, and feeling that familiar flash of mild annoyance.

In the world of web design, that annoyance has a name. It’s called Cumulative Layout Shift, or CLS.

It’s one of the most frustrating experiences on the internet. It’s why you sometimes buy the wrong item, click the wrong link, or lose your place in an article. For years, we just accepted this as “the internet being a bit rubbish.” But Google has decided that enough is enough.

This article is your guide to understanding CLS. We aren’t just going to look at the computer code; we’re going to look at the psychology, the history, and the practical ways to fix it. Whether you run a small bakery website in the Cotswolds or manage a massive e-commerce store in The Midlands, understanding visual stability is no longer optional. It’s essential.

Please note: The content below may contain affiliate links. If you make a purchase through these links, we could earn a commission, at no additional cost to you.

Part 1: What Exactly is CLS?

The “Core Web Vitals” Family

To understand CLS, we have to look at the bigger picture. A few years ago, Google introduced a set of metrics called Core Web Vitals. Think of these like a health check-up for your website, similar to an MOT for your car.

There are three main pillars in this check-up:

1. Loading: How fast does the main content appear? (LCP)
2. Interactivity: How quickly does the page react when you tap a button? (INP – formerly FID)
3. Visual Stability: Does the page jump around? (CLS)

CLS is the metric that measures visual stability. Ideally, when a website loads, it should be as solid as a printed newspaper. Things shouldn’t move unless you ask them to.

The Simple Definition

In plain English, CLS measures how much the elements on a page shift unexpectedly while the user is looking at them.

If a page loads and an image pops in late, pushing the text down, that’s a layout shift. If a banner expands and shoves the menu aside, that’s a layout shift. Google tracks every single time this happens, does a bit of maths, and gives you a score.

The Scoring System: The Traffic Lights

Google uses a simple traffic light system to tell you if your site is behaving itself:

• Good (Green): A score of 0.1 or less. This means the page is rock solid.
• Needs Improvement (Amber): A score between 0.1 and 0.25. It’s a bit wobbly, but usable.
• Poor (Red): A score above 0.25. The page is jumping around like a kangaroo.

Part 2: The History of the Wobbly Web

The Early Days: The Solid Web

Go back to the late 1990s or early 2000s. The web was ugly, but it was surprisingly stable. We built websites using “tables”—literal grids that held everything in place. It was rigid. It wasn’t responsive (it didn’t work on mobile phones because mobile phones didn’t have proper browsers yet), but it didn’t move.

The Mobile Revolution and the Chaos

Then came the smartphone. Suddenly, websites had to work on a massive desktop monitor and a tiny iPhone screen. We started using “responsive design.” Content had to flow like water to fit the container.

At the same time, the internet became a business. Websites needed to make money, so they added adverts. They needed to track users, so they added cookie banners. They wanted to keep you engaged, so they added “Related Articles” widgets.

All these things—ads, banners, widgets—are often loaded from third-party servers. Your browser (like Chrome or Safari) doesn’t always know how big an advert will be until it actually arrives. So, the browser draws the text, then the advert arrives, and the browser has to shove the text down to make room.

This era, roughly from 2010 to 2020, was the “Wild West” of layout shifts. It was chaotic. CLS was introduced to tame this chaos.

Part 3: The Science: How is the Score Calculated?

You don’t need a PhD in mathematics to understand this, but it helps to know what’s happening under the bonnet. Google calculates CLS using two numbers: the Impact Fraction and the Distance Fraction.

1. The Impact Fraction (How much space did it take?)

Imagine your phone screen. Now, imagine an element (like a text block) shifts down. The “Impact Fraction” measures the total area that was affected.

If an image loads and pushes text down, causing 50% of the visible screen to change, the Impact Fraction is 0.5.

2. The Distance Fraction (How far did it move?)

This measures the greatest distance any unstable element has moved, relative to the screen size.

If a button moves down by 20% of the screen height, the Distance Fraction is 0.2.

The Final Sum

To get the Layout Shift score for that specific event, Google multiplies them: Impact Fraction x Distance Fraction = Layout Shift Score

The Cumulative Layout Shift is simply the sum of all these scores that happen within a certain window of time (usually a 5-second burst) while you are on the page.

The “Session Window” Update: Originally, CLS added up every shift for the entire time you were on the page. This was unfair to “single page applications” (like Facebook or Twitter) where you might stay for hours. Google updated this. Now, they look at “session windows.” They basically take the worst 5-second burst of shifting and use that as your score.

Part 4: The Usual Suspects: What Causes CLS?

If your website has a poor CLS score, it is almost certainly due to one of three main culprits. In the web development world, we see these same issues time and time again.

Culprit 1: Images Without Dimensions

This is the most common offender.

The Scenario: You add a photo to your blog post. You upload it, paste the code, and hit publish. The Problem: The browser starts downloading the text (which is small and fast). It puts the text on the screen. Then, it starts downloading the image (which is big and slow). The browser doesn’t know how tall the image is yet. Suddenly, the image finishes downloading. The browser says, “Oh, I need 400 pixels of space here!” and shoves all the text down to make room. The Fix: You must tell the browser the width and height attributes in the HTML, or use CSS aspect ratio boxes. This allows the browser to “reserve” the empty space before the image arrives. It’s like putting a “Reserved” sign on a table at a restaurant. Even if the guest (the image) hasn’t arrived, no one else (the text) can sit there.

Culprit 2: Adverts, Embeds, and Iframes

This is the trickiest one, often seen on news websites.

The Scenario: You have a slot for an advert. The advert comes from an external network (like Google AdSense). The Problem: Sometimes the advert network sends a small banner. Sometimes it sends a massive square video. If the slot isn’t rigid, it will collapse or expand based on what arrives. The Fix: You must reserve the largest possible space for that ad slot. If the ad is smaller, you’ll have some white space. That’s okay. White space is better than a jumping page. Alternatively, use a “sticky” ad at the bottom of the screen that overlays the content rather than pushing it around.

Culprit 3: Web Fonts (FOIT and FOUT)

Fonts are surprisingly heavy files.

The Scenario: You want your website to use a fancy custom font to look brand-aligned. The Problem: The browser loads the text. It hasn’t downloaded your fancy font yet. It has two choices:

1. FOIT (Flash of Invisible Text): It shows nothing until the font loads. The text suddenly “pops” into existence.
2. FOUT (Flash of Unstyled Text): It shows a basic system font (like Arial), then swaps it for your fancy font when it’s ready. Since different fonts have different widths, the sentence length changes, and the paragraph wraps differently, causing the layout to jump. The Fix: Use a tool called preload to get the font downloading earlier. Even better, match your fallback font (the Arial one) to be the same width as your fancy font using new CSS tools. This means when the swap happens, the lines of text don’t move.

Part 5: Why Should British Businesses Care?

You might be thinking, “This sounds like a headache for the IT department. Why should the business owner care?”

1. The “Rage Click” Factor

In the UK, we are polite, but we have our limits. When a user tries to click “Checkout” but the page shifts and they click “Remove from Basket” instead, they get frustrated.

Data shows that poor CLS leads to shorter session durations and high bounce rates. If your site annoys people, they leave. If you are a retailer like John Lewis or Argos, a layout shift on the checkout page is literally pushing money away.

2. Google Rankings (SEO)

Google has explicitly stated that Core Web Vitals are a ranking factor. If you and a competitor have equally good content, but your site is a jumping mess and theirs is rock solid, Google is likely to rank them higher. In the competitive UK market, you cannot afford to hand an advantage to your rivals just because you didn’t define your image sizes.

3. Accessibility

For users with motor impairments or visual difficulties, layout shifts aren’t just annoying; they can make a website completely unusable. If someone is using a screen magnifier, a layout shift might move the content completely out of their view. An inclusive web is a stable web.

Part 6: How to Measure and Fix Your Score

You can’t fix what you don’t measure. Fortunately, there are free tools available to help you spot the ghosts in the machine.

Lab Data vs. Field Data

This is a crucial distinction.

• Lab Data: This is a simulation. You run a test on your laptop. It simulates a mobile phone on a 4G connection. This is useful for debugging, but it’s not real life.
• Field Data (Real User Monitoring): This is the gold standard. Google collects data from real Chrome users who visit your site. This tells you what actual people in Birmingham, Glasgow, or rural Wales are experiencing.

The Tool belt

1. Google PageSpeed Insights: The first stop. Enter your URL, and it gives you both Lab and Field data. It will explicitly tell you your CLS score.
2. Google Search Console: If you own the website, look at the “Core Web Vitals” report here. It groups your pages. It might say, “50 URLs are poor,” and show you exactly which group of pages is failing.
3. Chrome DevTools: For the techies. You can open the “Performance” tab in Chrome, hit record, and reload the page. It will highlight exactly which element moved and highlight it in red.
4. Web Vitals Extension: A handy browser extension for Chrome that shows you the score of any page you are currently browsing in real-time.

Practical Fixes for the Non-Coder

If you are using a platform like WordPress, Squarespace, or Shopify, you might not be writing code. Here is what you can do:

• Update your Theme: Modern themes are usually optimised for CLS. If you are using a theme from 2015, it’s time for an upgrade.
• Use Optimisation Plugins: Plugins like WP Rocket or Autoptimize can helping with font loading and image dimensions automatically.
• Be Careful with Dynamic Content: Avoid widgets that inject content at the top of the page (like “Free Shipping” banners) unless they are built into the main structure of the site.

Part 7: The Future of Web Stability

The internet is changing. We are moving towards more complex, app-like experiences.

Google is continuing to evolve these metrics. They recently introduced INP (Interaction to Next Paint) to replace FID, focusing on responsiveness. However, CLS remains the king of visual stability.

The expectation for quality has risen. Ten years ago, we tolerated a website that took 10 seconds to load and jumped around. Today, with 5G connections and powerful smartphones, we expect seamlessness.

For British businesses, the message is clear: Quality is no longer just about the product you sell or the article you write. It is about the vessel in which you deliver it. A stable vessel keeps the cargo safe and the passenger happy.

Summary Checklist

If you take nothing else away from this article, remember these three golden rules:

1. Always set dimensions on your images and videos.
2. Reserve space for adverts and dynamic content.
3. Preload your fonts or ensure the fallback font matches the size.

By focusing on these areas, you create a web that feels robust, professional, and respectful of the user’s time and attention. And in the end, that is what great web design is all about.

Further Reading & Resources

For those wishing to delve deeper into the technical specifications and industry standards, we recommend the following authoritative resources:

1. web.dev (Google Developers): Optimize Cumulative Layout Shift – The official technical documentation from the team at Google.
2. MDN Web Docs: Layout Instability API – A deep dive into the browser technology that powers CLS measurement.
3. Smashing Magazine: A Comprehensive Guide To Core Web Vitals – An excellent, developer-focused breakdown of all three metrics.
4. GOV.UK Design System: Performance Framework – How the UK government approaches web performance and accessibility.