Cumulative Layout Shift (CLS) metric measures a user experience event. Cumulative Layout Shift is going to become a new ranking factor. Know what is it and how to optimize for it.
Cumulative Layout Shift (CLS) Definition:
Unexpected shifting of elements of the web page, while the page is still downloading, is CLS. Type of elements that causes the shift are images, videos, fonts, buttons, and other kinds of content. It is important to minimize the CLS because pages that shift around can cause a bad user experience. A poor CLS score is an indication of coding issues that can be fixed.
Reasons Why CLS Happens
- “Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM”
Videos and images need to have declared the height and width dimensions in the HTML. In respect of responsive images, keep in mind that the different sizes for the different viewports make use of the same aspect ratio.
Advertisements Can Cause CLS
One right way to deal with ads that cause the CLS is to style the element where the ads will be displayed. Say if you style the div to have particular heights and width then the ad will follow those. There are two solutions to lack of inventory and when ads do not show up. If in case an element that contains an ad does not show an ad then you can set it so that a placeholder image or an alternative banner ad is used to fill up space.
Recommendation: Google Adds Search Appearance Filters For Recipes To Google Search Console
Another way around, for some layouts where an ad fills the complete row on the top of maybe a column on the left or right gutter of the page, if the page does not display then there will not be a shift. This would not make any difference either on desktop or mobile. But you will have to test your theme layout if in case ad inventory is an issue.
Dynamically Inserted Content
This is the content that is injected into a page. Say, in WordPress, you can link to a YouTube video or any tweet and the WordPress will show up the tweet or video as an embedded object.
Fonts That Are Web-Based
Fonts that are downloaded may cause Flash of invisible text and Flash of Unstyled Text. To avoid this use rel=”preload” in the link to download the font.
How CLS Is Calculated?
It involves two metrics. These are:
Impact Fraction
Impact fraction measures the space that an unstable element takes in the viewport. The viewport is what users see on the mobile screen. When an element is downloaded and then it shifts, the overall space the element occupied, from the point of location it occupied in the viewport when it’s first rendered till the final location when the page is rendered. An example used by Google is an element that occupies 50% of the viewport and then lowers down by another 25%.
When brought together the 75% is called the Impact Fraction and called as a score of 0.75.
Distance Fraction
It is the amount of space the element has shifted from the initial position to the final position. In the example above the page element moved by 25%. So Cumulative score is ascertained by multiplying impact by the distance fraction. That is-
0.75 x 0.25 = 0.1875
How To Measure CLS
Two ways to measure CLS are what Google calls the first one is in the Lab and the other one is Field.
In lab means by simulating a user downloading the website page. Google makes use of the Moto G4 for obtaining the CLS score in the Lab. Lab tools are the best to use to understand how a layout will perform before actually pushing out live to users.
Conclusion
It is important to understand the CLS because this metric will be an important ranking factor in 2021.
2951 
