CLS Score: How Google’s Cumulative Layout Shift Metric Works

Shoppers expect pages to load fast and feel smooth. When they don’t, it can be frustrating for customers you want to convert. Ecommerce websites often feature pop-ups promoting flash sales, high-resolution product photography, and user-generated content, from TikTok videos or Instagram feeds. All of these can cause unexpected layout shifts that impact the shopping experience and hurt how your site performs in search results. 

These unexpected layout shifts are annoying and impact the shopping experience. But they also hurt how your site performs in search results. Google tracks this visual instability with a CLS score, which stands for cumulative layout shift.

Read on to understand how to measure CLS, what a good score looks like, and how to improve yours to prevent costly misclicks and protect your search rankings.

What is a CLS score?

A CLS score is a number that measures how much visible content on your web pages moves around unexpectedly while the page is loading. Cumulative layout shift, or CLS, is one of Google’s core web vitals, meaning it directly factors into how Google evaluates and indexes your site. Because Google uses the cumulative layout shift score as a ranking signal, a poor score can push your online store lower in search results. This makes the metric worth paying attention to if you depend on organic traffic to drive brand awareness and sales.

What is a good CLS score?

When it comes to CLS scores, you want to go lower instead of higher. According to Google’s documentation on CLS, a good CLS score is anything below 0.1. Scores between 0.1 and 0.25 fall into a “needs improvement” range, and anything above 0.25 is considered poor. 

Your score can vary between different pages on your store. A lightweight About page might score a perfect zero, while a product listing page packed with images and dynamic content could score higher. 

In the same resource, Google notes that the score to pay attention to is your 75th percentile, meaning the score that three out of four visitors experience or better. If that number is 0.1 or lower on both mobile and desktop, your site is in good shape.

How do you measure CLS?

You can measure CLS in two ways: in the lab or in the field. Lab testing simulates a page load in a controlled environment to give you a quick snapshot of your score. Field testing pulls real user data from actual visitors browsing your site across different devices and network speeds. Both are useful, and each of the tools below leans on one or the other (or both).

The score itself is calculated by multiplying two values for each individual layout shift: 

• The impact fraction (how much of the viewport was affected) 

• The distance fraction (how far the element moved)

Those individual layout shift scores are then grouped together to produce your final CLS number.

Tools to measure CLS and identify CLS issues

These tools can help you track down what is causing layout shifts on your online store:

• Chrome DevTools Performance Panel (lab). Open DevTools in Chrome, record a page load, and look at the Experience row in the timeline. Each layout shift entry shows up as a red or orange block, and clicking on it shows which element moved and by how much.

• Lighthouse (lab). Built into Chrome and available as a standalone tool, Lighthouse runs a full audit of your page and reports CLS alongside other performance metrics. It also offers specific suggestions on what to fix.

• Google Search Console (field). The Core Web Vitals report in Search Console uses field data to show you which pages on your site have poor CLS. This finds issues that only show up during real user interaction rather than lab testing.

• Google PageSpeed Insights (lab and field). Enter any URL from your store, and you’ll get a full core web vitals assessment. It breaks down your cumulative layout shift score (for both mobile and desktop) and flags the specific elements causing problems.

Common causes of poor CLS scores

Understanding what is behind poor scores will help you figure out what you can fix on your own and what might need a dedicated website developer. That may be someone in-house on your team or a freelancer you bring in for the job. 

Many CLS problems come from a handful of recurring issues: 

• Images and videos without dimensions. When you don’t specify width and height attributes on product images or hero banners, the browser doesn’t know how much space to reserve. Once the image loads, it pushes everything else around.

• Late-loading ads. While less common in ecommerce, if your store runs display ads, each ad slot is a potential source of layout shift. According to Google’s developer documentation, ads are rendered asynchronously, meaning the creative loads after the rest of the page. If insufficient space is reserved for them, they push surrounding content out of the way.

• Dynamic content injected above the fold. Things like email sign-up pop-ups, cookie consent bars, or promotional banners that inject themselves above existing content during or after page load will cause the rest of the page to jump down.

• Web fonts that load late. When custom web fonts load after the initial page load, the text can reflow as the browser swaps from a fallback font to the custom one. This is sometimes called a flash of invisible text, and it creates a noticeable shift in your page layout.

• Third-party scripts. On an ecommerce site, product review app widgets, live chat tools, and analytics tags can inject new elements into your layout and trigger individual layout shifts. 

How to improve your CLS score

1. Set explicit dimensions on all media
2. Reserve space for banners, embeds, and third-party widgets
3. Preload your web fonts
4. Control how dynamic content enters the page

Your CLS score is not a fixed number. It can change every time you update your site, add a new app, or rearrange your storefront. That’s a good thing—it means you can actively improve it. Here are four practical ways to get there: 

1. Set explicit dimensions on all media

Every image, video embed, and iframe on your store should have width and height attributes set in the HTML. This tells the browser exactly how much space to reserve before the content finishes loading, which prevents the page from reflowing as assets arrive. 

For responsive designs, use CSS aspect ratio boxes so that the reserved space scales properly across screen sizes. On ecommerce platforms like Shopify, most themes handle this for product images by default. Shopify also automatically compresses and converts images to modern formats like WebP and AVIF to keep load times fast. 

Steve Bauer, VP of ecommerce and digital at the home furnishings retailer Arhaus, says engagement metrics like pages per session and time on site improved once Shopify optimized the Arhaus site in this way. 

“That’s not just because of user experience, but also things like site speed and the way images were displaying on the site,” he says in a Shopify case study. “That was a huge win for us.”

If you have customized templates or have added sections manually, double-check that every media element includes dimensions. Going through your homepage, collection pages, and product pages one by one will help you find missing attributes.

2. Reserve space for banners, embeds, and third-party widgets

Any element that loads asynchronously needs a container with pre-set dimensions. For ecommerce stores, this applies to promotional banners advertising sales, embedded social feeds showcasing user-generated content, email capture pop-ups, and review or loyalty widgets. 

Google’s guidance on preventing layout shift from dynamically injected content is clear. The only guaranteed way to prevent shifts from these elements is to reserve sufficient space for them using CSS before they load. Here’s how to do that for a few key page elements:

Promotional banners

Build these into the initial page layout rather than injecting them with JavaScript after load. Google’s CLS optimization guide advises against inserting dynamic content above existing content unless it is in direct response to a user action. Otherwise, content injected near the top of the viewport displaces the most elements below it.

Embedded social media content

For Instagram feeds or TikTok videos on product pages, wrap them in a fixed-size container. Google’s guidance on embeds and iframes explains how elements without specified dimensions cause surrounding content to shift when they finally render.

Cookie consent bars

Position cookie consent bars as a fixed overlay at the bottom of the screen. According to Google’s best practices for cookie notices, displaying cookie banners as sticky footer overlays avoids content shifts because the banner sits on top of the page rather than inside the layout flow.

3. Preload your web fonts

Custom fonts give your store its personality, but they can hurt your CLS if they load late. According to Google’s guide on font best practices, font swapping is one of the direct causes of CLS because web fonts and their fallbacks rarely take up the same amount of space on the page. When a browser renders text in a fallback system font and then swaps to your custom font after it arrives, the size difference between the two can cause text blocks to shift around. 

The fix is to preload your font files so the browser fetches them early in the page load process. Add a <link rel=“preload”> tag for each font file in your page’s <head> section. 

You should also use the CSS font-display: optional or font-display: swap property so the browser has clear instructions on how to handle the transition between fallback and custom fonts. Google specifically notes that combining preload with “font-display: optional” is an effective way to minimize layout shift from custom fonts.

4. Control how dynamic content enters the page

Dynamic content is anything that gets added to the page after the initial page load. On an ecommerce store, this includes recently viewed product carousels or “back in stock” alerts. According to Google, dynamically injected content closer to the top of the viewport causes greater layout shifts than content injected lower on the page. The key rule is to never insert new content above existing content unless it happens in direct response to a user interaction like a click or tap.

Here are some other tips worth considering: 

• Notifications at the bottom. Place notification banners at the bottom of the viewport as fixed overlays instead of pushing them to the top of the page. Google notes that this approach avoids displacing existing content entirely because the banner sits outside the normal layout flow.

• Placeholders for alerts. For “back in stock” or “limited quantity” alerts on product pages, reserve a placeholder area in the layout ahead of time so the alert fills a slot rather than creating one. Google warns that collapsing or removing reserved space causes just as much layout shift as inserting new content, so placeholders should always remain in place even when empty.

• Minimum height requirements. If you lazy load product recommendation carousels below the fold, set a minimum height on the container so the page doesn’t jump when the carousel appears. One resource on fixing CLS recommends using skeleton screens or appropriately sized containers as stand-ins until the real content loads.