Learn what Cumulative Layout Shift (CLS) is, how it occurs, how to monitor it, and why it is a Core Web Vitals measurement.
A Cumulative Layout Shift (CLS) is a Google indicator that shows an event related to the user experience; it became a ranking factor in 2021.
Because of this, it’s important to know what CLS is and how to optimize for it.
What is Cumulative Layout Shift?
CLS refers to the sudden movement of web page elements when the page is downloading. Fonts, photos, videos, contact forms, buttons, and other forms of content have a propensity to induce shift.
It is essential to minimize CLS since pages that move might negatively affect the user experience.
A low CLS score is reflective of correctable coding errors.
Why Google use CLS?
There are five causes for the occurrence of the cumulative layout shift:
1.Images without proportions.
2. Dimensions are missing from advertisements, embeds, and iframes.
3.Content dynamically injected
4.Web Fonts contribute to FOIT/FOUT.
5.Actions wait for a network response before updating the DOM.
Image sizes
The width and height dimensions of images and videos must be stated in HTML. Ensure that the different image sizes for the various screen sizes use the same aspect ratio for responsive pictures.
Adverts May Trigger CLS
This is a little difficult to handle. One way to deal with ads that cause CLS is to design the part of the page where the ad will go.
If you set up the div to have a certain height and width, the ad will only be able to fill those spaces.
You have two options if there’s not enough inventory and no ad appears.
If an element that should show an ad doesn’t, you can set it up to show an alternative banner ad or a placeholder picture instead.
For such layouts where an ad spans a complete row at the top of a right column or left edge of a webpage, there will be no shift if the page doesn’t load. Depending on the theme’s design, it can have a difference between desktop and mobile.
If ad stock is a concern, you will need to test this.
Dynamic Injection of Content
You can link to a tweet or a YouTube video in WordPress, and the video or tweet will be displayed as an embedded item.
Web-Based Fonts
Flash of invisible text (FOIT) and Flash of unstyled text (FOUT) can be caused by downloaded web fonts (FOUT).
Use rel=”preload” in the hyperlink to download the web font to prevent this.
Lighthouse can assist you in determining the cause of CLS.
CLS May Hijack Development
During the development phase, cumulative layout shifts can occur. Some of the assets that are needed to display the website can be loaded into the user’s browser’s cache.
When a developer or publisher goes to the page again, the layout won’t have changed because all of the page elements have already been downloaded.
Calculation of Cumulative Layout Shift
Two metrics or events are used in the calculation. The initial is known as the “impact fraction.”The impact fraction quantifies how much area an unstable element occupies in the viewport.
A smartphone’s screen displays a viewpoint.
When a piece of code downloads, it moves from where it was in the viewport to where it will be on the page. Google gives an example of an element that takes up 50 percent of the viewport and then goes down by another 25%.
Add 75% to obtain the “Impact Proportion,” which is 0.75.
The distance fraction is the second unit of measurement. The distance fraction shows how far an element on the page moved from where it started to where it ended up. In the above example, the webpage element changed by 25%. Calculating the Impact Fraction by the Distance Fraction now yields the Cumulative Layout Score:
0.75 x 0.25 = 0.1875
Further mathematics and other considerations are involved in the calculation. It is essential to note that the score is one method for measuring a vital user experience component.
If you want to learn more about how to get analysis from Chrome Dev Tools, click here and watch the video.
Importance to understand what CLS
It is essential to comprehend the cumulative layout shift. It is unnecessary to know how to perform the computations on your own. However, understanding what it does and how it operates is crucial, as this is now a core Web Vitals rankings criteria.
