How to Optimize Cumulative Layout Shift (CLS) on WordPress?

Cumulative Layout Shift, or CLS for short, is one of three metrics in Google’s new Core Web Vitals project. Beyond generally being a good measure of user experience on your site, Google has been considering Core Web Vitals as an essential ranking factor starting since May 2021.

Although there are a few elements that affect the site user experience, poor CLS also impacts the SEO of the website. Hence, you must know what CLS is and how you can enhance the CLS of your WordPress site.    

In this blog, we will explain Cumulative Layout Shift in WordPress and how to improve CLS score.

So, let’s get started.

What Is Cumulative Layout Shift on WordPress?

Have you ever been reading an article on a publisher’s website (e.g., the news), and the article’s content kept getting pushed down as new ads loaded? That’s not just annoying – it’s the perfect example of a Cumulative Layout Shift!

Cumulative Layout Shift is when your site’s content “shifts” around as it loads. As you’ve probably experienced in your own life, it’s super annoying, which is why Google encourages webmasters to pay attention to and improve this metric.

Cumulative Layout Shift is also one of three metrics in Google’s Core Web Vitals initiative – learn more about Core Web Vitals and WordPress.

What’s a Good Cumulative Layout Shift Score?

In order to understand your site’s Cumulative Layout Shift, Google provides a range of three possible values:

• Good – under 0.1
• Needs Improvement – between 0.1 and 0.25
• Poor – higher than 0.25

How to Measure Your Cumulative Layout Shift Score?

Here are the two crucial ways cumulative layout shift score can be measured.

1. Measure CLS in the Lab

Here, we will look at two ways to measure CLS in the lab.  

Chrome DevTools

The majority of browsers allow you to measure the CLS score of a web page and present it in rectangular format. 

Here is how you can calculate the CLS score with the help of Google Chrome’s Developer Tools.

• Go to the browser menu and visit More Tools in the Developer tools. Another option is to press Ctrl + Shift + I and choose the performance panel.

• Look at the web vitals option and press the reload button or Ctrl + Shift+ E to record the desired page.

• Hold on for a few seconds and go to the Layout Shift tab beside the Experience. Now, you can view the Cumulative score in the summary tab.

Another lab tool to check the CLS score is Lighthouse; let’s understand it in detail.

Lighthouse

Lighthouse is very user-friendly; you can access the tool from Google Chrome. 

To use this tool, go to the browser settings in Chrome, go to More Tools, and then choose Developer Tools from the menu.

Now, you need to expand the menu by clicking on “>>” and selecting Lighthouse. Then, you have to click on Analyze page load to generate the report.

Here, you can view the detailed report of various essential metrics.

2. Measure CLS in the Field

CLS is one of the most crucial parts of the Core Web Vitals, a report that indicates the web page’s performance. There are a vast number of tools that lets you measure the CLS of your web page. Here we will look after the two important ones.

PageSpeed Insights

One of the most well-known tools that help you measure CLS is PageSpeed Insights. You just need to enter the URL and click on Analyze to know the performance of the page.

The tool will display the entire Core Web Vitals Assessment and checks whether the page meets Google’s standard. Here, you will first view the report on mobile devices by default.

Simply click on the desktop to know the CLS score on the desktop devices. Here, you will understand how there is different score on different devices.

To know the report in detail, click on the expand view.

Google Search Console

The tool helps you to generate the core web vitals report linked to the site’s health based on the search results. Similar to PageSpeed Insights, this tool lets you view reports related to CLS, LCP, FID, and more on mobile and desktop devices.

IMAGE

In order to view the report in this tool, you need to validate your URL. When you try to validate your URL, the tool will provide a report which lists all the factors that are weakening the performance of your site; you need to resolve them as soon as possible.

How to Improve Cumulative Layout Shift in WordPress?

Unfortunately, unlike improving Largest Contentful Paint on WordPress, fixing your Cumulative Layout Shift can get a little technical. Many of these fixes involve digging into the code. Unfortunately, it’s hard to avoid looking at code here, but we will try to include plugin solutions where possible.

Let us look at some of the most well-known ways to optimize cumulative layout shift in WordPress websites.

1. Always Set Image Dimensions

If you don’t set image dimensions in your site’s code, your images can cause the rest of your content to shift as they load.

Thankfully, if you add images via the WordPress editor, WordPress will automatically do this for you (and set up responsive images with the srcset attribute). However, if you manually add images to your site via code, you’ll want to include the dimensions. You should see the height and width attributes in the image HTML.

For example:

<img src=”https://wplift.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024×874.png” alt=”SendGrid API keys” width=”1024″ height=”874″>

2. Always Set Dimensions for Embeds/iframes

Just as with images, you’ll also want to make sure to set dimensions for any embeds/iframes that you’re using.

For example, if you’re embedding a YouTube video or Google Maps, specify the height and width. You can also consider loading a placeholder before the embed, which is generally a good practice for performance.
You can find many solutions that let you replace the YouTube embed with a placeholder image (until a user clicks to play the video). Some good options are WP Rocket (our review) or the free Lazy Load plugin from the WP Rocket team.

3. Reserve Space for Ads

Ads are basically just another type of embed, but they deserve a special mention because ads are one of the biggest contributors to Cumulative Layout Shift. As we discussed, you’ve been on a site where the content kept jumping around because of late-loading ads.

The solution is to reserve space for your ads in your site’s code. By doing this, you can improve your website’s cumulative layout shift score. For example, you want to display a 160×600 skyscraper ad in your sidebar. Rather than just adding the ad code directly, you could place it inside a <div> with the ad’s dimensions. That way, the space is reserved even if the ad content hasn’t loaded yet. When the ad content does load, it won’t cause any shift.

You should also be careful with placing ads near the top of a visitor’s viewport, as these placements are the ones most likely to cause layout shift.

4. Fix Issues With Font Loading

One big issue with layout shift is how your custom fonts load. For example, if you’re using fonts from Google Fonts or Adobe Fonts, those can cause layout shift in two ways:

• Flash of Invisible Text (FOIT)
• Flash of Unstyled Text (FOUT)

Basically, the issue is that a visitor’s browser might try to display the text before the custom font loads. Once the custom font loads, it will then update the text’s styling, which can cause it to shift as it changes from, say, unstyled text to your custom font.

There are a few ways to solve this issue and improve the cumulative layout shift of your website. One option is to preload important font files. It forces visitors’ browsers to download the font file immediately, eliminating the chance of FOIT/FOUT. However, be careful that you’re only preloading the most critical resource (e.g., the font for your above-the-fold content). Using preloading too much will slow down your site.

You can set up a list of font assets to preload with the free Autoptimize plugin in the Extra section:

For Google Fonts, you can also consider hosting the font file locally and preloading it that way. You can set this up with the free OMGF plugin, which includes a nice feature to preload above-the-fold fonts automatically.
If you want to really dig in, Google also has a good article on combining preload with font-display: optional to really optimize your font loading and avoid layout shift.

And if you really want to avoid issues, consider using a system font stack. Not only does this solve font loading issues, but it will also reduce the number of HTTP requests and speed up your site. Some themes, like GeneratePress, make it super easy to use a system font stack.

However, the downside is that you have much less flexibility regarding style/design.

5. Be Careful With Dynamically Injecting Content

If you’re dynamically injecting content for things like email opt-in forms, related content, GDPR notices, etc., then you need to be especially careful to avoid layout shift.

Generally, a good practice here is never to dynamically inject content above existing content unless it comes from user interaction (e.g., a user clicking a button).
For example, if you dynamically inject some CTA element, try to put it below your blog post instead of at the top or in the middle.

6. Use CSS Transform Property in the Animations

If you have generated the performance report of the web page and found non-composited animations, it can also result in layout shifts.

Google recommends leveraging the CSS transform property to animate elements on the website without thinking about layout shifts. Here are two things you need to consider.

• Rather than modifying the height & width properties on the web page, utilize the transform: scale().
•  To shift the position of the elements on any page, don’t change the top, right, bottom, or left properties. Instead, utilize the transform: translate().

In the end, using the CSS transform property can help you optimize your WordPress site’s cumulative layout shift score.

7. Delay JavaScript

Delaying JavaScript postpones the layout shifts happening due to the JS files. This results in CLS optimization.

There are numerous plugins available in the market that you can leverage to delay the JavaScript on the website. Some of the most popular plugins are WP Rocket, Flying Scripts, LiteSpeed Cache, etc. 

Here, the common practice is to delay the third-party code and particular plugins that loads below the fold, such as the comments or the social sharing plugins.

Lastly, the best thing you can do is go to PageSpeed Insights, look at the report, and dealy JS files as needed.

Wrapping Up

With the tips in this post, you should be able to improve Cumulative Layout Shift (CLS) score in your WordPress site and get in Google’s good graces.

Of course, Cumulative Layout Shift is just one of three metrics in Core Web Vitals – you’ll also need to pay attention to the other ones.

So once you’ve implemented these strategies, head over to our guide on how to improve the Largest Contentful Paint on WordPress to fix that one as well.

Still have any questions about Cumulative Layout Shift and WordPress? Ask us in the comments!

Frequently Asked Questions

What is an acceptable CLS score?

According to the industry standard, the acceptable CLS score is around 01. to less. To make sure that the CLS score is the same for the majority of the target audience, 75% of the page load should be divided into mobile and desktop devices.

What is the reason behind high CLS?

There are many things that cause high CLS score on a website. These are as follows.

• Images & videos without dimensions
• Use of Third-party scripts in the website
• Use of Web fonts
• Dynamically injecting content
• Various media and other resources are loading slowly.