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 guide 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:

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, and your UX metrics like average time on page and sessions duration will drop.

What affects your CLS score?

A poor CLS score results from major site elements causing other parts of the page to shift as they load. 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 four 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 means that content around the placeholder will initially take up the ample available space afforded by the small placeholder. 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:

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.

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 will 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 have to be hosted somewhere — like your web server, 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.

But since this font is being pulled from somewhere other than the browser, it needs to be downloaded each time a visitor accesses the site. This setup may prevent text from appearing until the font is downloaded. Then, the font can suddenly appear, likely jumbling up any assets already loaded on the page. 

Another option is to load all 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. Dynamically-injected content

Dynamically-injected content is a web page element that can change 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. 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:

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. 

2. 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.

3. Use fallback fonts to reduce layout shifts

Earlier, we discussed custom fonts and how they can cause shifting. One possible solution here is to use the ‘font-display’ attribute to match fallback fonts as closely as possible. 

Browsers load fallback fonts when the custom fonts defined on your site aren’t immediately available. So, while your custom font loads, it will display the fallback fonts that you set. If you match these as closely as you can, the text won’t shift as much when the custom option does load.

The Font Style Matcher app can be very helpful here. You can select your custom font and fallback font, then preview them on top of one another and make style adjustments as needed. You can even check the box next to “See layout shift due to FOUC” and it will show you how much the page will shift as the font loads.

4. 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.

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.

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.

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. 

Utilizing these solutions 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 green!

Other ways to improve Core Web Vitals in WordPress

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

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. It’s one of the fastest and easiest ways to boost WordPress site speed on desktop and mobile.

How to get started with Jetpack Boost

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

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.

Further down the page, you can turn on additional performance optimization settings, such as generating critical CSS, 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 small layout shift may be difficult to avoid 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! Browsers calculate CLS, and they should explicitly ignore user-driven shifts. 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. Set dimensions for images, videos, ads, and other embedded content.
2. Reduce shifts in fonts upon loading
3. Set placeholders for dynamically-injected content.

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. 

---