In late May, 2020 Google announced an initiative to better user experience on website pages. User experience in the next coming months will begin to act as a factor for ranking on the Google search engine.

In line with this new development, The Google PageSpeed Insights tool added a new metric called cumulative layout shift. In this guide, we're going to go over what Cumulative Layout Shift is, what may impact your scores, and what a low score in Cumulative Layout Shift actually is.

What is Cumulative Layout Shift?

To understand what Cumulative Layout Shift actually is, let's breakdown the actual term. Layout shift refers to the movement of a webpage after loading. An example that Google gives is if you're reading an article, you don't want any of the text or elements to suddenly shift when you're halfway through reading, as you'll lose your spot and have to Figure out where you just were. Another example would be if you're going to click on a button, and it suddenly shifts an inch up on the screen, you'd miss clicking the button, resulting in a poor user experience.

This is a great example of a layout shift causing a negative user experience, created by Google:

The unsolicited movement of elements and buttons on web pages is actually fairly common, and you'll probably experience it when browsing the Internet today. Layout shift results in a poor user experience, and minimizing it as much as possible is essential to scoring high in the Cumulative Layout Shift metric on Google PageSpeed Insights.

Now that we understand what layout shift is, and why it may be a detriment to user experience, let's understand what Cumulative Layout Shift is.

The official Google definition of CLS is:

Cumulative Layout Shift (CLS) - a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don't occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.

To clarify, Google will manipulate movement in the page, and then measure how much individual elements shift.

This generates layout shift scores for every unexpected layout shift. If we want to become technical on how Google actually calculates this metric, it uses this equation:

layout shift score = impact fraction * distance fraction

Each of these fractions are calculated based on the elements movement in relation to the size of the viewport. If you would like to learn more, you can read the Google documentation on CLS here https://web.dev/cls/.

Keep in mind, that because mobile phone screens are smaller, layout shifts are usually more impactful on phones. Because Google is really pushing a mobile first agenda, one can reasonably expect that getting Cumulative Layout Shift right on mobile devices is absolutely essential to Google giving you a score in this regard.

Google assigns a sign a shift score to each individual element, and then adds all of them up to get cumulative layout shift. Here's a great graphic that explains how Google calculates cumulative layout shift.

Cumulative Layout Shift Scoring

When scoring CLS, any score under 0.1 is good, while any score over .25 is bad.

Good Layout Shifts

It is important to understand that layout shifts may not always be bad. Obviously, if something moves on the screen without the user's input, disrupting their reading or experience on your website, then that's bad. But, if the layout shift is user initiated (like a loading bar that slides in from the top of the page after a user clicks a button, resulting in a layout shift as it pushes content down the screen), then that may actually be beneficial to the user experience as it provides them relevant information.

Google understands this, and will exclude any layout shifts that occur within 0.5 seconds of user input. So back to our example, if the user clicks a button on a page, our loading bar has half a second to display. If it displays within that half a second, then this layout shift is excluded from our score.

Speed & Responsiveness Are Essential

The 0.5 seconds figure is an important one to note. If you have a slow performing website, even if your user is toggling the layout shift, but it doesn't occur within 0.5 seconds, you will be penalized for this. That means that in the coming months, optimizing your websites for speed is essentially important to scoring a good Cumulative Layout Shift score in Google PageSpeed.

Animations & CLS

You may be wondering, but what about animations? Animations can definitely further user experience if incorporated into a website correctly. Again, Google understands this, but this time gives more limiting guidelines on how to implement them. Google states:

• Instead of changing the height and width properties, use transform: scale().
• To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.

This section of this guide should have answered what Cumulative Layout Shift is, what a good score in Cumulative Layout Shift would be, and the factors that go into calculating this new metric On Google pagespeed.

Now let's talk specifically about what you need to do to achieve a high Cumulative Layout Shift score.

How To Score High With CLS

To understand how to score high with cumulative layout shift, we first need to understand the main causes of a poor score. After identifying these causes, you can run through your website and make the required fixes. Fixing these common causes of a poor Cumulative Layout Shift score will instantly boost your user experience, page delightfulness , and scoring in this metric.

If you don't want to read through this section, the most essential thing you can do to score high with your Cumulative Layout Shift metric on PageSpeed is the following:

Reserve sufficient space in the viewport for everything in your webpage.

Fix Dimensionless Images

The first thing that you want to go and check for are images without dimensions. If you don't specify the width and the height of an image, when your page loads the browser will not allocate any space for the respective image. Once your image loads, which takes slower because it has a much larger file size than CSS and HTML , it will then push content up and down resulting in a layout shift.

In this example graphic, the page loads all of the text first. The image loads afterwards, in the middle of the text, which causes the content to split and be pushed up and down as it needs to make room for the image. That is the textbook definition of a layout shift, and because it's not caused by user input, it will negatively impact your Cumulative Layout Shift score.

You can't change the fact that text will load quicker than images, but you can make it so the text is pre split, even before the image loads. If there's space for the image to load into, it won't need to push content up and down the page.

Note: with most WordPress applications, image width and height is specified/aspect ratio and will not cause layout shifts. If not using WP, read on to learn about ways you can eliminate layout shift caused by images.

You can do this by using CSS to specify width and height tags. However, this may be detrimental for responsive design. A good alternative would be to specify the aspect ratio, which the browser would use to calculate the width and the height of the image on page load. That means the image would have a place to load into, and wouldn't cause any layout shifts.

Specifying a standard aspect ratio for your images using CSS is fairly easy to do:

img {
aspect-ratio: attr(width) / attr(height);
}

With this, all you need to do is that a single dimension (height or width), and the other dimension will be calculated in accordance with the aspect ratio.

Also, if you put your image in a container, you can responsively size it:

img {
height: auto;
width: 100%;
}

There are a lot of specific ways to make sure that slow loading images don't cause layout shifts, but the abovementioned CSS is a good starting point.

Again, with most WordPress applications, image width and height is specified and will not cause layout shifts.

Focus on iFrames & Ads

iFrames and advertisements work very similarly to images, and that you need to specify the width and the height for the browser to allocate the necessary space for them unload. If you don't specify the width and the height, these elements, which loads slower than the content and structure of the page will cause a layout shift.

Going a step further, dynamic ads may change their dimensions unless you force them to maintain a standard form.

Basically, for any page element that load slower than the actual page, or changes dynamically, all you need to do is reserve space for it via CSS , so it doesn't push content out of the way. As long as the element has enough space to load into, then you don't need to worry about CLS.

Load Fonts quicker (address both FOUT & FOIT)

Flashes of unusable text, and flashes of invisible text both cause layout shifts, and are detrimental to your aggregate layout shift score.

This is because the individual letters and spacing of them are different between the default browser fonts, and the fonts that you are choosing to use on your website. If your font is slow to load, when it does, it will cause layout shifts throughout the page (As it takes up more space).

The main thing to know about this is that you can minimize this as much as possible, but you may never be able to eliminate layout shifts that are caused by loading fonts. This is because fonts are necessary for your branding (you can't just be using Times New Roman), And when they load they will change the layout of the page.

If you preload your fonts (rel=preload), they are pushed higher in the loading order of the page when rendering. Because they load before other elements, the layout shift is extremely minimized.

So the best way to address fonts is to preload them, and use font display: optional. The name of the game: faster fonts = better cumulative layout scores.

Refine Animations

The final thing you need to think about are animations. Google recommends using the transform(scale) property in CSS

Animations are extremely complex, so we're going to be writing another blog post on these in the future. If you want to see all of the animations and their impact on layout, head over to this really handy guide created by Google:

https://csstriggers.com/

Summary

So let's summarize everything mentioned in this blog post. The first thing is that Cumulative Layout Shift is the aggregate score of all layout shifts in the page. Layout shift is when an element causes an unsolicited movement of content in the page.

A poor score is anything above a 0.25, which means that there's a lot of layout shift in your page and the user experience is negatively impacted by this.

At the same time, Google can identify layout shifts that are triggered by users, and excludes them from this score as long as they occur within half a second of user input.

Increasing Cumulative Layout Shift score is important because it not only leads to a better page speed score, But in the coming months Google will use it to help them calculate the user experience of the page. User experience will soon be a direct influence to Google's ranking of your website, and search engine placement, so addressing this now is important.

What it boils down to: you need to have everything load as fast as possible, and allocate the necessary amount of space to slow loading elements.

The most common causes of unwanted layout shifts are images and slow loading content.

And that, is the secret sauce to achieving a high cumulative layout score in Google pagespeed.

Conclusion

This blog post should have given you a good introduction to what cumulative layout score is, the scoring behind it, and methods you can take to improve this metric on Google PageSpeed.

As always, if you have any questions feel free to reach out in the comments.

Furthermore, our subsidiary SpeedOpp, that’s created to exclusively address low Google PageSpeed scores is currently piloting a program that directly increases low CLS scores. If you have a low cumulative layout score, and you don't want to spend the time fixing it yourself, reach out and we'd love to discuss this new offering with you.