Are you having problems with cumulative layout shift (CLS) 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” as it loads, you’ve experienced the layout shift, and you also know how annoying the 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 have to be a tech wizard to identify and fix cumulative lyout shift problems. By understanding the causes and knowing how to correct them, you can reduce the number of unexpected changes on your website.
In this article, we will introduce you to Google’s cumulative layout shift metric and show you how to detect CLS problems on your site. Then, we will guide you through three simple ways to fix the problems and reduce your site’s CLS score.
What is cumulative layout shift
Layout shift occurs when page content shifts without user interaction.
A common example is late-loading advertisements, which you have probably encountered on multimedia websites. You may have started reading text on the page only to be “pushed” down by an advertisement that is displayed after the page has already loaded.
Cumulative layout shift is a metric that measures all the layout shift that occurs on the page and puts it into a single score. In general, a high score indicates many layout shifts (not good), while a low score indicates few layout shifts (good). And a score of zero means your site has zero layout shifting problems, which is perfect.
As you can imagine, moving elements around can generate headaches for your users. there is a risk that they will inadvertently click on a part of your page or even accidentally make a purchase.
Although there are no direct consequences, many layout changes can be visually annoying. They can also slow down loading times. This seemingly minor problem can have serious repercussions on the user experience (UX) of your audience .
Unfortunately, the problems with a high Cumulative Layout Shift score do not end there. Cumulative Layout Shift is also part of Google’s new Core web Vitals initiative. Starting with the Google Page Experience update, your site’s Core web Vitals scores are now an SEO ranking factor, which means that problems with CLS can affect your site’s ranking .
How to identify problems with cumulative layout shift in WordPress
To find out your site’s Cumulative Layout score and identify problems, we recommend using PageSpeed Insights . It will give you your site’s overall CLS score, but it will also go deeper and flag specific layout shift issues that are causing problems.
To begin, enter your URL in the box and click Analyze . The process should take only a few moments. When you receive the results, scroll down to and look for your site’s cumulative lyout shift score:
From here, you can determine your site’s performance in this area. As a rule of thumb, there are three potential ranges into which your CLS score can fall:
- Good , which is 0.1 or less
- OK , which is between 0.1 and 0.25
- Bad , which is 0.25 or more
Since this metric directly affects the optimization of your Core web Vitals , you should try to aim for as low a score as possible. For more specific suggestions on how to do this, you can scroll down to the Diagnostics section and look at Avoid Significant Layout Changes . This section will list individual layout changes on your site:
This information can help highlight specific areas of your site that may need some work. Once you’ve identified the problem, you can apply some simple methods to fix it.
How to fix cumulative layout shift in WordPress (3 ways)
Let’s take a look at three effective ways to fix CLS problems. These methods are most effective when used together, so we encourage you to try each approach.
- Add dimensions to your images, videos, and ads
If you have different media on your website, chances are that each image and video will have different sizes. This is probably unavoidable, regardless of the type of site you run.
In essence, this variance has no direct impact on your CLS score. However, it still poses a threat: if you do not specify the size of the article, you can run into problems.
Adding dimensions is essential because it provides vital loading instructions to browsers. Size information helps browsers reserve the correct amount of space for that resource.
If the browser is unable to do this, it may be predicting the wrong amount of space. As a result, there may be corrections after the page has loaded, leading to a shift in layout. The same principle applies to ads or any material embedded in 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 media:
Se aggiungi immagini manualmente con il codice o tramite un plugin, assicurati che le dimensioni dell’immagine siano presenti.
Un altro problema con il CLS su WordPress è la pubblicità. Se inserisci annunci pubblicitari nei tuoi contenuti , dovrai assicurarti di riservare spazio a tali annunci per evitare CLS.
Un modo per farlo è applicare le proprietà CSS min-height e min-width al contenitore
che contiene il tuo annuncio: Google ha una guida su come farlo .
Se ad esempio, visualizzi un annuncio 300x250px all’interno di un div con l’id in-content-ad, puoi prenotare spazio utilizzando questo codice:
INSERIRE IL CODICE DELL’ANNUNCIO QUI
Alcuni strumenti pubblicitari potrebbero anche offrire strumenti per aiutarti a raggiungere questo obiettivo. Ad esempio, se utilizzi Google Ads , Google fornisce un editor di annunci per aiutarti in questo.
- Preload your fonts.
Just as with media, your site probably uses different types of fonts. This means they can also take up varying amounts of space. Unlike media, however, you cannot set exact sizes for fonts.
Instead, the solution is to preload these resources. Preloading fonts signals to browsers that it should be one of the first things it generates for a given page. By including fonts first, you eliminate the need for corrective shifting.
This method can be especially critical if you use many custom WordPress fonts . These can vary greatly in size from normal fonts, which means that this simple change can have a big impact. However, even less font-dependent sites are likely to experience at least a slight improvement in CLS score.
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 easiest way to preload WordPress fonts.
More advanced users, can also preload fonts with custom code snippets. To add this code snippet, you will need to edit the file header.php your child theme . You can edit this file by going to Appearance > Theme Editor > Theme Header on your WordPress site:
After 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 sample font link, roboto.woff2 in this example, with the actual link to the file font you are using on your site:
When you are ready, click Update File to save your changes. That’s all you have to do: now your website fonts will have priority loading in browsers.
- Optimize your dynamic content
Finally, let’s talk about your site’s dynamic content. Dynamic content such as newsletter sign-up forms , app installation requests, GDPR notices, and so on can all cause layout changes by adjusting the browser again after the page is almost fully loaded.
However, this only applies to dynamic content that is not triggered by user interaction. For example, if you are loading an automatic notification bar to greet people on your home page, this could hurt your CLS score.
There are two ways to solve this problem:
1.Activate dynamic content only after user interaction, which will not affect your CLS score. For example, instead of showing the email activation form right away, you could activate it when a user clicks a button to create a two-step consent.
2.Use CSS to reserve space for dynamic elements, similar to what was discussed above. For example, if you use CSS to reserve space for the notification bar at the top of the page, you can still load that bar without causing the layout to shift.
Fix CLS in WordPress Forever.
If you want to create a good user experience and improve your score in Core web Vitals, it is important to have a low Cumulative Layout Shift score. Fortunately, preventing this annoying problem is not difficult. You can correct your site’s loading problems by paying attention to a few simple settings.
In this article, we covered three ways to correct and reduce cumulative layout shift in WordPress:
1.Make sure all your media and ads have clearly defined dimensions. WordPress will automatically handle the images you embed in the editor, but you may have to manually define sizes for ads and any images you add outside the editor.
2.Preload your fonts to avoid last-minute changes.
3.Pay attention to how you implement dynamic content, requiring user interaction or reserving space for any dynamic elements.