Are exchanged or reciprocal links okay with Google?
Etmagnis dis parturient montes, nascetur ridiculus mus. Donec lorem ipsum dolor sit amet, et consectetuer adipiscing elit. Aenean commodo ligula eget consyect etur dolor.

Contact Info

(+888)-123-4587

121 King St, Melbourne VIC 3000, Australia

info@example.com

Folow us on social

Cumulative Layout Shift – Overview of 2021 Google Ranking Factor

Cumulative Layout Shift - Overview of 2021 Google Ranking Factor

Cumulative Layout Shift (CLS) is a Google metric that measures a user experience event and became a ranking factor in 2021.

This means that it is important to understand what CLS is and how to optimize it.

Definition of cumulative layout change

What is cumulative layout change?

CLS is the unexpected move of web page elements while the page is still being downloaded. The kind of elements that tend to cause shifts are fonts, images, videos, contact forms, buttons, and other types of content.

Minimizing CLS is important because switching pages can cause a bad user experience.

A bad CLS score is a sign of coding problems that can be solved.

Advertising

Continue reading below

Why CLS happens

According to Google, there are five reasons why cumulative layout changes:

Images without dimensions. Ads, integrations and iframes without dimensions. Dynamically injected content. Web fonts that cause FOIT / FOUT. Actions waiting for a network response before updating DOM.

Images and videos must have the height and width dimensions specified in HTML. For responsive images, make sure that the different image sizes for the different display fields use the same image format.

Advertising

Continue reading below

Google recommends using AspectRatioCalculator.com to calculate the aspect ratio. It is a good resource.

Ads can cause CLS

This one is a little difficult to handle. One way to handle ads that cause CLS is to style the item in which the ad should appear.

For example, if you arrange div to have a certain height and width, the ad will be limited to them.

There are two solutions if there is no stock and no ad is displayed.

If an item containing an ad does not display an ad, you can set it to use an alternate banner ad or placeholder image to fill the space.

Alternatively for some layouts where an ad fills an entire row at the top of perhaps a column to the right or left gutter of a web page, if the page does not appear there will be no shift. It will not make a difference either on mobile or desktop. But it depends on the layout of the theme.

You will need to test it if ad inventory is an issue.

Dynamically injected content

This is content that is injected on the web page.

For example, in WordPress you can link to a YouTube video or Tweet, and WordPress displays the video or tweet as an embedded object.

Advertising

Continue reading below

Web-based fonts

Downloaded web fonts can cause what is called Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT).

One way to prevent this is to use rel = “preload” in the link to download this web font.

Lighthouse can help you diagnose what causes CLS.

CLS can sneak in during development

Cumulative layout changes can slip through during the development phase. What can happen is that many of the assets needed to render the page are loaded into a browser’s cache.

The next time a developer or publisher visits the site under development, they will not notice a layout change because the page elements have already been downloaded.

Advertising

Continue reading below

Therefore, it is useful to have a measurement in the laboratory or in the field.

How to calculate cumulative layout change

The calculation involves two metrics / events. The first is called the Impact Fraction.

Effect fraction

Stroke fraction is a measure of how much space an unstable element takes up in the viewport.

A viewport is what you see on the mobile screen.

When an item is downloaded and then replaced, the total space the item occupied from the place it occupied in the viewport when it was first rendered to the final location when the page was rendered.

Advertising

Continue reading below

The example that Google uses is an item that takes up 50% of the viewport and then drops by a further 25%.

When added together, the 75% value is called Impact Fraction, and it is expressed as a score of 0.75.

Distance fraction

The second measurement is called Distance Fraction. The distance fraction is the amount of space the side element has moved from the original position to the final position.

In the example above, the page element moved 25%.

So now the cumulative layout score is calculated by multiplying the power fraction by the distance fraction:

0.75 x 0.25 = 0.1875

There are some more maths and other considerations that go into the calculation. What is important to take away from this is that the score is a way of measuring an important user experience factor.

Advertising

Continue reading below

How to measure CLS

There are two ways to measure CLS. Google calls the first way in the Lab. The second way is called in the field.

In the lab, that means simulating an actual user downloading a web page. Google uses a simulated Moto G4 to generate CLS scores in the lab environment.

Lab tools are best for understanding how a layout can work before it is sent live to users. It allows publishers to test a layout for issues.

Lab Tools consists of Chrome Dev Tools and Lighthouse.

Understand cumulative layout change

It is important to understand cumulative layout change. It is not necessary to understand how to perform the calculations yourself.

Advertising

Continue reading below

But understanding what it means and how it works is key, as this has now become part of the Core Web Vitals ranking factor.

Featured Image Credit: Paulo Bobita

    Leave Your Comment

    Your email address will not be published.*