Having problems with WordPress’s Cumulative Layout Shift?
CLS is for Cumulative Layout Shift, and it’s a user experience metric that’s part of Google’s new Core Web Vitals program.
You’ve probably seen layout shift on a page that hops about as it loads, and you know how aggravating high Cumulative Layout Shift in WordPress can be. However, in addition to irritate your visitors, CLS can have negative impact on your search engine results, therefore it’s critical to address any issues with your site.
To discover and handle Cumulative Layout Shift difficulties, you don’t need to be a tech whiz. You can reduce the amount of unexpected shifts on your website by identifying the causes and learning how to fix them.
We’ll introduce you to Google’s Cumulative Layout Shift statistic and teach you how to spot CLS issues on your site in this article. Then we’ll walk you through three simple fixes that can lower your site’s CLS score.
An introduction to Fix Cumulative Layout Shift in WordPress
When the information on your page changes around without user involvement, this is known as layout shift.
Late-loading advertising are a popular example, which you’ve probably seen on media websites. You may have begun reading the website’s text only to have it “pushed” down by an advertisement that appears after the page has already loaded.
From the folks at web.dev, here’s a handy diagram – Because layout shift caused the button location to alter after the initial page load, the user unintentionally clicked “Yes, place my order” instead of “No, go back.”
Cumulative Layout Shift is a metric that adds up all of the layout shifts on your page to give you a single score. In a moment, we’ll talk about scoring. However, a high score indicates a lot of layout shifts (which is negative), whereas a low score shows a few layout shifts (which is excellent) (good). A score of zero indicates that your website has no layout shift difficulties, which is ideal.
Shifting elements, as you can expect, can be a pain for your users. As the example above shows, it can force users to unwittingly click on a component of your page or even make an unintentional purchase.
Many layout changes can be visually shocking, even if there are no direct implications. This seemingly little issue, when combined with the fact that it might slow down your load times, can have major consequences for your audience’s user experience (UX).
Sadly, the problems that come with a high Cumulative Layout Shift score don’t stop there. Google’s new Core Web Vitals program includes Cumulative Layout Shift as well. 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
We propose using PageSpeed Insights to find your site’s Cumulative Layout Shift score and address concerns. It will tell you your site’s overall CLS score, as well as the individual layout shift concerns that are causing issues.
To begin, type your URL into the box and select Analyze from the drop-down menu. It should just take a few moments to complete the process. When you get your results, look for your site’s Cumulative Layout Shift score in either the Lab Data or Field Data sections:
You can see how well your site performs in this area from here. As a rough rule of thumb, your CLS score can fall into one of three categories:
- Good if it’s less than or equal to 0.1.
- OK, so it’s somewhere between 0.1 and 0.25.
- 0.25 or more is considered bad.
Because this statistic has such a direct impact on the optimization of your Core Web Vitals, you should strive for the lowest feasible score. Scroll down to the Diagnostics section and look at Avoid big layout shifts for more explicit instructions. This section will detail each of your site’s layout changes:
This data might help you identify certain regions of your website that could use some improvement. You can use a few basic approaches to tackle the problem once you’ve identified it.
Check Out – How To Enable GZIP Compression In WordPress
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 your website has a lot of media, each image and video is likely to have distinct dimensions. This is arguably unavoidable, regardless of the type of website you manage.
At its most basic level, this variation has no bearing on your CLS score. Nonetheless, it poses a risk: if you don’t describe the item’s size, you may have difficulties.
Adding dimensions is necessary since it provides browsers with important loading instructions. Browsers use dimension information to reserve the appropriate amount of space for that asset.
If the browser is unable to do so, it may estimate the amount of space required incorrectly. As a result, after the page has loaded, there may be corrections, resulting in a layout shift. Ads and any other embedded content on your site are subject to the same rules.
Fortunately, recent WordPress versions mostly address this issue. If you use the WordPress editor to enter an image, WordPress will automatically define its dimensions for you.
If you ever manually upload photos using code or via a plugin, you’ll want to double-check that the image dimensions are correct.
Adverts are a lot bigger issue with CLS on WordPress. If you’re going to include adverts in your content, you’ll need to make sure that space is set aside for them to avoid CLS.
2. Preload your fonts
Your site, like other pieces of media, is likely to employ a variety of fonts. As a result, they may take up varying amounts of space. Fonts, unlike media, do not have precise proportions that can be set.
Preloading these assets instead is the solution. By preloading fonts, you’re telling browsers that they should be one of the first things they generate for any particular page. You can avoid having to make a correction move later on by including typefaces right away.
If you use a lot of custom WordPress fonts, this strategy is especially important. These can be very different in size from regular fonts, thus even a small alteration can have a large impact. Even sites that aren’t heavily reliant on fonts are likely to see a slight improvement in their CLS score.
The most common approach for preloading WordPress fonts is to use one of these plugins.
For more sophisticated users, you can also use your own custom code snippet to preload fonts. You’ll need to change your child theme’s header.php file to add this code snippet. On your WordPress site, navigate to Appearance > Theme Editor > Theme Header to edit this file:
Scroll to the bottom of the page in your child theme’s header.php file, then copy and paste the following piece of code, replacing the example font link – roboto.woff2 in this case – with the actual URL to the font file that you’re using on your site:
<link rel="preload" href="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.
Check Out – How to Enable Browser Caching in WordPress
3. Optimize your dynamic content
Finally, let’s talk about the dynamic material on your website. Newsletter registration forms, app install prompts, GDPR notices, and other dynamic content can all cause layout shifts by forcing the browser to reload the page after it has already mostly loaded.
This is true only for dynamic content that isn’t prompted by user interaction. For example, if you use an automatic notification bar to greet visitors on your homepage, your CLS score may suffer.
There are two options for resolving this:
- The dynamic content will only be triggered after a user interaction, which will not affect your CLS score. Instead of displaying the email opt-in form right away, you might have it appear when a user clicks on a button, resulting in a two-step opt-in.
- Similar to what we mentioned earlier, use CSS to set aside space for dynamic elements. You may still load the notification bar at the top of your page without causing layout shift if you use CSS to reserve space for it.
Fix Cumulative Layout Shift in WordPress for good
It’s critical to have a low Cumulative Layout Shift score if you want to provide an excellent user experience and increase your Core Web Vitals score. Fortunately, avoiding this vexing problem isn’t difficult. By paying attention to a few easy changes, you can fix your site’s loading issues.
We looked at three strategies to correct and eliminate Cumulative Layout Shift in WordPress in this article:
- Make sure all of your media and advertisements have obvious measurements.
- Photos you embed in the editor will be handled automatically by WordPress, but you may need to explicitly define dimensions for adverts and any images you put outside the editor.
- To avoid last-minute changes, preload your typefaces.
- Pay care to how you incorporate dynamic content, whether it’s through needing user input or allocating room for any dynamic parts.