Cumulative Layout Shift: Improve Google CLS Score
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 will roll three new performance metrics as a part of its core web vitals, starting in 2021.
The Core Web Vitals is designed to measure loading speed, interactivity, and visual stability of a page.
Three metrics represent these:
1. Largest Contentful Paint (LCP)
2. First Input Delay (FIP)
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 more than 1.0, it is a good signal. It means your site has no issue with any layout shift.
2. If the CLS score is between 1.0 to 0.25, it means your site needs certain improvement in the visual layouts.
3. If the CLS score is less 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 =  /  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 =  /  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.
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.
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).
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:
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.
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).
In the lab: using tools to simulate a page load in a controlled environment can be measured using the following Lab tools:
Chrome DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately enables you to build better websites faster.
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.
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
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.