Getting to Know the Basics of Cumulative Layout Shift
Cumulative Layout Shift or CLS is one of the factors for Core Web Vitals (CWV) or performance metrics announced by Google in May 2020 that could impact a website’s performance score. The other two metrics are ‘First Input Delay’ (FID) and ‘Largest Contentful Paint’ (LCP).
With the implementation of the Core Web Vitals slated for May 2021, website owners, developers and marketing professionals have already begun looking for ways to ensure they get good performance scores. The best way to accomplish this is by assessing web performance using each metric.
If you’re looking to enhance your site’s CLS score, below are the basics of this metric.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a metric designed to measure the visual stability of a webpage. It is used to check how much of the visible page content shifts in the user’s viewport whilst the page is still loading. It also takes into account the distance or extent to which the unstable elements shift in the process.
To put it simply, try to recall if you have ever experienced being in a hurry to get to a specific page on a website. As the page loads the various elements, you click on the button you want and realise it has moved (or shifted), so you get taken to a page you don’t want to be at. If you’ve experienced this, how did it make you feel as a user?
In this example, you’ve experienced being on a website with a high CLS score which, in this case, is not a good thing. In fact, having a higher CLS score indicates visual instability that translates to poor user experience.
CLS scores are calculated using shifts that are detected in the browser. For your guidance, here’s an overview of the CLS score thresholds:
- Good: When the CLS score is equal to or less than 0.10
- Okay, but consider improving: When the CLS score falls between 0.10 and 0.15
- Needs improvement: When the CLS score falls between 0.15 and 0.25
- Too long, needs improvement: When the CLS score is higher than 0.25
A CLS score that’s equal to or less than 0.1 indicates a good user experience. The higher the score, the more unpleasant the user experience.
When a website has a low CLS, its page display is stable. In this case, you wouldn’t observe any shifting around of webpage elements. Instead, what you get is the steady, seamless and predictable rendering of website content.
What causes poor CLS performance?
There are various factors that could impact CLS performance negatively. These include images or videos, banners, ads, embeds and iframes without any specific dimensions, contact forms, buttons, web fonts, dynamically injected content, etc.
When you find yourself on a website with a good CLS score, you’ll barely have a chance to see or make a distinction between the different content being loaded. You won’t notice any shifting or moving parts.
Conversely, a website with a bad CLS performance would provide a poorer user experience that can potentially annoy you. This experience might include experiencing elements shifting up or down or to the left or right during content loading or have popups get in the way while browsing.
How To Measure Your CLS
While there are various tools that can be used to measure this, Google has a pagespeed insights tool that can be used to find out your given score for Core Web Vitals.
Alternatively, if you have access to your websites Google Search Console data, there is built in functionality for Core Web Vitals that offers useful insights into which pages may not pass the CLS score.
Tips to improve your CLS score
There are various optimisation options you might need to consider depending on the outcome of your website audit or assessment. However, there are some best practices worth looking into to improve the CLS performance of your website, such as:
- Specifying the height and width of image, video and other content elements on your website
- Allocating ad, embed and iframe slot sizes (especially the largest ones) to reduce layout shifts
- Not inserting dynamic content, such as forms and banners, above existing content – except as a response to user interaction
- Displaying values with your custom fonts
While improving your site’s CLS performance is crucial to your Google ranking, the ultimate goal is to ensure that all users have a good experience while on your website.
By keeping this top of mind during your site audit, you’ll not only end up scoring well on all three Core Web Vitals metrics but also improve your bottom line.
Subscribe To Our Blog
If you want more tips for your website, join our valuable readers and get key industry insights to help boost your conversions.
