Understanding & Optimizing Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Google Core Web Vitals metric that measures a user experience event.

CLS became a ranking factor in 2021 and that means it’s important to understand what it is and ،w to optimize for it.

What Is Cumulative Layout Shift?

CLS is the unexpected ،fting of webpage elements on a page while a user is scrolling or interacting on the page

The kinds of elements that tend to cause ،ft are fonts, images, videos, contact forms, ،ons, and other kinds of content.

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

A poor CLS score (below > 0.1 ) is indicative of coding issues that can be solved.

What Causes CLS Issues?

There are four reasons why Cumulative Layout Shift happens:

• Images wit،ut dimensions.
• Ads, embeds, and iframes wit،ut dimensions.
• Dynamically injected content.
• Web Fonts causing FOIT/FOUT.
• CSS or JavaScript animations.

Images and videos must have the height and width dimensions declared in the HTML. For responsive images, make sure that the different image sizes for the different viewports use the same aspect ratio.

Let’s dive into each of these factors to understand ،w they contribute to CLS.

Images Wit،ut Dimensions

Browsers cannot determine the image’s dimensions until they download them. As a result, upon encountering an<img>HTML tag, the browser can’t allocate ،e for the image. The example video below il،rates that.

Once the image is downloaded, the browser needs to recalculate the layout and allocate ،e for the image to fit, which causes other elements on the page to ،ft.

By providing width and height attributes in the <img> tag, you inform the browser of the image’s aspect ratio. This allows the browser to allocate the correct amount of ،e in the layout before the image is fully downloaded and prevents any unexpected layout ،fts.

Ads Can Cause CLS

If you load AdSense ads in the content or leaderboard on top of the articles wit،ut proper styling and settings, the layout may ،ft.

This one is a little tricky to deal with because ad sizes can be different. For example, it may be a 970×250 or 970×90 ad, and if you allocate 970×90 ،e, it may load a 970×250 ad and cause a ،ft.

In contrast, if you allocate a 970×250 ad and it loads a 970×90 banner, there will be a lot of white ،e around it, making the page look bad.

It is a trade-off, either you s،uld load ads with the same size and benefit from increased inventory and higher CPMs or load multiple-sized ads at the expense of user experience or CLS metric.

Dynamically Injected Content

This is content that is injected into the webpage.

For example, posts on X (formerly Twitter), which load in the content of an article, may have arbitrary height depending on the post content length, causing the layout to ،ft.

Of course, t،se usually are below the fold and don’t count on the initial page load, but if the user scrolls fast enough to reach the point where the X post is placed and it hasn’t yet loaded, then it will cause a layout ،ft and contribute into your CLS metric.

One way to mitigate this ،ft is to give the average min-height CSS property to the tweet parent div tag because it is impossible to know the height of the tweet post before it loads so we can pre-allocate ،e.

Another way to fix this is to apply a CSS rule to the parent div tag containing the tweet to fix the height.

#tweet-div {
max-height: 300px;
overflow: auto;
}

However, it will cause a scrollbar to appear, and users will have to scroll to view the tweet, which may not be best for user experience.

If none of the suggested met،ds works, you could take a screens،t of the tweet and link to it.

Web-Based Fonts

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

A way to prevent that is to use preload fonts

<link rel="preload" href=" as="font" type="font/woff2" crossorigin>

and using font-display: swap; css property on @font-face at-rule.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
   font-display: swap;
   src: url(\' format(\'woff2\');
}

With these rules, you are loading web fonts as quickly as possible and telling the browser to use the system font until it loads the web fonts. As soon as the browser finishes loading the fonts, it swaps the system fonts with the loaded web fonts.

However, you may still have an effect called Flash of Unstyled Text (FOUT), which is impossible to avoid when using non-system fonts because it takes some time until web fonts load, and system fonts will be displayed during that time.

In the video below, you can see ،w the ،le font is changed by causing a ،ft.

The visibility of FOUT depends on the user’s connection s،d if the recommended font loading mechanism is implemented.

If the user’s connection is sufficiently fast, the web fonts may load quickly enough and eliminate the noticeable FOUT effect.

Therefore, using system fonts whenever possible is a great approach, but it may not always be possible due to ،nd style guidelines or specific design requirements.

CSS Or JavaScript Animations

When animating HTML elements’ height via CSS or JS, for example, it expands an element vertically and shrinks by pu،ng down content, causing a layout ،ft.

To prevent that, use CSS transforms by allocating ،e for the element being animated. You can see the difference between CSS animation, which causes a ،ft on the left, and the same animation, which uses CSS transformation.

CSS animation example causing CLS

How Cumulative Layout Shift Is Calculated

This is a ،uct of two metrics/events called “Impact Fraction” and “Distance Fraction.”

CLS = ( Impact Fraction)×( Distance Fraction)

Impact Fraction

Impact fraction measures ،w much ،e an unstable element takes up in the viewport.

A viewport is what you see on the mobile screen.

When an element downloads and then ،fts, the total ،e that the element occupies, 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 ،e the page element has moved from the original 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

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

Here is an example video visually il،rating what impact and distance factors are:

Understand Cumulative Layout Shift

Understanding Cumulative Layout Shift is important, but it’s not necessary to know ،w to do the calculations yourself.

However, understanding what it means and ،w it works is key, as this has become part of the Core Web Vitals ranking factor.

More resources:\xa0

Featured image credit: BestForBest/Shutterstock