Cumulative Layout Shift: Improve Google CLS Score

Quick Summary:

The Cumulative Layout Shift (CLS) represents the visual stability of a website. It measures the amount of insignificant layout shifts on a page.

• CLS score is calculated by multiplying the Impact Fraction by the Distance Fraction. Impact Fraction is the amount of space an unstable element takes up in a viewport area between two frames. Distance Fraction is the measure of the space that the page element has moved from the original position to the final position.
• If the CLS score is less than 0.1, it is a good signal. If it is between 0.1 to 0.25, it means your site needs improvement. If the score is above 0.25, it is a poor signal.
• Cumulative Layout Shift metrics can be measured using field tools like Chrome user experience report, Pagespeed Insights and Core Web Vitals report in the Search Console and lab tools, such as Chrome DevTools, Lighthouse and WebPage Test.
• The common causes of CLS include images and videos without dimensions, ads and embeds, dynamically injected content etc.
• Make sure you specify the width and height of your images and videos.
• Fix the ad slot’s size based on historical data.
• Avoid inserting new content above the existing content unless it is in response to user interaction.

Introduction

Have you ever been in a situation where the checkout button vanishes when you try placing an order? 

Yes! It’s frustrating.

The truth is, it happens way too often and with too many of us.

Thankfully, as always, Google prioritizes user experience above everything else.  

This is why it rolled out three performance metrics as a part of its core web vitals in 2021.

The Core Web Vitals are designed to measure loading speed, interactivity, and visual stability of a page.

Three metrics represent these:

1. Largest Contentful Paint (LCP)

2. Interaction to Next Paint (INP)

3. Cumulative layout Shift (CLS)

Let’s understand CLS from both user and webmasters (SEO) point of view.

What is Cumulative Layout Shift?

The Cumulative Layout Shift (CLS) represents the visual stability of a website.

It measures the amount of insignificant layout shifts on a page.

Unexpected layout shifts are the result of a web page moving around itself without user input.

Google CLS is a kind of indicator(Signal) for you to fix the problem by measuring how often an unexpected movement of page elements affects the user experience. 

A shift in a layout can occur any time when a visible element changes its position from one rendered frame to the next.

Let’s try to understand the common meaning and define in simple words “Cumulative Layout Shift”:

Cumulative is an increase in quantity. 

The layout is the Frame

A shift is a change in position

Simply put, Cumulative Layout Shift is a total sum of all individual frame changes in website design positions.

Image sourced from web.dev

The standard CLS score should be below 0.1.

A good threshold to measure the same is the 75th percentile of page loads across mobile and desktop devices.

In the image above, it is clear that  As per Google:

1. If the CLS score is less than 0.1, it is a good signal. It means your site has no issue with any layout shift.

2. If the CLS score is between 0.1 to 0.25, it means your site needs certain improvement in the visual layouts.

3. If the CLS score is more than 0.25, it is a poor signal, which also means that the visual element’s movement is occurring very frequently.

How is Cumulative Layout Shift Calculated?

Google computes the CLS of a page by calculating the impact fraction and distance fraction for each unexpected layout shift.

Impact Fraction of CLS

It measures the amount of space an unstable element takes up in a viewport area between two frames.

Formula to calculate the Impact Fraction for CLS

To Calculate the Layout Shift Score, we need Impact Fraction.

How to calculate Impact Fraction for CLS?

The graphical representation will help you understand impact fractions better.  

Impact Fraction = [Area of Impact Region] / [Area of Viewport] Impact Fraction = [330 x 490] / [375 x 667] Impact Fraction = [161700] / [250125] Impact Fraction = 0.645

Distance Fraction of CLS

It is the measure of the amount of space that the page element has moved from the original position to the final position that basically shifts in layout.

To avoid excessive penalizing cases, shift in large elements by a small amount taken into account by introducing Distance Fraction.

Formula to calculate the Distance Fraction for CLS

How to calculate the Distance Fraction for CLS?

Graphical representation will help you understand distance fraction better. 

Distance Fraction = [Max. Move Distance] / [Height of ViewPort] Distance Fraction = [120] / [667] Distance Fraction = 0.179

Formula to Calculate Google CLS Score

The Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction:

Cumulative Layout Shift (CLS) = Impact Fraction x Distance Fraction 

CLS = 0.645 x 0.179 CLS = 0.1154.

The CLS score keeps rising as the impact and the distance fraction increases. 

Cumulative Layout Shift with a simple example. 

You visited a site and saw something interesting to read.

You go ahead to click on the link.  

But just as you were about to click the link, it shifts down in the web page by half an inch, and you end up clicking on an ad that was placed just above it. 

Source:nitropack.io

Sounds unfair, right?

It’s an unexpected layout shift.

It only means that you will be redirected to some unwanted landing page from where you have to come back to the original web page.

We also have something known as the expected layout shift. 

It happens when you click on something on a web page, and it changes the current layout of the page.

For example, you go to a blog looking for a particular piece of information.

As soon as you enter the topic name in the search bar, it will retrieve a particular blog post where you’ll find the required information or come up with a couple of blog posts related to the topic.

Source: nitropack.io

This is an expected outcome from the web page and can be considered an expected layout shift. 

What Causes CLS Issues? 

As per Google, the search engine giant, there are 5 possible reasons for Cumulative Layout Shift:

Images and Videos without dimensions

It is advisable always to specify the width and height of your images and videos.

You can also utilize CSS aspect ratio boxes to allow the browser to allocate the right amount of space on the web page while the image is loading.

Ads, embeds, and iframes without dimensions

Ad sizes can boost revenue through high CTR.

However, this can compromise the quality of user experience by pushing the content down the page. 

This layout shift can be mitigated by reserving space for ad slots, eliminating shifts by reserving the largest possible size for the ad slot, or choosing the ad slot’s best possible size based on historical data. 

Dynamically injected content

Avoid inserting any new content above existing content, unless it is in response to user interaction.

This will ensure any layout shifts that occur are always expected rather than triggering the image or text to move unexpectedly.

Web Fonts causing FOIT/FOUT

Try using font:display values with your custom fonts like auto, swap, block, fallback, and optional, to prevent unnecessary layout shifts.

To be certain that there is no layout shift, use font:display along with link rel=preload.

Any element that uses that font will be hidden until the font asset has been downloaded fully, is known as FOIT (Flash of invisible text).

Animation source:malthemilthers.com

The display of a fallback font in the font stack until the custom one loads is known as FOUT(Flash of unstyled text).

Actions waiting for a network response before updating DOM

Always go for “transform” animations for animations of properties that trigger layout changes.

How is Google CLS Score Influenced Through Ads?

To deal with ads that cause CLS, you need to style the element where the ad is going to show.

Therefore, if you style div, the image or video division in a WordPress or any website element with a specific height and width measurement, your ad will be constrained within the mentioned dimensions only.

If an element containing an ad doesn’t show the ad, you can set it in a way that an alternative banner ad or a placeholder image can fill the vacant space.

Alternatively, an ad may fill the entire row on the top of a column in the right or left gutter of the page for certain layouts. 

If the page doesn’t show up, there won’t be a shift and it won’t make any difference on mobile or desktop.

However, you should note that it depends on the theme layout and you’ll have to test it out if there’s an issue with the ad inventory. 

How Can CLS Slide During Web Development?

Google CLS can slip through the development stage.

Here’s what can happen.

Many of the assets needed to render a web page are loaded onto a browser’s cache. 

The next time a developer visits the page under development, they won’t notice a layout shift since the page elements are already downloaded. 

It is therefore recommended to have a measurement in the field or the lab. 

Cumulative Layout Shift Test

Cumulative Layout Shift Performance website metrics can be measured in any of the following ways:

Field Tools

In the field: on real users actually interacting with the page. It can be measured using the following Field tools:

Chrome User Experience Report

It provides user experience metrics for how real-world Chrome users experience popular destinations on the web. 

PageSpeed Insights

This tool analyses the content of a web page and generates suggestions to make that page faster than before.

Search Console (Core Web Vitals report)

Search Console shows how your pages perform based on real-world usage data (sometimes called field data).

Lab Tools

In the lab: using tools to simulate a page load in a controlled environment can be measured using the following Lab tools:

Chrome DevTools

Chrome DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately enables you to build better websites faster.

Lighthouse

LightHouse is an open-source, automated tool for improving the quality of web pages.

You can run it against any web page, public, or requiring authentication.

It has audits for performance, accessibility, progressive web apps, SEO, and more.

WebPageTest

Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.

According to the web.dev; Caution: Lab tools typically load pages in a synthetic environment and only measure layout shifts during page load.

As a result, CLS values reported by lab tools for a given page may be less than what real users experience in the field.

Quick Tools to check Cumulative Layout Shift

1. CLS in GIF format from Defaced Tool by Chris Johnson to Identifies the problematic LS.

2. Cumulative Layout Shift calculator 

Flaw in CLS Calculations

Google received feedback about CLS metric being inadequate for measuring web pages that are open for a long time, penalizing them with lower scores.

Google reviewed three solutions for updating how it scored CLS, so there’s nothing to be worried about CLS scores getting worse due to this change.

Session Windows for Measuring CLS

Google went for a session window approach to measure CLS.

The measurement of the page elements is measured in session windows, which corresponds to different parts of a webpage that a user reaches as they scroll down the webpage.

The total scores for each session window is the cumulative layout shift, the total shifting of the entire page.

3% of web pages with infinite scroll or have user interface handlers that are slow to react to user interaction will see their scores rise to a good rating.

Update Makes CLS Scores More Accurate

It’s a benefit for publishers with the new scoring system becoming more fair, particularly for web pages that are open for a long time or employ infinite scroll and were being unfairly scored because of that.

With the Core Web Vitals metrics positioned as a ranking factor, it’s an important change to make.

Conclusion

Understanding Cumulative Layout  Shift (CLS) will help you offer a better user experience in the coming days.

Since the metric is a part of Core Web Vitals to improve UX and is scheduled to become a ranking signal in 2021, it is important to understand its importance and impact on your site.