Wednesday, May 18th, 2022

Fixing Cumulative Layout Shift in WordPress

Having problems with Cumulative Layout Shift in WordPress?

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

If you’ve ever browsed a page that jumps around when loading, you’ve experienced layout shift, and you also know how annoying the high cumulative layout shift in WordPress can be. But in addition to annoying your visitors, CLS can also affect your search engine rankings, so it’s important to fix any problems with your site.

Fortunately, you don’t need to be a techie to identify and solve cumulative layout shift problems. By understanding its causes and knowing how to fix them, you can reduce the number of unexpected changes to your website.

In this article, we’ll introduce you to Google’s cumulative layout shift metric and show you how to spot problems with the CLS on your site. Then, we’ll walk you through three easy ways to fix problems and lower your site’s CLS score.

table of content:

Introducing Cumulative Layout Shift in WordPress

Layout shift occurs when the content of your page is moved around without user interaction.

A common example is late-loading ads, which you’ve probably experienced on media websites. You may have started reading the text on the page only to be “pushed” by an ad that appears after the page loads.

Here’s a useful view from the folks on web.dev – the user meant to click “no, go back” but mistakenly clicked “yes, place my order” because the layout shift caused the button placement on the initial page load Moved after:

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

As you can imagine, moving elements can be a headache for your users. This can cause them to inadvertently click on a part of your page or even make a purchase by mistake, as the example above shows.

Even if there are no visible consequences, a lot of layout changes can be visually jarring. Along with the fact that it can slow down your load times, this small issue can have a serious impact on the user experience (UX) of your audience.

Unfortunately, the issues with high cumulative layout shift scores don’t end there. The cumulative layout shift is also part of Google’s new core web vitals initiative. According to Google’s Page Experience Update, your site’s Core Web Vitals score is now a small SEO ranking factor, which means that issues with the CLS can affect your site’s ranking.

How to Identify Problems with Cumulative Layout Shift in WordPress

To find your site’s cumulative layout shift score and identify problems, we recommend using PageSpeed ​​Insights. This will give you the overall CLS score of your site, but it will go deeper and flag specific layout shift issues that are causing problems.

To get started, enter your URL in the box and click Analysis. The process should only take a few moments. When you get your results, scroll down to either lab data Or workspace data Explore sections and your site Cumulative Layout Shift Score:

How to Find Cumulative Layout Shift Score in WordPress

From here, you can determine how well your site performs in this area. As a general rule of thumb, your CLS score can fall into three possible categories:

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

Since this metric directly affects the optimization of your main web vitals, you should try to aim for the lowest possible score. For more specific tips on how to do this, you can scroll down diagnosis section see more Avoid Large Layout Shifts. This section will list the different layout changes on your site:

PageSpeed's instructions give information on how to avoid the CLS event.

This information can help pinpoint specific areas of your site that could use a little work. Once you have identified the problem, you can apply some simple methods to solve it.

How to Fix Cumulative Layout Shift in WordPress (3 Ways)

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

1. Add dimension to your images, videos and ads

If you have a lot of media on your website, it is likely that each image and video will have different dimensions. This is arguably indispensable no matter what type of site you run.

At its core, this variation does not directly affect your CLS score. Even so, it still poses a danger – if you don’t specify the dimensions of the item, you can start running into problems.

Adding dimensions is necessary because it provides important loading instructions to browsers. Dimension information helps the browser to reserve the right amount of space for that asset.

If the browser cannot do this, it may estimate the wrong amount of space. As a result, corrections may occur after the page is loaded, causing the layout to shift. The same principle applies to ads or any embedded content on your site.

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

An example of apparent dimensions for an image.

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

A huge issue with CLS on WordPress is advertising. If you are placing advertisements in your content, you must ensure that you are reserving space for those advertisements to avoid CLS.

one way to implement it min-height And min-width css properties to <div> The container that contains your ad – Google has a good guide on how to accomplish this.

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

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

Some advertising tools may also provide 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 media pieces, your site probably uses too many different fonts. This means that they can also take up a variable amount of space. However, unlike media, 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 it generates for any page. By including fonts first, you’re eliminating the need for corrective changes after the fact.

This method can be especially important if you use a lot of custom WordPress fonts. These can vary dramatically in size from normal fonts, which means this simple change can have a big impact. However, less font-dependent sites are also likely to experience at least a modest CLS score improvement.

Many WordPress display 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 snippets. To add this code snippet, you need to edit it header.php Your child theme file. You can edit this file by going to Appearance > Theme Editor > Theme Header On your WordPress site:

A view of the header section of a theme, which can be customized to reduce the constraints of a cumulative layout shift.

once you’re done editing 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 change the font link for example – roboto.woff2 In this example – with the actual link to the font file 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 update file To save your changes. That’s all you have to do – your website’s fonts will now take precedence over loading in the browser.

3. Optimize Your Dynamic Content

Finally, let’s talk about the dynamic content of your site. Dynamic content like newsletter signup forms, app install prompts, GDPR notices, and the like can cause layout shifts by re-adjusting the browser after most of the page is loaded.

However, this only applies to dynamic content that Not there Triggered by user interaction. For example, if you’re loading an automated notification bar to greet people on your homepage, it could hurt your CLS score.

There are two ways to fix this:

  1. Trigger dynamic content only after user interaction, which will not affect your CLS score. For example, instead of showing the email opt-in form immediately, you might trigger it when a user clicks a button to create a two-step opt-in.
  2. Use CSS to reserve space for dynamic elements, as 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 shifting the layout.

Fix Cumulative Layout Shift in WordPress for Good

Having a low Cumulative Layout Shift score is important if you want to create a good user experience and improve your score in core web vitals. Fortunately, stopping this annoying problem isn’t hard. You can fix your site’s loading problems by simply paying attention to a few simple settings.

In this article, we have covered three ways to fix and reduce the cumulative layout shift in WordPress:

  1. Make sure all of your media and advertisements have clearly defined dimensions. WordPress will automatically handle images that you embed in the editor, but you may need to manually define the dimensions of ads and any images 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 by reserving space for any dynamic elements.

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

free guide

5 essential tips to increase speed
your wordpress site

Reduce your loading time by 50-80%
Just by following simple tips.

Source link