Cumulative Layout Shift (CLS)

What Is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is a Core Web Vitals metric and it calculates the shifting of elements while the page is being downloaded and rendered. The more common occurrences are on images, buttons and other interactive elements but can be easily spotted on text as well. Want to know more about Core Web Vitals? Watch this quick video:

How Important Is CLS?

CLS causes an overall bad experience for your users and should be minimized as much as possible. Besides the obvious bad experience, there’s the matter of search engine optimization (SEO). Since Google and most other search engines have qualified CLS as a Core Web Vital metric that directly feeds into the algorithm that displays search results, this metric will basically have a say in how well you do in search. 

What Is a Good CLS Score?

A good cumulative layout shift score is anything below 0.1 while anything above 0.25 is considered poor.

Image:web.dev

What Causes Cumulative Layout Shift?

Google defines five main causes for poor CLS score:

1. Images will move around once the JavaScript and CSS are loaded which will most likely cause the images to get resized.
2. Ads and embeds that don’t have dimensions specified in the DOM.
3. Content created dynamically.
4. Fonts that get loaded after the page has been created.
5. Third parties that need to wait for network responses in order to update the DOM.

Exceptions

There’s also what’s called a user-initiated layout shift and this is not counted towards the CLS score. For example, a header slider won’t influence your CLS nor will it be influenced by a full-page preloader.

Clicking on buttons that trigger an animation is not considered a layout shift even if the result is inner page navigation like scrolling to an element on the bottom of the page. These fall within a so called input exclusion window which is 500ms after a user input.

Animations can be responsible for some CLS but not all of them. Any transformation animations done with CSS won’t be counted as a cumulative layout shift.

It’s worth noting that the CLS score is only affected by the moves that happen above the fold. If the shift happens below the viewport, it will not affect your CLS score.

How Do You Calculate Cumulative Layout Shift?

There are two metrics involved in calculating the CLS: Impact fraction and distance fraction.

Impact Faction

Impact fraction is a measurement of how much space an unstable element takes in the viewport. The viewport is the dimensions of your actual screen.

Let’s take an image of 1000px as an example. For the sake of easy math, let’s say your viewport is 2000px, making the image take 50% of the viewport. Once your CSS is loaded, that dimension will drop to 500px, which is 25% of the viewport. The impact fraction is calculated by adding the two, meaning 25+50= 75%. In this case, our impact fraction would be 0.75.

Distance Faction

The second metric you will use to calculate the CLS score is called the distance fraction. It refers to the distance that the page moves from the original position to the final position. Following the previous example, the image shifts by 500px, which is 25% of the viewport size. So the CLS score would be  0.75 x 0.25 = 0.1875.

How to Measure the CLS Score?

The quick way to measure the cumulative layout shift metric is by using the Chrome Dev Tools and Lighthouse. It will get you the results immediately, but you’ll have to redo the entire process whenever you want to check your CLS. Since it can be so volatile, you’ll want to measure the CLS score often.

The second option – and probably the one most people will opt for – is using a third-party monitoring tool. These tools will not only make your life easier, but most of them will allow you to monitor your CLS and send alerts whenever things go sideways. Discover the best options available from this Core Web Vitals testing tools comparison.

[youtube_video]https://www.youtube.com/watch?v=4VNqaLF-XfQ[/youtube_video]

How to Optimize Cumulative Layout Shift?

It should be very obvious that the cumulative layout shift is beyond a simple vanity metric and can cause a bad user experience which will directly affect your bottom line. So the next step would be to optimize it in order to improve website performance and usability.

Images and videos

Everyone wants to have the maximum quality images and videos, but these take a significant toll on load speed. Because of this, images and videos tend to cause a layout shift when they load a few seconds after the rest of the content. To account for these shifts, you can set DOM dimensions for the elements loading in. 

Google recommends using AspectRatioCalculator.com to calculate the aspect ratios.

Ads

While tricky to deal with, they are not impossible to fix. Layout shifts caused by ads are an often occurrence and we’ve all seen them. However, by simply limiting the parent DIV to a specific height and width, you will force them to be constrained to those dimensions. So when the ad does load in after the content has been rendered or when they are refreshed with new ones, the layout will not suffer any alteration.

Dynamic content

These are harder to deal with as they require some thought and premeditation. You’ll want to make sure that you have a good understanding of what third parties will load on your site, like a YouTube video, for example. Once you do figure out where the dynamically created content can appear, you just have to apply the same “medication” as before and set the dimensions for the parent DIV to avoid any unnecessary layout shifts.

Fonts

These can be a nuisance to deal with, especially if you are using custom fonts. Whenever your initial text loads, it will be a default Arial for Chrome and Helvetica for Safari (Mac), so once your font loads in, you’ll see a flash effect on all your text.

The way to prevent this is to use rel=”preload” in the font link you will use for your website.

[ebook_banner]

Monitoring CLS with Sematext

Most modern websites use many moving parts and, as a result, the user experience can suffer. All these parts need to be monitored and managed carefully. The CLS is no different. 

Luckily, Sematext Synthetics is the perfect tool to do so. It’s a synthetic monitoring software that allows you to monitor any changes in your cumulative layout shift score and set up alerts to get notified when things change. However, these are only a few of the many benefits you get from it.