Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. Tips
  4. How to fix Cumulative Layout Shift (CLS) on your WordPress site

How to fix Cumulative Layout Shift (CLS) on your WordPress site

Cumulative Layout Shift (CLS) is a metric used to measure how much the content of a webpage moves around (shifts) unexpectedly while the page is loading. A lower CLS score signifies a more stable page layout, meaning fewer shifts.

CLS is classified as an official Core Web Vitals metric. Only CLS, LCP, and INP are official metrics that you must pass or fail. Every other metric is a notable metric, something that might impact the other metrics.

Why is it important? Because CLS has a huge impact on the user experience. Not everything is just about speed, and Google takes this very seriously. Nothing is more annoying than trying to click or read something, and things start shifting around.

Shift due to CLS
Image source: (web.dev)

Below we’ll take a deep dive into better understanding CLS, measuring it, and how you can fix it.

What is good CLS?

According to Google, they want you to have a CLS score of 0.1 or less. They calculate it with this formula:

Impact fraction * distance fraction = CLS

  • Impact Fraction: The percentage of the viewport’s width or height that the shifted content occupies, indicating how much visual impact the shift has on the user.
  • Distance Fraction: Measures how far the content has moved relative to the viewport size, capturing the extent of the shift’s disruption to the user’s experience.

They use the 75th percentile to determine where you stand. 75% of the visits/crawls need to meet the “good” threshold for you to get that classification. Also, as of 2023, CLS makes up 25% of the overall total score in PageSpeed Insights. See the Lighthouse Scoring Calculator.

Good CLS
Good CLS

How to measure CLS

There are many different tools you can use to measure CLS. Here are a few of our favorites (in order of preference) that we use on a regular basis:

CLS score in PageSpeed Insights
CLS score in PageSpeed Insights


Google Search Console is also a great tool to notify you of all the URLs where you might be failing CLS. I always recommend setting up a profile. The sooner you have more data the better.

It’s also important to understand the difference between lab data and real-user data. Lab data is at the bottom of the report under the “Diagnose performance issues” section. This top section is real-user data. It’s collected over an average of 28 days as users hit your site and are recorded for Core Web Vitals. Or rather, they are the only metrics that really matter. But remember, it’s always delayed.

Also, pay attention to this tab to see if there is enough data for your individual URL. Otherwise, the origin (average) of your site is shown.

Real-user data CLS
Real-user data CLS

Common sources of CLS and debugging tips

The best way to troubleshoot CLS is to launch a staging/dev site and go back to the basics (disabling plugins, switching back to the default WordPress core theme, etc.). Most hosting providers have a staging or dev site feature these days; otherwise, we recommend InstaWP.

It’s also important to always run your speed tests multiple times. CLS is one of those things that can vary quite a bit. If you see consistent CLS over multiple tests, you can pretty much assume it needs fixing. And keep an eye on the real-user data in PageSpeed Insights.

These are the most common sources of CLS that we typically see:

  • Bad theme code (or setting misconfigured). Many popular page builders actually have CLS problems.
  • Dynamic JS in plugins that load things above the fold: sliders, galleries, reviews, etc.
  • Optimization plugins. Yes, optimization plugins are a very common source of CLS. If you want to rule out Perfmatters, for example, we have our query strings, so you can easily test with optimizations off, without having to disable the entire plugin. Example: https://domain.com/?perfmattersoff
  • Web fonts loading late
  • Not specifying dimensions on images
  • Google Ads
  • Animations

Optimization plugins aren’t meant to be a quick fix for all CLS issues. Usually, you need to fix the root of the issue. And sometimes this means reaching out to the developer of theme, page builder, plugin, etc.

Debugging “avoid large layout shifts” warning

If you’ve tried debugging CLS in PageSpeed Insights, then you’re probably familiar with their warning “avoid large layout shifts.” While they show you some of the worst elements where the CLS is happening, there’s rarely enough information to track down the exact source of the problem. Or rather, it’s just lacking a lot of information.

Avoid large layout shifts warning in PageSpeed Insights
Avoid large layout shifts warning in PageSpeed Insights

This is where we turn to DebugBear and WebPageTest. They provide excellent tools to help track down the CLS.

  1. They show you an image of the biggest shift.
  2. They show you thumbnails for each additional layout shift, starting with the worst ones.
  3. They have video recordings, and you can click frame by frame (similar to throttling locally in Chrome DevTools, but much easier).
Layout shift thumbnail
Layout shift thumbnail

Image dimensions (width and height)

One of the first things to check when debugging CLS is to ensure you are adding width and height to your all of your images. If you aren’t, you’ll see the following warning in PageSpeed Insights: “Image elements do not have explicit width and height.”

Image elements do not have explicit width and height warning
Image elements do not have explicit width and height warning

Many themes and page builders should add this, but we still see the warning all the time. We have a feature in our Perfmatters plugin to automatically add missing image dimensions

<img src="image.png" width="340" height="160" alt="my awesome alt" />

You can also use the CSS property aspect-ratio.

Add missing image dimensions using Perfmatters
Add missing image dimensions using Perfmatters

Lazy loading and dynamic JavaScript

At first glance, you might think lazy loading is a big factor in CLS. However, this isn’t actually the case. The reason is that lazy loaders, such as the one in our Perfmatters plugin, grab the image dimensions and put placeholders behind the scenes to reserve that space. This prevents a shift from happening.

Now it’s always good to ensure you aren’t lazy loading something by accident above the fold. But in general, image dimensions are much more important than lazy loading in terms of CLS.

However, dynamic content loading, which you might mistake for lazy loading, can lead to CLS. Consider a slider or review plugin positioned above the fold. If its images initially appear, then vanish momentarily before reappearing, this might not be lazy loading but rather the result of JavaScript dynamically re-rendering elements. The height of the document changes and you have to wait for JavaScript to load and calculate the size of the element. This process causes a visual shift. Sliders, review testimonial plugins, carousels, dynamic contact forms, etc., are all pretty common sources of CLS.

In many of these cases, you need to chat with the developer of that solution to fix the issue. However, another quick solution would be to move it below the fold. For example, perhaps you are OK with your testimonials showing slightly farther down the page.

Preload and swapping fonts

Fonts are a very common source of CLS. These days, many themes and plugins utilize a display option called “display swap” for performance reasons. This means they swap temporarily back to system fonts. The problem is this can sometimes cause a shift. 

CLS from fonts
CLS from fonts

Here are some ways to prevent/fix CLS from fonts:

  • Preload your fonts. You can do this in Perfmatters.
  • Host your fonts locally. The faster the load time, the better. If you’re using Google Fonts, you can host them locally in Perfmatters.
  • Use modern .woff2 files. Get rid of .woff and .ttf. We’ve also seen that variable fonts are still slower than using multiple .woff2 files.
  • Limit the number of variations/subsets used. If you’re uploading Google Fonts directly, we recommend grabbing them from google-webfonts-helper as they will be much smaller.
  • If you are less concerned with design, you can use system fonts and fix it immediately. We use system fonts on our website. However, there is always a tradeoff between design and performance.

Working with Google Ads

Another common issue we see is Google Ads. For example, if you simply use the “responsive ads” code from Google Adsense, this will shift right out of the box as it resizes for different devices.

The way to fix this is to reserve the space with placeholders, just like we do with image dimensions.

CLS from Google Ads
Image source: web.dev (CLS from Google Ads)

We typically recommend using plugins like Ad Inserter or Advanced Ads, as they already have systems in place to add predefined blocks. Some ad networks like Mediavine and Raptive also have their own features in place to prevent CLS from happening. You could also add your own placeholders with some CSS and say an Element in GeneratePress.

Layout shift example using DebugBear
Layout shift example using DebugBear

Avoid non-composited animations

The “Avoid non-composited animations” warning is basically saying that you’re using animations in a way that aren’t optimized for performance (or as smooth as they could be), and this results in layout shifts. The only way to really fix this is to reach out to the developer whose code is running the animation.

Avoid non-composited animations warning
Avoid non-composited animations warning

In a more technical explanation, here is the order in which things are rendered in a browser.

Rendering pipeline
Image source: Chrome (Rendering pipeline)

Each step uses the result of the previous operation. For example, if your code does something that triggers Layout, the Paint and Composite steps need to run again. A non-composited animation is any animation that triggers one of the earlier steps in the rendering pipeline (Style, Layout, or Paint). Non-composited animations perform worse because they force the browser to do more work.

Additional resources and case studies

Was this article helpful?

Related Articles