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.
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:
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!
The CLS score calculation depends on two factors:
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.
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.
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.
For calculating the layout shift., multiply the impact fraction by the distance fraction for one animation frame.
Layout Shift = Impact Fraction * Distance Fraction
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
As per Google, the following leads to a poor CLS score.
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 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:
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.
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.
Downloading or employing web fonts can lead to layout shifts in two ways:
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.
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.’
Now that you know about layout frames., let’s review the various ways to optimize cumulative shift scores.
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:
Embeds like YouTube videos, social posts, Google Maps, etc., need proper steps to display them properly on a webpage. The embed methods include:
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.
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.
There are a few ways to reduce, if not eliminate, layout shifts.
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.
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.
Several tools help you test your CLS score. These include:
It employs data derived from fundamental user interactions.
It employs tools to simulate user experience. It is a lab testing method; however, it resembles the real data environment.
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.