Cumulative Layout Shift explained: How to Fix Your Score (r)

Struggling with Cumulative Layout Shift issues on your site? Are you unsure of what Cumulative Layout Shift actually is?

Cumulative Layout Shift or CLS in short, is a metric which is part of Google's Core Web Vitals initiative.

In simple terms, it is a measure of how often the content on a website changes "unexpectedly". An excessive CLS score could suggest a negative user experience and can even affect your site's SEO.

In this article, you'll learn everything that you should learn about Cumulative Layout Shift, and how it affects WordPress websites (and all websites in general).

What exactly is Cumulative Layout Shift (CLS)? The explanation of the Cumulative Layout Shift Meaning

To understand what Cumulative Layout Shift meaning, it's important to consider the concept of layout shifts in general.

A layout shift happens whenever content on your website "moves" or "shifts" suddenly.

If you want to put it in terms of technical terminology it's when any object that is visible in the viewport changes its start position during two frames.

An example of this is that you're in the middle of reading a block of text...but the late loading ad is suddenly displayed and starts pushing your text on the page.
 
 Here's a different example taken from Google that showcases this happening:

It is likely that you have seen layout changes when surfing on the internet, even if you don't recognize them as such.

One visit may have multiple separate layout shift events. Therefore, this Cumulative Layout Shift measurement aims to show the entire picture by measuring the total amount of layout changes that are unexpected on a single page.

*The precise measure may be slightly more precise following some tweaks made by Google However, that's the fundamental idea. If you're looking for the particulars of the measure, find out more here.

Why Is Cumulative Layout Shift Bad?

It's at best uncomfortable for visitors. Worse, it may lead visitors to take things they do not want to do.

For example, imagine if a user wants to click "Cancel" but instead clicks "Confirm" because a layout shift moved where the buttons were right as the person was pressing.

Basically solving any Cumulative Layout Shift issues with your website can make your site more user-friendly for human users as well as the search engines.

What could be causing Cumulative Layout Shift? Let's look at that later...

What causes a shift in the layout of the cumulative layer?

Here's a quick rundown on the most frequent causes of shifting layouts:

• Not setting dimensions for videos, images, Iframes or any other embeds.
• Dynamically injecting content through plug-ins (cookie consent notices, lead generation forms, and so on. ).
• Making animations with no CSS Transform property.

We'll go into these issues further in depth later in this post in which we will show you how to resolve each issue.

How To Measure Cumulative Layout Change: The Best Testing Tools

There are a number of software tools you can employ to evaluate your website's Cumulative Layout Shift Score.

These are the top Cumulative Layout Shift tests tools that stand out for their usefulness...

PageSpeed Insights

PageSpeed Insights is among the most effective tools available for assessing the state of your site's layout shift because it provides you with two data sources:

• Field dataactual user information taken from data from the Chrome UX report (assuming the site is able to generate enough traffic to be included within the reports). This lets you get the exact Cumulative Layout Shift data of your human visitors. It is also the information which Google utilizes as a ranking signal.
• Lab data is simulated test data which is collected through Lighthouse (which is the data PageSpeed Insights uses to generate the reports it uses to analyze performance).

Additionally, you can view your data from both devices, mobile and desktop by switching between the tabs.

Notethat the data from the lab is only able to measure layout shifts that occur during the page load and your actual results could be slightly different when you experience changes in layout that happen after the page load.

Chrome Developer Tools

The first step is to conduct the Lighthouse audit and see the site's CLS score. Here's how:

1. Open Chrome Developer Tools.
2. Visit the Lighthouse tab.
3. Create your test.
4. Click the Analyze page load button to conduct the test.

After a brief wait, you should then be able to access the normal Lighthouse Audit interface (which appears a lot similar to the PageSpeed Insights).

However, Chrome Developer Tools also lets you explore CLS by providing rendering analysis. You can highlight specific layout regions that shift on your website. This aids in identifying the issue.

Here's how:

1. Click the "three dots" icon in the top-right part of the Chrome Developer Tools interface.
2. Click Other Toolsand then Rendering and it will open an entirely new screen towards the bottom.
3. Check the box for the Layout Shift Regions.

Reload the page that you want to test and Chrome will highlight regions that have layout shifts by using a blue box. The highlights will be visible on the page itself as the content is loading and disappear after the shift is finished.

If the highlights occur far too quickly to be able to follow them, slow down your site and then watch it load frame by frame using the Performance tab.

Google Search Console

While Google Search Console cannot allow test labs to identify Cumulative Layout Shift, it does give the user an easy method to identify issues with Cumulative Layout Shift on your site, in accordance with Chrome UX. Chrome UX Report.

Here's how you can spot potential issues on your site:

1. Start the Web Vitals Core Web Vitals report, which is located under the heading Experience.
2. Simply click Open Report next to the Mobile or Desktop, depending on what you want to analyze.

NoteYou'll only get information here if your website has enough monthly traffic to make it into the Chrome UX report.

Layout Shift GIF Generator

The name implies that the Layout The Shift GIF Generator generates an GIF that shows the layout changes within your site, so you can see exactly what web pages are creating issues. It will also give you your score, although this isn't the primary goal of this tool.

Simply add the URL that you want to test and then select either mobile or desktop. It will then create the GIF of your website highlighted in green to show the exact elements that are moving.

When you can see which components shift and contribute to the Cumulative layout Shift score, you will determine exactly what to do in order to improve your site's score.

What's a good cumulative Layout Score?

According to Google's Core Web Vitals initiative, the ideal Cumulative Layout Shift score is 0.1 and less.

If you're Cumulative Layout Shift Score is somewhere between 0.1 and 0.25, Google defines that as "Needs improvement".

And if your Cumulative Layout Shift score is over 0.25, Google defines that as "Poor".

Here's an image taken from Google's Core Web Vitals website that showcases these scores visually:

What can I do to fix the Cumulative Layout Shift within WordPress (or other platforms)

Now that you understand the causes of Cumulative Layout Shift, it's time to shift into some concrete tips for how to correct Cumulative Layout Shift in WordPress.

Though these advices do come from a WordPress viewpoint, each of them are universal which means you can apply them to other website-building tools.

Always indicate the Dimensions of Images

To avoid this issue, you should specify the image's dimensions within the code in the embed code. So, the viewer's browser will reserve that space even if it hasn't loaded, so it won't be required to relocate content.

Are you interested in knowing how we increased our traffic over 1000 percent?

Join 20,000+ others who receive our weekly newsletter that contains insider WordPress advice!

The HTML code for a basic embedding image looks like this:

To specify its dimensions, include height as well as the width parameters. This is an example of the way that might look like for a 600x300px image:

width="600" height="300">

Make sure to specify the dimensions for videos or iframes. Also, don't forget to specify the dimensions for other Embeds

Like with pictures, it is also necessary to specify dimensions whenever you're adding videos, iframes, or any other type of embed.

The majority of embed software on websites are able to automatically define the dimensions of the embed.

This is also true for many other products and services.

However, if your embed code does not specify the height and width it is possible to manually include these dimensions in your embed code.

Correct and optimize Font Loading

issues with font loading or optimization are a common source of layout shifts via two potential issues:

• Flash of invisble text (FOIT)- The page loads initially without any text appearing in any way. After the custom font has loaded it appears as if the text has appeared (which can cause existing content to move).
• Flash that displays text unstyled (FOUT) - the text content loads using an unstyled font that is system-wide (unstyled). When the font you have chosen loads it changes the font to the font of your choice, which can cause content to shift because the font size and spacing may differ.

To avoid these issues it is essential to improve the speed at which you load fonts to your site (which can also have some positive effects on the speed of your site).

Host Fonts Locally and Preload Fonts

If you store fonts locally by preloading them, you instruct browsers of visitors to give more priority to loading fonts that are custom.

By loading font files ahead of other resources, you'll be able to make sure that font files will be loaded when the browser starts rendering your content. This can prevent issues with FOUT and FOIT.

You can also manually preload Fonts manually by adding this code to the head part of your website.

Here's an example of the code. Be sure to substitute it with the real location of the name of the font that you want to preload:

Make Font-Display Optional or Swap

CSS Font-Display Property CSS Font-Display property allows you to control the display behavior of fonts that you display on your website. It also lets you avoid FOIT.

Essentially, it lets you make use of a fallback font for situations where your custom font isn't loading yet.

Two main choices that you can use to address CLS:

• Swap Uses as a fallback font whilst the custom font is loaded but then it changes to the custom font after the font is loaded.
• Optionalis a feature that lets the browser determine whether or not to utilize a font that is custom dependent on the speed of the visitor.

If you are using Swap it is possible for the browser to constantly change to the custom font once it loads.

While Swap is a complete solution to FOIT, it could cause FOUT. To minimize this, you should make sure that your fallback font has exactly the same spacing as your custom font (at at the very least possible). So, even in the event that the style of font changes it won't cause layout shifts because the spacing will remain exactly the same.

When you enable Optional The browser will give the custom font 100 ms to load. But, if the desired font isn't available by then, the browser will just stick with the fallback font and not change it to the custom font for that web page ( it will use the font that it has created for future pageviewssince it's more probable that the font was downloaded and stored by then).

While optional can solve both FOIT and FOUT, the downside is that the visitor might remain with the default typeface for the first time they visit.

If you're at ease working using CSS it is possible to modify the font-display property manually in the stylesheet for your child theme.

If you don't feel comfortable doing that, you can look for plug-ins that can help:

• Swap Google Fonts Display - easily enables Font-Display Swap to Google Fonts.
• Asset CleanUp Supports Google Fonts for free and personalize local fonts using the Pro version.
• Perfmatters - offers a feature that works with Google Fonts.

To complex? Consider an System The Font Stack!

If all this talk of preloading and font-display can be somewhat confusing, an quick fix is to use a system font stack instead of a customized font stack.

Although this will limit your design options, it will completely solve Cumulative Layout Shift font problems FOIT, FOIT, and FOUT. Additionally, it can help your site load much faster.

If you're interested by this information, take a look at Brian's article on how to use a system font stack on WordPress.

Create a space for ads (if using Display Ads)

If you're using display ads, it's important that you make space inside your site's code. It's the same principle of reserving space to images, videos, and embeds.

However, display ads deserve attention because they are very typical to display slow-loading ads in the case of making use of any kind of bidding technology. This is because the bidding system requires the time needed to think about and determine which ads to display.

To optimize AdSense for Cumulative Layout Change, it's trickier.

A common solution is to include a div> wrapper element around each ad unit that specifies a minimum height, using the min-heightCSS property. Additionally, you can utilize media queries to modify the minimum height according to a user's device.

Google suggests setting the min-height equal to the largest possible ad size. While this might result in an inefficient space when a smaller ad is served but it's the ideal solution for eliminating any chance of a layout shift occurring.

Here's what the CSS may be like:

And then here's what the AdSense embed may look to look like:

In the frontend, you'll be able to see that the site has space reserved for the advert, even though it's empty:

Be aware when injecting dynamic Content Using Plugins

Although this is a good thing for you to do it, you'll need to be careful to avoid making it in a manner that causes layout shifts.

It is better to place the announcement at the bottom of the page, which will avoid shifting down your content.

If you want to determine if the any dynamic content may be causing issues, use the visualization tools from above (e.g. The Layout Shift Generator).

If you find that the some content in a particular plugin is triggering layout shifts, it is possible to adjust those settings, or changing to a different plugin.

As an example, certain cookies consent plugins work superior to others when it comes to layout shifts It's therefore worth playing around using different software if you're having problems.

Make use of the CSS Transform Property for Animations When it is possible

If you're using animations for your website, they could be another common culprit for layout shifts.

To prevent issues caused by animations causing layout shifts, make sure to utilize this CSS Transform tool to make animations instead of alternative methods:

• Rather than using the properties of height as well as width properties, use transform: size()
• If you'd like to move elements around, try using transform to translate() rather than top, bottom right, or left

This is more of an technical point, so it's unlikely that you'll require this unless you're adding to your own CSS. To learn more, you can read Google's page on CLS and animations/transitions.

Summary

If your website is displaying a high Cumulative Layout Shift score, you need for you to address it for a better user experience for the human users and also to boost your site's ranking in Google's results.

Two of the most common problems are the lack of dimensions for embeds/images, as well as issues with the loading of fonts. If you can fix these problems, you'll be well on the way to getting more favorable score.

• It is easy to set up and manage the My dashboard
• 24/7 expert support
• The best Google Cloud Platform hardware and network, that is powered by Kubernetes for maximum scalability
• Enterprise-grade Cloudflare integration that improves speed and security
• The global reach of the audience is enhanced by as many as 35 data centers as well as 275+ PoPs worldwide