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.
Therefore, it is essential to comprehend 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 Cumulative Layout Shift:
1.Images without proportions.
2.Advertisements, embeds, and iframes lacking dimensions.
3.Content dynamically injected
4.Web Fonts contributing to FOIT/FOUT.
5.Actions await a network response prior to DOM update.
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 technique to solve advertisements that create CLS is to design the element where the advertisement will appear.
If you design the div to provide a particular height and width, the advertisement will be confined to those dimensions.
There are two options if there is insufficient inventory and an advertisement does not appear.
If an element having an advertisement does not display an advertisement, you can configure it to display an alternate banner advertisement or placeholder picture.
For such layouts where such 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 don’t load. It makes no difference whether viewed on desktop or mobile. However, this relies on the theme’s design.
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.
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 for download the web font to prevent this.
Lighthouse can assist you determine the cause of CLS.
CLS May Hijack Development
During the development phase, cumulative layout shifts can occur. Several of the assets required to render the website may be loaded into the cache of the user’s browser.
The next moment a developer or publisher accesses the page in development, they will not observe a change in layout since the page elements have already been downloaded.
Calculation of Cumulative Layout Shift
Two metrics/events are used in the calculation. The initial is known as Impact Fraction.
The impact fraction quantifies how much area an unstable element occupies in the viewport.
A viewpoint is what is displayed on a mobile device’s screen.
When a component downloads and afterwards shifts, the entire space occupied by the element from its initial position in the viewport to its final position when the webpage is shown.
Google provides the example of an element that fills fifty percent of the viewport and subsequently decreases another twenty-five percent.
The 75 percent value, when added together, is known as the Impact Proportion and is represented as a value of 0.75.
Distance Fraction is the second unit of measurement. The distance fraction represents the distance traveled by the page element from its initial position to its final position. In 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
There is further mathematics and other considerations involved in the calculation. Essential to note is that the score is one method for measuring a vital user experience component.
Importance to understand what CLS
It is essential to comprehend Cumulative Layout Shift. It is unnecessary to know how to perform the computations on your own. However, understand what it does and how it operates is crucial, as this is now a Core Web Vitals rankings criteria.