What is Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a measure of how much your webpage's content unexpectedly moves around as it loads. Imagine you're about to tap a button, but just as your finger touches the screen, an ad loads above it, pushing the button down and causing you to tap the ad instead. That frustrating experience is a layout shift. CLS scores these shifts to quantify the visual stability of your site.

A low CLS score is good; it means your page is stable and predictable. A high score is bad, indicating a jarring user experience that can lead to lower engagement, fewer conversions, and can even negatively impact your Google search ranking.

What is Cumulative Layout Shift (CLS)?#

Think of reading an article online. You're halfway through a sentence when a large image suddenly loads above it, pushing the text you were reading down the page. You lose your place and have to find it again. This unexpected movement is what CLS measures.

It's one of Google's three Core Web Vitals, which are key signals Google uses to evaluate the overall user experience of a page. The goal is to reward sites that provide a smooth and enjoyable experience for visitors.

The CLS score is calculated based on two things:

1. How much of the screen was affected by the shift.
2. How far the elements moved on the screen.

Common Causes of CLS and How to Fix Them#

Most layout shifts are caused by elements loading at different speeds and the browser not knowing how much space to save for them. Here are the most common culprits and what to tell your development team to do about them.

1. Images Without Dimensions#

• The Problem: When you don't specify the size of an image in the code, the browser doesn't know how much space to save for it. It starts by rendering the text, and when the image finally downloads, it suddenly appears and pushes all the surrounding content down.
• The Fix: Always include width and height attributes for all images and videos. This is like telling the browser to rope off a specific amount of space for the image before it even loads. The content won't jump because the placeholder space is already there.

2. Ads, Embeds, and Iframes Without Reserved Space#

• The Problem: Third-party ads, embedded YouTube videos, or Google Maps widgets can be a major source of CLS. They often resize themselves to fit different ad formats or content, causing the page layout to suddenly change.
• The Fix: Reserve a fixed-size slot for these elements. You can do this by wrapping them in a container that has a specific height and width. This way, even if the ad is slow to load or changes size, the space it occupies on the page remains consistent, preventing content from shifting around it.

3. Dynamically Injected Content#

• The Problem: This happens when content is added to the top of a page after the initial page has loaded. A common example is a "Sign up for our newsletter!" banner or a "We use cookies" notification that appears at the top of the screen, pushing everything else down.
• The Fix: Avoid inserting new content above existing content. If you need to add a banner, consider using an overlay or a pop-up that doesn't disrupt the flow of the main page content. Alternatively, reserve space for these banners from the start so their appearance doesn't cause a shift.

4. Web Fonts Causing Content to Flash (FOIT/FOUT) #

• The Problem: Sometimes, a custom font takes a moment to load. While it's loading, the browser might either show invisible text (Flash of Invisible Text - FOIT) or show a default system font (Flash of Unstyled Text - FOUT). When your custom font finally loads, the text size and spacing can change, causing a noticeable shift in the layout.
• The Fix: Ask your developers to preload key web fonts. This tells the browser to prioritise loading the font file early on. Using modern CSS properties like font-display: optional can also help the browser manage font loading in a way that minimises jarring shifts.

Why CLS Matters#

Fixing Cumulative Layout Shift is about more than just improving a score in a performance tool. It's about respecting your user's experience. A visually stable website feels more professional, is less frustrating to use, and builds trust. By minimising layout shifts, you create a smoother journey for your visitors, which often leads to them staying longer, interacting more, and ultimately converting.