The Ultimate Guide to Cumulative Layout Shift

Ever been at the mercy of a checkout button only because it keeps on vanishing like it’s on a spell or something?

Imagine you’ve started reading a news article when suddenly all the elements start shifting around the page like it’s some magic movie throwing you off your scent and forcing you to find where you left the phrase. 

Quite frustrating, right!

Well, the truth is, such a web experience happens way too many times and with too many of us. 

It primarily befalls when a new element tries to find its place on the page, causing such a commotion. 

Thankfully, Google doesn’t like it either! 

The trillion-dollar search engine never wants its users to have a wrecking experience on its search engine, which is why it’ll roll out new performance metrics as a part of its core web vitals 2021 updates. 

These Core Web Vitals act like the search engine’s spine. It does everything to maintain its supremacy, command, and meaning in a digital user’s life.

It includes components like Largest Content-full Paint (LCP), First Input Delay (FIP), and Cumulative Layout Shift (CLP). 

This blog mainly talks about CLP or the Cumulative Layout Shift, which leads to the online ruckus we just discussed! And, then we’ll explore the various ways to optimize cumulative layout shift for a Google-approved score. 

What is Cumulative Layout Shift?

Cumulative Layout Shift measures a webpage’s visual content stability. It adds the shifting scores in all the layout shifts, which are not a result of user interaction, precisely, within the 500ms of user input. It measures the displacement in the visible content viewport along with the distance shifted by the impacted elements. 

Google CLS analyzes unexpected element movements in a page and their effect on user experience. Layout shifts occur when a visible element changes its position without any user request. 

In a nutshell, CLS sums up scores of individual frame changes in a website design’s element.  

The recommended CLS score is below 0.1  

As per Google:

• CLS below 0.1 is a good score. 
• CLS between 0.1-0.25 needs improvement. 
• CLS above 0.25 is a poor score.

Element distortions during browsing are an annoying experience. But more than that, it lowers a user’s trust in the content publisher and affects SEO and UX. Moreover, in worst-case scenarios, it might lead to financial losses as well.

And you certainly don’t want that to happen! 

How to calculate Cumulative Layout Shift score?

The CLS score calculation depends on two factors:

• Impact Fraction 
• Distance Fraction

Impact Fraction

It measures the instability amongst the visible elements of a screen displayed between two frames. The area occupied by the unstable part through its movement in both the frames determines the impact fraction. 

For calculating impact fraction, you need to know what impact region is.

The impact region covers the area affected by the layout shift. Google identifies all the elements impacted and combines the original size with the shifted area. 

Generally, the impact region is rectangular in shape, but horizontal and vertical layout shifts lead to a more complex form. 

Back to impact fraction: divide the impact region area by the viewport area (The visible screen on your mobile or desktop without any scrolls). 

Impact region: Impact region area/ viewport area

For example, if an element covers 50% of the viewport in one frame and shifts 40% down in the second frame, the impact fraction is 90%, i.e., 0.9. 

Distance Fraction

It measures the unstable element’s movement in percentage relative to the viewport. 

Before calculating the distance fraction, you must know the move distance. 

Move distance refers to space before and after a layout shift. In simpler words, it entails how far a shifted element moved. 

Coming back to distance fraction: divide the maximum move distance by the viewport height. 

Distance Fraction = Max. Move Distance/Viewport Height 

For example, if an unstable element moves 40% downwards on a screen, then the Distance Fraction is 0.40. 

The significance of distance fraction in the CLS score

Initially, impact fraction dominated the CLS score; however, it suffered from inadequacies. Since huge elements move slightly, they didn’t impact the CLS score unless they shifted too much. 

Enter Distance Fraction.

Incorporating it into the CLS score provides a better layout shifting comprehension. 

Layout Shift

For calculating the layout shift., multiply the impact fraction by the distance fraction for one animation frame. 

Layout Shift = Impact Fraction * Distance Fraction

Cumulative Layout Shift

Finally, calculate the cumulative layout shift by considering all the layout shift scores and adding them together. 

Layout Shift scores (sum of each animation frame) = Cumulative Layout Shift 

What causes Cumulative Layout Shifts?

As per Google, the following leads to a poor CLS score.

Images sans size attributes

Always add width and height dimensions to your images and videos. More so, allocate the image/video space using CSS aspect ratio boxes. It instructs the browser to reserve a suitable area for a web page when loading an image. 

Ads, embeds, and iframes without dimensions

Ads contribute highly to layout shifts. Ads networks employ dynamic ad sizes to increase performance and revenue through higher click rates. Consequently, it degrades the user experience. However, you can reduce ad shifts by:

• Reserving space for the ad slot statically.
• Evaluate the available space when placing non-sticky ads at the top of the viewport.
• Choose an additional size that works with the reserved area.
• Eliminate layout shifts by allocating an expansive space for an ad. 
• Avoid removing an ad space when none is available by displaying a placeholder.

Embeddable widgets are portable web content inserted into a page. These include YouTube videos, Google Maps, social media posts, dynamic links, and more. Most times, you aren’t aware of just how much space embed content will take. Hence, web owners aren’t able to reserve enough space to prevent layout shifts.

To work around embeds, you can precompute sufficient space with a placeholder or a fallback. Explore the height of the embed file using browser developer tools. During embed loading, the contained iframe will resize itself to fit its contents. 

Dynamically inserted content

You’ve probably experienced layout shifts due to pop-up windows that appear on the screen when loading a site. It occurs due to haphazardly placed banners like signup newsletters, install our app promotions, webinar windows, email requests, etc., shifting the readable content towards the end of the page. 

Refrain adding content above an existing piece unless it leads to better user interaction. Moreover, when you’re trying to place this UI, allocate sufficient space in the viewport so that when it loads, it does not force content to shift around. 

Web fonts causing FOIT/FOUT

Downloading or employing web fonts can lead to layout shifts in two ways:

• Invisible or no text display until a new font is rendered (Flash of Invisible text or FOIT).
• Swapping the fallback text with a new font (Flash of Unstyled Text or FOUT).

To prevent such layout mishaps, use tools like font-display and font loading API. You can also preload the optional fonts even when they’re not needed to reserve the necessary space for future font changes.

Actions waiting for a network response before DOM updates

Sometimes, loading animations require a network response, the lack of which leads to layout changes. So, whenever you’re trying to load an animation, use the Transform command to change it into ‘animation of properties.’ 

How to optimize cumulative layout score (CLS)?

Now that you know about layout frames., let’s review the various ways to optimize cumulative shift scores. 

Speed load the fonts

Fonts are among the top reasons for slow page performances, resulting in a poor CLS score. All websites use at least one custom web font; these have different letter sizes and spacing than the default fonts. So, when these custom fonts don’t load properly, it produces layout shifts. That is why your website shows irregularity in content.

Although for a website, while custom web fonts disrupt layouts, they are significant for marketing and branding reasons. These are better than default fonts and of utmost importance to a website. 

So how to use custom fonts while maintaining CLS score?

To do so:

• preload fonts for better page rendering
• Locally host fonts
• Assess the performance of your fonts using aggressive caching and a good CDN. This way, the CDN will connect to the closest and fastest network and ensure a pleasant user experience.
• It would, eventually, lead to higher loading shifts and minimize layout shifts. However, analyze its impact on the LCP (Largest Contentful Paint).

Embedded Content

Embeds like YouTube videos, social posts, Google Maps, etc., need proper steps to display them properly on a webpage. The embed methods include:

• iFrame
• JavaScript tag with HTML code
• Inline HTML code

Embeddable widgets are becoming a usual addition to a webpage. However, they don’t include the accurate dimension of the widget in the code. So, when it loads, it causes layout shifts. The right way to optimize the Cumulative Layout Style score is by predetermining the embeddable widget size and using a placeholder in that space. Once you have an embed, inspect it using Chrome Developer Tools and identify its height. You can then style it with the right size, preventing any layout shifts.

Know the size of your images

Dimensionless images are one culprit to cumulative layout shifts. 

When we say dimensionless images, it means there is no width or height information. 

What happens is, during a page load, when you encounter such dimensionless images, the browser doesn’t find any pre-allocated space for it. Even if the images load, they will not have the right size and dimensions, leading to layout shifts and low page speed. 

You can avoid such disruptions by specifying the width and height of the images. Follow a responsive design format or the aspect ratio in the CSS. When you use the aspect ratio, you need to mention its dimensions, so there is no issue with the web design. 

Allocate space for ads

Indeed, ads are one big perpetrator for low page loads and layout shifts. 

For starters, most ads use a dynamic design that adjusts to the screen rather than a fixed dimension to increase page performance, CTRs, and ad spends. Moreover, since these ads are hosted on different servers, undoubtedly, it slows your website. 

There are a few ways to reduce, if not eliminate, layout shifts. 

• Allocate ad spaces previously. Use CSS to style the dynamic content. 
• Reserve the largest size for your ad; however, it might leave blank spaces in case of small ad sizes. 
• Even if the network supplies no ad, keep its place reserved. You can place a placeholder or fallback for the time being.

Take special care of pop-up windows and notifications

Every modern website deploys dynamic content. It includes types like newsletters, forms, sticky bars, messages or announcements, related content, and more. 

Fortunate enough for you, the simplest way to avoid layout shifts is by inserting dynamic content below the existing content and never above. If there is no way you can do without placing such content below the current piece, simply reserve extra space. 

Monitor website speed

Do you know what good layout shifts are?

Any shift that happens in response to user interaction is a good layout shift. Your site must load within 0.5 seconds of a user’s click to make sure no layout shift happens. 

All in all, optimize your website for better speed and responsiveness. Eventually, it will lead to an excellent cumulative layout score. 

How to measure Cumulative Layout Score?

Several tools help you test your CLS score. These include:

Real User Data

It employs data derived from fundamental user interactions. 

• PageSpeed Insights 
• Google Search Console
• Google’s BigQuery 
• Google Data Studio

Lab Data

It employs tools to simulate user experience. It is a lab testing method; however, it resembles the real data environment. 

• Lighthouse
• Webpagetest
• Chrome Dev tools 
• Chrome Web Vitals Extension

Conclusion

So, that’s a wrap for everything you must know about cumulative layout shift. It might be less intuitive when compared to other Core web vitals factors, but it is an instrumental score. It helps explore whether users like surfing your web pages and how they can improve their site experience. And such prospects are always good to know. 

As for the Core Web Vitals 2021 updates, if you want your website to rank higher and enjoy unending visitor traction, optimize cumulative layout shift scores. Once you do so, your website will turn into a lead generation engine, that too, a profitable one.