Google Ranking Factor – Cumulative Layout Shift (2021 News)

photos_on_the_wall

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.

old_negative_with_photos_holded_by_a_man

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.

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 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.

MARTINI_flash_ad_over_the_building

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 for download the web font to prevent this.
Lighthouse can assist you determine the cause of CLS.

man_design_fonts_by_hand_in_notebook

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.

If you want to learn more how to get analyses from Chrome Dev Tools click here and watch the video.

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.

By Sarah Kuhn

Leave a Reply

Your email address will not be published.