How to Fix Cumulative Layout Shift (CLS) on WordPress

Search engine optimization (SEO) is an ever-changing game without an instruction manual. There’s much more to optimization than just adding keywords into your content. Search engines like Google also take into account indicators of a quality, safe web experience — like how fast your site loads, how easy it is for visitors to interact with it, and more. 

Cumulative Layout Shift (CLS) is a metric used by Google to measure how much a web page rearranges as it loads. A site that moves significantly — causing users to click the wrong link or have trouble reading content — provides a bad user experience and is frowned upon by Google. 

Reviewing your site’s CLS score and other Core Web Vitals can help you identify ways to improve its overall health and, in turn, boost your rankings!

This article will explain the causes of CLS, why you should minimize it, and some methods to reduce it. 

What is cumulative layout shift?

Cumulative Layout Shift (CLS) measures the severity of movement on a web page as assets load. You’ve probably noticed that sometimes when you open a website, images and videos can appear at different times and push around other content as they load.

Here you can see CLS in action:

the effects of CLS on the GameStop website, with some content not loading

Bad CLS scores, especially paired with long load times, can be frustrating for visitors. Few things are more aggravating than accidentally clicking an ad because the page suddenly moved underneath your cursor. 

How does CLS impact user experience on a WordPress site?

Shifting can be annoying when navigating a web page. It can cause text to jump around as you’re trying to read, buttons to move as you go to click on them, and accidental clicks on ads or links when you want to interact with something else. 

If visitors have to wait several seconds for a page to fully load and fight with shifting elements, they might simply leave your site. This is especially true if all of your pages shift severely. Visitors are likely to bounce after a few misclicks or excessive wait times. 

What affects your CLS score?

A poor CLS score is caused by major site elements all loading on the page at different times. The worst culprits tend to be photos, videos, and ads because these things often load more slowly than text and may have to adjust based on screen sizes. 

And while decreasing load times can improve your overall UX, this won’t actually reduce the amount of shifting, just mitigate the effects.

Here are five factors that can affect your CLS score:

1. Images and videos without size attributes

Without preset size attributes, visual content like images and videos will often load in smaller placeholders. This setup can cause content around the placeholder to load. Then, when the image arrives, it takes up more space and shifts around neighboring elements. 

By setting size attributes, the placeholder takes up the same space as the element. So, it loads in the same area and doesn’t affect the placement of nearby content. 

In the following picture, you can see some early elements loading on the GameStop homepage:

early elements loading on the GameStop homepage, with a lot of blank space

The images load a few seconds later, pushing the Top Sellers heading down and out of sight. This is a prime example, with fast-loading text being moved around when slow-loading images populate without preset boundaries.

all elements loaded on the Gamestop site

This scenario is precisely what you’ll want to avoid or minimize on your site. 

2. Ads and embeds without size attributes

If you sell or display ads on your website, they’re likely in image or video format. Like in the example above, if these ads load without size attributes, they probably hit the page later than other content and shift things around. 

This is especially true for some third-party services that choose advertisements for you. These ads may not always be the same size or fit in the same space. 

A small graphic might not be a problem. But if a large video ad loads slowly and takes up a lot of space, it could force other elements on your page to move dramatically. 

Optimizing ads and embedded content to load quickly can reduce the annoyance, though your CLS score can still suffer. Layout shifts that cause visitors to click on your site’s ads inadvertently may leave them feeling tricked and hurt their chances of returning. 

3. Custom fonts 

Custom fonts are usually stored on your web server. While they can offer more customization options for your blog or website, they often need to be loaded on top of existing text. 

For example, you’re unlikely to see the Didot font offline (unless you find an old French book). This font offers a formal, elegant feel and is an excellent option for upscale restaurants or antique-related websites.

Didot font example

But if this font is hosted on the server, it needs to be downloaded to each visitor’s browser when they access the site. This setup may prevent text from appearing until the font is downloaded. Then, all the fonts will suddenly appear, likely jumbling up any assets already loaded on the page. 

Another option is to load all of the text in a more basic font, like Serif. Then it will be replaced with Didot once it loads in the browser. Since the letters of different fonts don’t usually take up the same amount of space, the font change will shift the text around, pushing or pulling neighboring elements in the process.

These shifts will increase a CLS score, so it’s in your best interest to avoid them. Luckily, some workarounds allow you to still use custom fonts while solving load time delays. We’ll take a closer look at these methods later in the post. 

4. Non-composited animations

A non-composited animation takes a lot of resources and requires the browser to render one or more times. You can mitigate this issue with less demanding animations or by strategically arranging the animation to load at a convenient time. 

When your browser is loading a website at a rudimentary level, it must render the visuals and “paint” them on the page. This process “tells” each pixel which color to display. Unfortunately, non-composited animations can cause the rendering process to restart.

The result is a partially-loaded page. The browser has already done some work, then the animation triggers and forces it to start over and render everything again. This process extends load times since certain elements need to be rendered multiple times and can also cause layout shifts. 

5. Dynamically-injected content

Dynamically-injected content is a web page element that changes based on certain factors. Often these factors depend on the user, allowing for a more personalized experience.

For example, an online store may suggest products based on a visitor’s history. A weather website might use the location data of a user’s device to display results for that area.

Dynamic content can increase conversions with a more relevant experience and product offers. Still, its reactionary nature can be resource-taxing and lead to layout shifts. 

As in the weather example above, different weather information, the name of the city, or even the language used will take up varying amounts of space on the page. A town with sunny skies and mild weather might be a much simpler entry than a city in the crosshairs of a coming hurricane. 

The result is that less content will load in the former example, and more will load in the latter, affecting how neighboring elements are shifted on screen. As with any dynamically-injected content that can vary in size or quantity, this will impact the CLS of the page. 

How to reduce Cumulative Layout Shift on WordPress

Now that you know the primary contributors to layout shifts on WordPress, you can work towards reducing their impact. 

As with any time you make fundamental changes to your website, it’s wise to create a backup and use a staging site to catch problems before they go live. 

Below, you’ll find solutions to reduce CLS and improve your site’s user experience.

1. Install a plugin designed for Core Web Vitals

Core Web Vitals look at three metrics: 

  • Cumulative Layout Shift (CLS)
  • First Input Delay (FID)
  • Largest Contentful Paint (LCP)

With Jetpack Boost, you can monitor and improve your Core Web Vitals and other performance metrics directly from your WordPress dashboard.

core web vitals settings in Jetpack Boost

It scans your website and returns a performance report with areas for improvement. But it goes beyond recommendations with one-click solutions for common issues that can slow down your site and hurt your user experience. 

2. Set dimensions for images and videos

When using images and videos alongside other elements on a page, consider assigning them width and height attributes. These settings will reserve the graphics’ required space and avoid shifting. 

Fortunately, setting dimensions is very easy in WordPress. Simply click on your embedded image and adjust the Image dimensions to the appropriate values:

setting image dimensions in WordPress

You can also use aspect ratio boxes to allocate the space for visual elements with CSS before they load. These boxes will have the same effect as set dimensions, reducing layout shifts by pre-assigning the space for images and videos. 

3. Set dimensions for ads and embedded content

Like in the step above, you should consider creating space for ads and other embedded content that can cause page shifts. You can do this by setting dimensions for these elements or using CSS to allocate space.

When ads are populated by third parties, their dimensions can be challenging to predict. So, you can try to estimate an amount of space to set aside and box it out so other content won’t overlap as the ad loads. 

This setup may result in extra white space around smaller ads. Still, that’s usually better than large ads (that often take longer to load) dramatically moving other elements on your page.

4. Host custom fonts locally and preload them

Earlier, we discussed custom fonts and how they can cause shifting. Fortunately, you can host these fonts locally on your server to avoid issues. 

You can do this by heading to google-webfonts-helper and selecting the font you’d like to use from the options on the left:

Google Web Fonts Helper tool

Next, select the options you would like to use (the default, in most cases) and copy the CSS from the Best Support selection in step 3.

CSS from Google Web Fonts Helper

Paste this code into your CSS file. Your site will now verify if a visitor already has the font. If not, your website will load it from your server, which is faster than fetching it from elsewhere on the web. 

The easiest solution for preloading fonts in WordPress is the Google Fonts Typography plugin. This tool provides additional font options and more efficiently loads them to minimize delays and avoid CLS.

The other solution is more technical and requires you to rearrange the order in which assets are loaded on your site. This method simply inserts your web font files earlier into the loading sequence to ensure they’re ready when needed. However, this process requires custom coding that may be a little advanced for the average WordPress user. 

5. Set placeholders for dynamically-injected content

Dynamically-injected content can be a helpful feature, but you must implement it strategically to avoid causing layout shifts. The key is to allocate enough space to fit the largest version of the injected content without spilling over and shifting neighboring elements around. 

You can simplify this process by making all the injected content the same size or as similar as possible. This setup can prevent different results requiring different amounts of space on the page. 

The actual method for allocating space will depend on the content and approach for injecting it. But it usually requires adding a fixed position and preset boundaries for the assets being loaded.

6. Use the Happy Addons for Elementor plugin for animations

While animations can cause long load times and harm CLS scores, sometimes they’re essential elements on a webpage. 

If you want to stick with animations, you might consider using the Happy Addons for Elementor plugin to insert them safely and prevent loading issues. 

This plugin handles CSS to transform and translate animation properties whenever possible. Happy Addons optimizes this process to minimize loading times and reduce the effects of shifting on your website. Plus, it’s free to use!

How can I measure my WordPress site’s CLS score?

Since CLS is a significant part of your website’s Core Web Vitals, most site health reports or monitoring tools will highlight it. Below are some of the best options for checking out your site’s CLS score:

1. PageSpeed Insights

PageSpeed Insights is a simple resource that provides a report on Core Web Vitals. Simply type in a URL and it will analyze several components, score them, and offer tips for improvements.

scores from Google PageSpeed Insights

PageSpeed Insights can run the report for mobile and desktop devices so that you can identify weaknesses on your website for all kinds of visitors. You can also view a treemap for a detailed visual breakdown of performance issues on your site. 

2. Google Search Console

Google Search Console is a report generator from Google focused on your site’s health as it pertains to search results. Like with PageSpeed Insights, you can view reports for your site’s mobile and desktop versions with metrics like FID, LCP, and CLS. 

To use Google Search Console, you’ll first need to verify ownership of your domain. Then, the report will flag poorly-performing aspects of your site, allowing you to pinpoint and solve them.

3. Lighthouse

Another Google tool for assessing page quality is Lighthouse — and it’s easy to use for anyone using the Google Chrome browser. It monitors websites in real-time for accessibility, performance, SEO, and more. 

You can find Lighthouse by going to your Google Chrome browser settings, hovering over More tools, and selecting Developer tools at the bottom.

Then, you’ll need to expand the menu at the top and choose Lighthouse. From there, you can run the report for the page you’re currently viewing.

Just select the options you want and click on the Generate Report button.

using Google Lighthouse on the GameStop website

You’ll see color-coded scores at the top for each of the primary metrics. Then, click on each one and scroll down to see a detailed analysis and opportunities for improvement. 

How can I easily optimize my CLS score right now?

Using the tools and tips above, you can identify weak points in your Core Web Vitals, including CLS. Once you start fixing some of these issues, your site health will improve, and you can learn how to avoid similar problems in the future. 

Installing the Jetpack Boost plugin on your WordPress site is a great way to begin. This tool is easy to use and can help you improve your CLS score right away. 

Utilizing the other solutions above will ensure your CLS score remains in good standing, improving your site’s SEO and UX. You can also use the reports to target other Web Vitals scores like LCP and FID until everything comes back to green!

Getting started with Jetpack Boost

To get started, simply install Jetpack Boost from the WordPress Plugins page (it’s free).

list of plugins in WordPress, including Jetpack Boost

Once the tool is activated, select Boost from the Jetpack tab on the left-hand side of your dashboard.

You’ll now see a performance score for your site on mobile and desktop devices.

Jetpack Boost website scores

Further down the page, you can turn on additional performance optimization settings, such as CSS loading, deferring non-essential JavaScript, and lazy image loading. Each of these configurations can improve your Core Web Vitals scores. 

Frequently asked questions 

Below are some frequently asked questions and answers about CLS on WordPress that may be useful as you dive in.

What is a good CLS score?

Anything below 0.1 is considered a good CLS score.

This number is the difference between the original loading site and the final placement of an element. The score is cumulative, meaning it uses multiple instances from different elements.

Scores between 0.1 and 0.25 are considered okay and need improvement. Any scores above 0.25 are poor. They suggest that CLS is negatively impacting the usability of your site.

What if a layout shift is unavoidable?

Sometimes, a layout shift may be unavoidable due to a lack of knowledge or simply the nature of an element on your page. Don’t worry!

A few layout shifts here and there shouldn’t significantly impact your site. After all, CLS is a rating compiled from the entirety of the page. Even if your score isn’t a flat zero, a few minor instances can still give you a good overall rating.

Shifts may simply not be possible to solve on some pages. Again, a minor blemish on your site’s overall UX shouldn’t be a major cause for concern. 

Do user interactions affect Cumulative Layout Shift?

No! User activity that triggers layout shift is believed to impact CLS less and not register if the result loads quickly after the action. Requiring a user action before loading variable content can actually be a helpful trick to help avoid CLS in some situations. 

For instance, say you use dynamically-injected content to load a map of nearby stores for visitors. If this happens automatically, the time to pull the user’s location data and load the map could cause a layout shift. But if there’s a button that the user must click to load the map, this interaction will prevent the layout shifts from affecting the page’s CLS score. 

Improve Cumulative Layout Shift on WordPress

Now that you know how to fix Cumulative Layout Shift (CLS) on WordPress and how to measure it, you can improve your website’s SEO and UX. Reducing shifts will make navigating your website more pleasant for visitors and should also boost your rankings on the search engine results pages. 

To minimize your CLS score, remember to:

  1. Install a core web vitals plugin like Jetpack Boost
  2. Set dimensions for images, videos, ads, and other embedded content.
  3. Host web fonts locally and preload them.
  4. Set placeholders for dynamically-injected content.
  5. Use the Happy Addons for Elementor plugin for animations. 

While Cumulative Layout Shift is just one factor that affects your site’s SEO, it’s also a noticeable UX consideration. A little work can have lasting improvements in your search rankings and the visitor’s experience once they arrive. 

This entry was posted in Performance. Bookmark the permalink.

Simon Keating profile
Simon Keating

Simon has worked in marketing and product development for over 10 years, previously at HubSpot, Workday, and now Automattic (Jetpack). He has a varied education, with a degree in chemical engineering and a masters in computer science to his name. His passion is helping people and their businesses grow.

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site.

Get up to 60% off your first year.

Compare plans

Have a question?

Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.

View support forum
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 110,888 other followers
  • Browse by Topic

  • %d bloggers like this: