Fixing Cumulative Layout Shift in WordPress

Having issues with Cumulative Layout Shift in WordPress?

Cumulative Layout Shift, or CLS for short, is a user experience-focused metric that’s part of Google’s new Core Web Vitals initiative.

If you’ve ever browsed a page that jumps around as it loads, you’ve experienced layout shift, and you also know how annoying high Cumulative Layout Shift in WordPress can be. But beyond annoying your visitors, CLS can also affect your search engine rankings, so it’s important to fix any problems that your site has.

Fortunately, you don’t need to be a tech whiz to identify and resolve Cumulative Layout Shift issues. By understanding its causes and knowing how to correct them, you can decrease the number of unexpected shifts on your website.

In this article, we’ll introduce you to Google’s Cumulative Layout Shift metric and show you how to detect issues with CLS on your site. Then, we’ll take you through three easy ways to fix problems and reduce your site’s CLS score.

📚 Table of contents:

An introduction to Cumulative Layout Shift in WordPress

Layout shift occurs when the content on your page moves around without user interaction.

One common example is late-loading advertisements, which you’ve probably experienced on media websites. You might’ve started reading the text on the page only for the text to be “pushed” down by an advertisement that displays after the page has already loaded.

Here’s a helpful visual from the folks at web.dev – the user meant to click “No, go back” but accidentally clicked “Yes, place my order” instead because layout shift caused the button placement to move after the initial page load:

Cumulative Layout Shift is a metric that measures all of the layout shift that occurs on your page and puts it into one single score. We’ll talk about scoring in a second. But in general, a high score indicates lots of layout shifts (bad), while a low score indicates few layout shifts (good). And a score of zero means your site has zero layout shift issues, which is perfect.

As you might imagine, shifting elements can be a headache for your users. It can cause them to inadvertently click on some part of your page or even accidentally make a purchase, as the example above demonstrates.

Even if there are no direct consequences, lots of layout shifts can be visually jarring. Combined with the fact that it can slow down your load times, this seemingly small problem can have serious impacts on your audience’s user experience (UX).

Unfortunately, the issues with a high Cumulative Layout Shift score don’t end there. Cumulative Layout Shift is also part of Google’s new Core Web Vitals initiative. As of Google’s Page Experience update, your site’s Core Web Vitals scores are now a small SEO ranking factor, which means that issues with CLS can affect your site’s rankings.

How to identify problems with Cumulative Layout Shift in WordPress

To find your site’s Cumulative Layout Shift score and identify issues, we recommend using PageSpeed Insights. It will give you your site’s overall CLS score, but it will also go deeper and flag the specific layout shift issues that are causing problems.

To start, enter your URL into the box and click Analyze. The process should only take a few moments. When you get your results, scroll down to either the Lab Data or Field Data sections and look for your site’s Cumulative Layout Shift score:

From here, you can determine how well your site performs in this area. As a general rule of thumb, there are three potential ranges that your CLS score can fall into:

• Good, which is equal to or less than 0.1
• OK, which is between 0.1 and 0.25
• Bad, which is 0.25 or more

Since this metric directly impacts the optimization of your Core Web Vitals, you should try to aim for the lowest score possible. For more specific tips on how to do that, you can scroll down to the Diagnostics section and look at Avoid large layout shifts. This section will list the individual layout shifts on your site:

This information can help point out specific areas of your site that could use a little work. Once you’ve identified the problem, you can apply a few simple methods to resolve it.

How to fix Cumulative Layout Shift in WordPress (3 ways)

Let’s look at three effective ways to resolve CLS issues. These methods are most powerful when used together, so we encourage you to try out each approach.

1. Add dimensions to your images, videos, and ads

If you have a lot of media on your website, chances are each image and video has different dimensions. This is arguably unavoidable no matter what kind of site you run.

At its core, this variance doesn’t directly impact your CLS score. Nevertheless, it still poses a threat – if you don’t specify the item’s dimensions, you can start to run into problems.

Adding dimensions is essential because it delivers vital loading instructions to browsers. Dimension information helps browsers to reserve the correct amount of space for that asset.

If the browser can’t do this, it may predict the wrong amount of space. As a result, there may be corrections after the page has loaded, leading to a layout shift. The same principle applies to ads or any embedded material on your site.

Fortunately, recent versions of WordPress largely take care of this problem. If you insert an image via the WordPress editor, WordPress will automatically handle defining its dimensions for you. You can see the results by selecting any piece of media:

However, if you ever add images manually with code or via a plugin, you’ll want to make sure that the image dimensions are there.

A much bigger issue with CLS on WordPress is advertisements. If you’re placing advertisements in your content, you’ll need to make sure that you’re reserving space for those advertisements to avoid CLS.

One way to do this is by applying the min-height and min-width CSS properties to the <div> container that contains your ad – Google has a good guide on how to accomplish this.

For example, if you display a 300x250px ad inside a div with the id in-content-ad, you could reserve space by using this code:

<div id="in-content-ad" style="min-width: 300px; min-height: 250px;">PLACE AD CODE HERE</div>

Some advertising tools might also offer tools to help you accomplish this. For example, if you’re using Google Ads, Google provides an Ad Editor to help with this.

2. Preload your fonts

Just like with pieces of media, your site probably uses a lot of different fonts. This means that they may also take up variable amounts of space. Unlike with media, however, you can’t exactly set dimensions for fonts.

The solution is to preload these assets instead. Preloading your fonts signals to browsers that it should be one of the first things that it generates for any given page. By including fonts first thing, you’re eliminating the need for a corrective shift after the fact.

This method can be particularly critical if you use a lot of custom WordPress fonts. These can dramatically vary in size from normal fonts, meaning this simple change can have a big impact. However, even less font-reliant sites are likely to experience at least a minor CLS score improvement.

Many WordPress performance plugins include options to preload fonts. For example, Autoptimize, Asset CleanUp, Perfmatters, and WP Rocket.

For most people, using one of these plugins is the simplest solution to preload WordPress fonts.

However, for more advanced users, you can also preload fonts with your own custom code snippet. To add this code snippet, you’ll need to edit the header.php file of your child theme. You can edit this file by going to Appearance > Theme Editor > Theme Header on your WordPress site:

Once you’re editing the header.php file in your child theme, scroll to the bottom of the page, then copy and paste the following line of code, making sure to replace the example font link – roboto.woff2 in this example – with the actual link to the font file that you’re using on your site:

<link rel="preload" href="https://themeisle.com/blog/cumulative-layout-shift-in-wordpress/roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

When you’re ready, click on Update File to save your changes. That’s all you have to do – your website’s fonts will now take loading priority in browsers.

3. Optimize your dynamic content

Finally, let’s talk about your site’s dynamic content. Dynamic content such as newsletter signup forms, app install prompts, GDPR notices, and so on can all cause layout shifts by making the browser readjust after the page is already mostly loaded.

However, this only applies to dynamic content that isn’t triggered by user interaction. For example, if you’re loading an automatic notification bar to greet people on your homepage, this could harm your CLS score.

There are two ways to fix this:

1. Only trigger the dynamic content after user interaction, which won’t affect your CLS score. For example, instead of showing the email opt-in form right away, maybe you trigger it when a user clicks on a button to create a two-step opt-in.
2. Use CSS to reserve space for the dynamic elements, similar to what we discussed above. For example, if you use CSS to reserve space for the notification bar at the top of your page, you can still load that bar without causing layout shift.

Fix Cumulative Layout Shift in WordPress for good

In this article, we covered three ways to fix and reduce Cumulative Layout Shift in WordPress:

1. Make sure that all of your media and ads have clearly defined dimensions. WordPress will automatically handle images that you embed in the editor, but you might need to manually define dimensions for advertisements and any images that you add outside the editor.
2. Preload your fonts to avoid last-minute adjustments.
3. Pay attention to how you implement dynamic content – either by requiring user interaction or reserving space for any dynamic elements.

Do you still have any questions about improving Cumulative Layout Shift in WordPress? Let us know in the comments!