How to Fix Cumulative Layout Shift in WordPress: 11 Ways to Reduce CLS

Do you want to fix the cumulative layout shift in WordPress? If you are looking for a definitive guide, keep reading this article. I will show all the methods that help you reduce your CLS score to ‘0’ like TechNumero’s CLS (yes, our CLS score is ‘0’ 🙂).

Most people will think using a lightweight theme and configuring a WordPress caching plugin is all they need to optimize the speed of a website.

That’s not completely true.

If you need to optimize your website for core web vitals, there are multiple things you should do other than using a caching plugin.

For instance, optimizing your website for web vitals like CLS (Cumulative Layout Shift) will help you improve your overall page speed score. And CLS not be optimized ONLY by using a great caching plugin or a theme, you need to tweak other things as well.

In this article, I will show you the best 11 methods to improve CLS in WordPress.

Improving your CLS score helps you with

• Better user experience
• Reduce bounce rates
• Optimized experience for mobile users
• Best for SEO
• Boost conversion rates

Before further exploring the optimization methods, let’s see what CLS is and how to find it.

What is CLS and How to Find it

CLS stands for Cumulative Layout Shift. It’s a metric used to measure how much the elements on a webpage move around while the page is loading. A layout shift occurs when a visible element changes its position from one frame to another during the page load.

To provide the best user experience, you should aim for a CLS score between 0 and 0.1.

If the score is under 0.1, you are doing great. On the other hand, if the score is more than 0.1, that could be improved.

Now you know what CLS is. Next, let’s see how to find the CLS score.

To find CLS, you need to go to the Google Page Speed Insights tool.

In the tool, enter your domain name and click Analyze.

Within a few seconds, the tool will show you the score.

Under Avoid large layout shift, PageSpeed Insights also show page elements where large layout shifts are happening.

This way, you can find CLS.

In my case, the CLS score is 0, which is excellent. Your score might be a little higher but don’t worry. By the end of this article, you will be able to optimize the CLS score of your website.

Learn How to Fix Cumulative Layout Shift in WordPress – Reduce CLS

• Delaying JavaScript
• Hosting fonts locally
• Preloading fonts
• Excluding above-the-fold content from optimization
• Using a separate cache for mobile phones
• Using a lightweight cookie notification plugin
• Optimizing Oxygen Builder’s font settings
• Specifying dimensions for images, media, ads, and so on
• Using CSS transform property in animations
• Serving dynamic content properly
• Use font-display Properly

Each method can help you fix cumulative layout shift in WordPress. Below, we will look at individual ways, and you can understand how it affects the CLS score and how to do it.

Without any further ado, let’s get into the list.

#1 Delay JavaScript

To fix the cumulative layout shift in WordPress, you must delay JavaScript. You can complete this task with a caching or performance optimization plugin like WP Rocket, FlyingPress, or Perfmatters.

Here’s how you can use WP Rocket to delay the JavaScript executions.

Go to File Optimization > JavaScript. From there, you can delay the JS files.

WP Rocket will also show you a list of third-party services below that. If you need to exclude any of them, select the option from the box and hit save.

You also have the option to exclude specific JS files from the delay.

Once you have finished delaying JavaScript files, let’s move to the next method, hosting fonts locally.

#2 Host Fonts Locally

If you are hosting fonts on a third-party server, you must stop it. Hosting fonts locally will help you reduce the HTTP requests and improve CLS in WordPress.

With a plugin like Perfmatters or FlyingPress, you can complete this task. I’ll be using Perfmatters in this case.

If you use Google fonts on your website and need to host them locally, Perfmatters is the best option. Under the plugin’s settings, go to Fonts.

You will see the option to host Google fonts on your server there.

Once you have enabled it, save the changes. You can host Google fonts locally on your server and improve CLS in WordPress.

#3 Preload Fonts

After hosting the fonts locally, preloading them is a good option. Thankfully, Perfmatters can do that too.

Under the plugin’s settings, go to the preloading option.

Enter the file path to the font, select the font as the file type, and save the changes.

You can add multiple rules through the settings. If you need to add preload numerous fonts on your web server, this is a simple task.

On the other hand, if you prefer doing it manually without a speed optimization plugin, add this code to your website’s header.

<link rel=”preload” href=”/file-path/font-name.woff2″ as=”font/woff2″ crossorigin>

Remember to tweak the code and match it with your file path and name.

#4 Exclude Above the Fold Content from Optimizations

The next method I have for you is to exclude above-the-fold content from optimization. Because optimizations like lazy loading media, defer JavaScript, or async CSS loading when applied to above the content will affect CLS and LCP scores.

Therefore, it is better to exclude above-the-fold content from these optimizations.

You can use a plugin like Perfmatters or FlyingPress for this purpose. The main thing you need to focus on is removing lazy loading from above-the-fold images.

Lazy loading is good and can help you improve the website’s loading time. But lazy loading above-the-fold content can cause CLS issues, so use it mindfully.

First, check how many images you have above the fold. This is easy. Once you have checked the website, you can spot every image that needs to be excluded.

For example, check out our website.

Here, we have a logo and a sidebar image – in total, two photos. So while configuring lazy loading for pictures, you need to exclude the two images from the top from optimization.

Here’s how you can do it with Perfmatters.

After enabling lazy loading for images, you will see an option called exclude top photos. Mention how many images need to be excluded from lazy loading there.

This is a suitable optimization method to improve CLS in WordPress.

#5 Use a Separate Cache for Mobile Phones

In responsive design layouts, mobile versions of websites have different CSS styles, JS, and mobile-specific features. , it is recommended to have a dedicated cache for mobile phones.

A caching plugin can help you serve mobile and desktop caching. But you have to enable it in the settings. Here’s how you can enable mobile cache using WP Rocket.

The process is straightforward. Once you have enabled it, save the updates.

#6 Use a Lightweight Cookie Notification Plugin, If You Have to

Adding a cookie notice to your website will help you comply with laws related to privacy, etc. Using a dedicated cookie notice plugin, you can do this.

But be careful while choosing a cookie notice plugin. Some plugins can affect the CLS score badly. If you are looking for a lightweight plugin that won’t affect the core web vitals, check out Cookie Notice & Compliance for GDPR / CCPA.

#7 Optimize Oxygen Builder Font Settings

Page builder plugins can help you design stunning landing pages without much hassle of theme customization. The popular page builder plugins available in the market are Divi Builder, Elementor, Beaver Builder, Oxygen, and so on.

Oxygen builder users reported they saw a spike in the CLS score. The best way to fix the issue is to use Mulish as the default font.

Here’s the code you can add to the stylesheet:

body { font-family: 'Mulish', sans-serif; }

You can add the code through the additional CSS tab in the customizer.

#8 Specify Dimensions for Media (Images, iFrames, Videos, and Ads)

Most blogs use media files like images, iFrams, or even ads. But if you don’t mention the dimensions for these media files, it can affect the cumulative layout shift.

WP Rocket has a feature where you can add missing image dimensions and solve the layout shift issues.

Once you have enabled the feature, save the changes.

Alternatively, you can also specify dimensions via HTML. For example, here’s the snippet you can use to specify the media dimensions of an image:

<img src="image.png" width="600" height="600" />

For iFrames, use something like this:

<iframe src="https://www.youtube.com/embed/your-url-here" width="780" height="440" ></iframe>

If you are going to display ads, specify dimensions like this:

<div class="ad" style="min-width: 350px; min-height: 300px;"></div>

You must tweak the widths, etc. according to your preferences in above snippets. Specifying custom dimensions will always help to fix cumulative layout shift in WordPress.

#9 Use CSS Transform Property in Animations

It is recommended to use CSS transform property in animations to optimize the layout shifts.

For resizing an element, you can use the scale attribute value of the transform property. Something like this:

.animate {
  animation: scale 1.8s both;
}

@keyframes scale {
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

For moving an element, use the translate or rotation attribute values of the transform property. For example:

.animate {
  animation: slide-in 0.5s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

For the CSS transform, you can use any page builder add-ons. For example, go to the advanced settings if you use Elementor as the page builder with the Happy Addons to optimize CSS transform property.

There, you will see the CSS transform options.

#10 Serve Dynamic Content Properly

Some of the most common dynamic elements are ads, banners, Opt-in forms, etc. To minimize the CLS, avoid placing late-loading dynamic content near the top of the viewport i.e. above the fold area.

Also, to get rid of unwanted CLS, avoid inserting new content dynamically without user interaction.

#11 Use font-display Properly

By optimizing the font-display type, you can fix the cumulative layout shift in WordPress.

By default, most WordPress themes won’t offer to change font-display type. Hence, you have to do it manually.

For performance use swap or optional out of five possible values i.e. auto, block, swap, fallback, and optional of font-display property.

I will explain how to add font-display: optional; or font-display: swap; manually or using a plugin. 

(i) Use font-display: optional; for performance with text render delay of not more than 100ms and no layout shifts due to font swap.

(ii) Use font-display: swap; for displaying text quickly using web font and to make sure that it does not cause a layout shift.

Manual Method

The first thing you need to do is find the font-face snippet on your website. To do this, go to the style.css sheet, and find the @font-face CSS.

Without the optimization, the code will look something like this:

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  src: local('Inter Regular'), local('Inter-Regular'),
	   url("https://example.com/wp-content/uploads/2022/11/Inter-Regular.woff2") format("woff2"),
       url("https://example.com/wp-content/uploads/2022/11/Inter-Regular.woff") format("woff");
}

Check if font-display property is defined under @font-face, if not, you should add a new line as follows:

font-display: swap;

To the code. So, the final code will look like this:

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular'),
	   url("https://example.com/wp-content/uploads/2022/11/Inter-Regular.woff2") format("woff2"),
       url("https://example.com/wp-content/uploads/2022/11/Inter-Regular.woff") format("woff");
}

This way, you can optimize your font manually. If this is challenging, check out the next method, where I will use a dedicated plugin for the task.

Plugin Method

For this method, I will use Perfmatters.

Enable the display swap option under Fonts settings.

After that, save the changes.

Conclusion

In this article, we discussed  11 methods you can use to optimize the cumulative layout shift in WordPress. If you use the proper optimization methods, you can keep 0 as CLS, which is considered the best.

The main thing you need to focus on is hosting your fonts locally on your server, preloading them, optimizing the JS files, and using a separate cache for mobile visitors.

Which method helped you to boost the CLS score?

Let us know in the comments!