Google is planning to roll out a new update called Core Web Vitals from June 2021 onwards. Core Web Vitals includes three metrics, Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). All three metrics will measure a website’s performance and user experience. Core Web Vitals will even affect your ranking on Google. Let’s dive in to get an in-depth understanding of one of the metrics – Cumulative Layout Shift (CLS).
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a metric to measure visual stability. The Cumulative Layout Shift (CLS) score tells us how often visitors on a page experience abrupt layout shifts. A lower Cumulative Layout Shift (CLS) score gives the best user experience.
It often describes browsing or scrolling sessions on a site when suddenly something changes on the page. Without warning, a text, image, button, or any other element moves from its original position. The CLS value describes such a layout instability on a site. High CLS can diminish user experience.
CLS value comprises every individual layout shift value assigned to every unexpected layout shift on a webpage. It is the sum of all layout shifts not caused by the user. The layout shift occurs when a visible element moves from one rendered frame to the next.
Importance of Cumulative Layout Shift (CLS)
Cumulative Layout Shift has a weightage of 5% in Lighthouse. In comparison, Largest Contentful Paint (LCP) has a weightage of 25%. The weightage decides how important or how influential the metric may get towards a site’s SEO ranking.
In essence, CLS will not be on equal footing with LCP, which measures load performance. But, CLS will still influence a website’s ranking on Google due to being a metric within Core Web Vitals. Thus, developers cannot put aside measures to optimize their website’s CLS score before the update in May 2021.
What is a Good CLS Score?
Websites need to aim for a Cumulative Layout Shift (CLS) score of anything under 0.1. Websites that stick to less than 0.1 provide the best User Experience. A good score falls under 0.1. Anything between 0.1 to 0.25 needs improvement. Whereas, a poor score will go beyond 0.25.
A CLS score can come out 0, for fully static pages. The score increases as more layout shifts occur on the page. For a page to have the lowest CLS score, it would need to have a stable layout. The layout must have the least amount of shifts.
How to Measure Cumulative Layout Shift (CLS)?
| Chrome User Experience Report PageSpeed Insights Search Console (Core Web Vitals report) | Field tools | Chrome DevTools Lighthouse WebPageTest Web-vitals JavaScript library | Lab tools |
Website owners can rely on any of the above tools to determine the Cumulative Layout Shift (CLS) score. CLS can be measured in the lab or in the field. Specific lab tools may not report an accurate CLS score. Since lab tools only measure layout shifts that appear during page loads.Â
The score obtained through a lab tool goes far off from what users experience when interacting with a web page. CLS values from lab tools for a given webpage may be less than the actual user experience scores. Measuring real-world CLS at an origin-level is doable using the Chrome User Experience Report.
Another way to determine the CLS score is through JavaScript API. But, developers may need to go through some advanced code to measure real-time user experience CLS scores. Measuring CLS in JavaScript gets complicated. Rather than addressing all the complications, developers can use the JavaScript library to measure CLS.
How is Cumulative Layout Shift (CLS) Calculated?
To figure out the CLS score, the browser sees the viewport size and the movement of unstable elements between two rendered frames. The final CLS score is equal to the product of impact fraction and distance fraction. Earlier, the calculation of the CLS score was based only on impact fraction.
CLS Score = Impact Fraction x Distance Fraction
Impact Fraction
Impact fraction gets defined as the sum of the visible areas of all unstable elements. The visible areas include the previous frame and the current frame. The output of this divided by the total area in the viewport is the impact fraction.
Distance Fraction
The distance fraction measures the total distance moved by any unstable element in the viewport. The distance moved could be horizontal or vertical. Distance fraction is the greatest distance any component has moved in the frame divided by the viewport’s largest dimension.
How do Cumulative Layout Shift (CLS) Elements Behave?
Unstable elements that shift or change their start position within the viewport are responsible for a higher CLS score. But, layout shifts that occur as a result of user interactions aren’t considered flawed. If the user sees a slight movement or position change of an element, it’s pretty acceptable.
Only unexpected layout shifts degrade the user experience. If the layout change was intended and caused by the user, it wouldn’t affect the CLS score. CLS ignores layout shifts that happen due to user input. The CLS measurement stops in the input exclusion window for 500ms after a user interacts with the website.
Also, CLS will only account for shifts that happen in the viewport. If any content piece moves below the fold and the user does not see it, that shift won’t affect the CLS score. Furthermore, changes that happen due to animations may not always count towards the CLS score. E.g., if the animation uses CSS transform, it won’t count towards the CLS score.
How to Improve Cumulative Layout Shift (CLS)?
Specify Image Dimensions
Specify the correct “height” and “width” attributes to your images and video elements on the page. Following this protocol will help the browser to allocate the right amount of space to load images and videos. Setting this will lower the CLS score for that page.
Mentioning the dimensions would ensure a corresponding area gets reserved. The appearing image would then stretch to fit this space. Even if the actual dimensions of the image matched the reserved area or not. A smaller image would stretch to fit the space. The modern practice utilizes the default aspect ratio to load an image on the page.
The aspect ratio gets calculated based on an image’s width and height. Knowing the aspect ratio helps the browser to reserve adequate space for an image. Developers need to set “width” and “height” and the browser will add the aspect ratio. Browsers find the aspect ratio at the start of the layout calculation.
Ads and Embeds
Ads are one of the key reasons for ruining user experience. Ads are the biggest contributors to a high CLS score for a web page. Ads push visible content down the page. Site owners need to start following best practices to improve ad placements. Even though it isn’t easy to choose the exact reserve size for ads every single time.
Fluid ad slots are another reason for high CLS scores. Since, they don’t specify a fixed set of sizes for the ads. These slots resize to fit the content served to them, allowing them to support ads of any size. Thus, it’s not possible to allocate space for these slots prior to requesting ad content.
Any embedded portable web content on the page will likely cause a huge layout shift. The failure to reserve enough space, results in the content moving considerably when the embed loads. Always, remember to set dimensions on ads and embeds.
- Eliminate shifts by reserving a large space for ads or pick an ideal size by studying historical data.
- Avoid placing any ads (non-sticky) near the top of the viewport.
- Avoid collapsing reserved ad space, if the placeholder shows no ad when the ad slot is available.
- Only use fluid size for ad slots below the fold.
- Fetch fluid slots as soon as possible to lower the chance of a user scrolling into them before the slot gets resized.
- Reserve slot size, when placing ads in the content flow to ensure shifts get eliminated.
- Preempt adequate space for any embed with a placeholder or fallback.
- Note the dimensions and style of the placeholder for the embed.
Dynamic Content
Users often come across banners, newsletter sign-ups or forms that shift the page content. These elements appear as dynamic content and ruin user experience for visitors, while they scroll through a page. The elements appear at the top or right underneath the viewport.
Site owners need to avoid inserting such content. Unless it is a content piece that appears due to user interaction. If it emerges as a result of an interaction, then, the layout shifts would be predictable. The best way to handle dynamic content is by reserving enough space in advance. You may do so by using a placeholder or skeleton UI.
Web Fonts (FOIT and FOUT)
FOIT (Flashes Of the Invisible Text) is a problematic area for CLS. When the fonts are hosted online on a server, the browser waits to download the fonts. Until then, the browser displays blank space. After download, the layout shifts a lot.
In FOUT (Flashes Of the Unstyled Text), you may rely on system fonts and custom fonts. The browser displays system fonts and waits to download custom fonts. In this scenario, the system fonts take up their own space. But, after the custom fonts get downloaded, the layout moves by a big margin.
- Modify the rendering behavior of custom fonts with values such as auto, swap, block, fallback and optional.
- Use the “Font Loading API” to reduce the time it takes to get required fonts.
- Use <link rel=preload> on the key web fonts to avoid layout shifting.
- Look to combine <link rel=preload> and “font-display: optional to download fonts on priority.
What are the Benefits of Improving the Cumulative Layout Shift (CLS) Score?
SEO
CLS is part of Core Web Vitals, and Core Web Vitals are page ranking signals. Thus, the CLS score will affect your rank on search engines. A lower CLS score will rank your website higher and increase traffic. Therefore, the Click-through Rate (CTR) will rise.
User Experience
Unexpected layout shifts will diminish user experience. Abrupt Layout Shifts create annoyance and lead to the user interacting with the wrong element. Such layout shifts will lower engagement and retention time. Furthermore, it’ll discourage users from returning to the website.
Conversions
Unexpected layout shifts deplete user experience, which decreases a user’s interest in your site. The abrupt movement of elements creates friction, and they abandon the store. By optimizing the CLS score, you’d increase sales. Thereby, leading to a rise in conversion rates.
Revenue and Profits
An increase in order placements will increase your revenue and profits. As more users start to place orders, expect to witness tremendous growth in your income. Furthermore, expect to see more repeat visits and an increase in Customer Lifetime Value (CLV).
Conclusion – Cumulative Layout Shift
Content that shifts out of the blue on a page creates a bad user experience. Furthermore, it results in a high CLS score. The result of this is a website that doesn’t give a flawless user experience for visitors. Not only that but, it also lowers your SEO strength, and you end up with fewer sales.
Optimize the Cumulative Layout Shift (CLS) score of your website to stimulate more conversions. CLS, part of Core Web Vitals, will affect your user experience. More than anything, a high score allows your competitors to outrank you on Google search results. Don’t miss out on the crucial organic traffic to your website.
If you would like a website that optimizes your CLS, then reach out to the experts in Virtina. We optimize and enhance your webpage experience to lower the CLS score. On top of that, we do so without sacrificing your messaging and page structure. Our experts will adjust your site for the new Core Web Vitals update.
