Cumulative Layout Change – 2021 Google Ranking Factor Preview

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.

Defining the cumulative layout offset

What is cumulative layout offset?

CLS is the unexpected movement of web page elements while the page is still downloading. The types of items that tend to cause a change are fonts, images, videos, contact forms, buttons, and other types of content.

It is important to minimize CLS, as pages that move around can lead to a bad user experience.

A bad CLS score indicates coding issues that can be resolved.


Continue reading below

Why CLS happens

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

  1. Images without dimensions.
  2. Ads, integrations and dimensionless iframes.
  3. Dynamically injected content.
  4. Web fonts causing FOIT / FOUT.
  5. Actions awaiting a response from the network before updating the DOM.

Images and videos must have the height and width dimensions declared in the HTML code. When it comes to responsive images, make sure that the different image sizes for the different windows use the same aspect ratio.


Continue reading below

Google recommends using to calculate proportions. It is a good resource.

Ads can cause CLS

This one is a bit tricky to manage. One way to deal with advertisements that cause CLS is to style the element where the advertisement will appear.

For example, if you style the div to have a specific height and width, the ad will be limited to those.

There are two solutions if there is a shortage of inventory and an ad is not showing.

If an item with an ad does not display an ad, you can configure it so that an alternate banner ad or placeholder image is used to fill the space.

Alternatively, for some layouts where an ad fills an entire row at the top of a column maybe on the right or left gutter of a web page, if the page does not display, there will be no of change. It won’t make any difference on mobile or desktop. But it depends on the layout of the theme.

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

Dynamically injected content

This is the content that is injected into the web page.

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


Continue reading below

Web Fonts

Downloaded web fonts can cause something called Invisible Text Flash (FOIT) and Unstyled Text Flash (FOUT).

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

Lighthouse can help you diagnose the cause of CLS.

CLS can sneak in during development

A cumulative layout change can creep in during the development phase. What can happen is that a lot of the elements needed to render the page are loaded into a browser’s cache.

The next time a developer or editor visits the page under development, they won’t notice a layout change because the page elements are already downloaded.


Continue reading below

This is why it is useful to have a measurement in the laboratory or in the field.

How the cumulative layout offset is calculated

The calculation involves two metrics / events. The first is called the impact fraction.

Impact fraction

The impact fraction is a measure of the space occupied by an unstable element in the window.

A window is what you see on the mobile screen.

When an item downloads and then moves, the total space the item took up, from the location it occupied in the window when first rendered to the final location when the page is rendered .


Continue reading below

The example Google uses is an item that takes up 50% of the viewport and then shrinks an additional 25%.

When added together, the value of 75% is called the impact fraction and is 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 example above, 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 are a few other mathematical and other considerations that go into the calculation. The important thing to remember is that score is a way to measure an important factor in user experience.


Continue reading below

How to measure the CLS

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

In the laboratory, this involves simulating a real user downloading a web page. Google uses a simulated Moto G4 to generate the CLS score in the lab environment.

Lab tools are best for understanding how a layout can work before delivering it live to users. It gives editors the option of testing a layout for issues.

Lab tools include Chrome Dev Tools and Lighthouse.

Understanding Cumulative Layout Offset

It is important to understand the cumulative layout offset. It is not necessary to figure out how to do the calculations yourself.


Continue reading below

But understanding what it means and how it works is essential because it’s now part of the Core Web Vitals ranking factor.

Featured Image Credit: Paulo bobita