Cumulative Layout Shift (CLS) is a Google metric that measures a user experience event. This metric is said to become a ranking factor in 2021. That means it’s important to understand what CLS is and how to optimize for it.

Definition of Cumulative Layout Shift

CLS is the unexpected shifting of web page elements while the page is still downloading. The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons and other kinds of content.

Minimizing CLS is important because pages that shift around can cause a poor user experience.

A poor CLS score is indicative of coding issues that can be solved.

Why CLS Happens

According to Google there are five reasons why Cumulative Layout Shift happens:

1. “Images without dimensions
2. Ads, embeds, and iframes without dimensions
3. Dynamically injected content
4. Web Fonts causing FOIT/FOUT
5. Actions waiting for a network response before updating DOM”

Images and videos need to have the height and width dimensions declared in the HTML. With regard to responsive images, make sure that the different images sizes for the different viewports use the same aspect ratio.

Google recommends using AspectRatioCalculator.com to calculate the aspect ratios. It’s a good resource.

Ads Can Cause CLS

This one is a little tricky to deal with. One way to deal with ads that cause CLS is to style the element where the ad is going to show.

For example, if you style the div to have specific heights and width then the ad will be constrained to those.

There are two solution if there’s a lack of inventory and an ad doesn’t show up.

If an element containing an ad does not show an ad you can set it so that an alternative banner ad or placeholder image is used to fill the space.

Alternatively, for some layouts where an ad fills an entire row on the top of perhaps a column on the right or left gutter of a web page, if the page does not show up there won’t be a shift, it won’t make a difference either on mobile or desktop. But that depends on the theme layout. You’ll have to test that out if ad inventory is an issue.

Dynamically Injected Content

This is content that is injected into the web page. For example in WordPress you can link to a YouTube video or a Tweet and WordPress will display the video or tweet as an embedded object.

Web Based Fonts

Downloaded web fonts can cause what’s known as Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT).

A way to prevent that is to use rel=”preload” in the link for downloading that web font.

Lighthouse can help you diagnose what is causing CLS.

CLS Can Sneak in During Development

Cumulative layout shift can slip through during the development stage. What can happen is that many of the assets needed to render the page are loaded onto a browser’s cache. The next time a developer or publisher visits the page under development they won’t notice a layout shift because the page elements are already downloaded.

That’s why it’s useful to have a measurement in the lab or in the field.

How Cumulative Layout Shift is Calculated

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

Impact Fraction

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

A viewport is what you see on the mobile screen.

When an element downloads and then shifts, the total space that the element occupied, from the location that it occupied in the viewport when it’s first rendered to the final location when the page is rendered.

The example that Google uses is an element that occupies 50% of the viewport and then drops down by another 25%.

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

Distance Fraction

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

In the above example the page element moved 25%.

So now the Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction:

0.75 x 0.25 = 0.1875

There’s some more math and other considerations that go into the calculation. What’s important to take away from this is that the score is one way to measure an important user experience factor.

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 means simulating an actual user downloading a web page. Google uses a simulated Moto G4 for generating the CLS score within the lab environment.

Lab tools are best for understanding how a layout may perform before pushing it live to users. It gives publishers the opportunity to test a layout for issues.

Lab tools consist of Chrome Dev Tools and Lighthouse.

Understand Cumulative Layout Shift

It’s important to understand Cumulative Layout Shift. It’s not necessary to understand how to do the calculations yourself. But just knowing about it and what it is important because this metric is scheduled to become a ranking factor sometime in 2021.

http://tracking.feedpress.it/link/13962/13622250