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).
Table of Contents
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.
Frequently Asked Questions (FAQ)
What causes Cumulative Layout Shift?
Cumulative Layout Shift is caused by content changing dimensions, or new content being injected into the page. For example: if a website has text that stretches across several lines then changes one word from "of" to "off", it will cause an unintentional line break-in between those two words because of how Web browsers read HTML code. This would create more empty space between them than before which makes for an ugly site design!
How do you optimize CLS?
One way to optimize your CLS score is by using embeds. But you have to predetermine the necessary dimensions of each one before adding it onto a webpage because this can be tedious and time-consuming if not done correctly in advance, which means loading all your final embed code on the page first and then inspecting them with Chrome Developer Tools for their height so that you know how much space they will take up when rendered.
How do I check my cumulative layout shift?
The Cumulative Layout Shift metric in the Page Overview tab will let you know. Just below where all of your pictures sit on a filmstrip, there is an overview with performance metrics for each layout shift that has occurred on this page. Check out what those numbers mean and how to improve them under "Detailed diagnostics".
How can Cumulative Layout Shift be avoided?
To reduce layout shifts caused by ads, embeds, and iframes in your designs create a plan for the placement of these elements. Reserve an ad slot size before loading any other scripts onto that page to ensure continuity across web pages. Place ads at either bottom or out-of-viewport so they don't disrupt content on screen while also keeping them visible enough for viewers to notice their presence. If there is no available ad when you're designing, try using placeholders which allow designers more control over how images are displayed until advertisements become available again.
How to fix CLS cumulative layout shift?
The extent of time (duration) required to complete a project from Strategy to development to implementation will depend on the project's nature. Cosmetic changes take less time, and therefore the overall completion time is less. However, heavy-duty integrations and other complex changes will incur a more extended project cycle. Rest assured; we will deliver the completed quality work before the deadline.
How many times has your design layout shifted?
If you're not sure how to answer this question, don't worry because here is help. You can find the Cumulative Layout Shift metric in the page Overview tab, just below the filmstrip and Performance tab also contains a list of all layout shifts on the page that provides diagnostic information so you know what could be causing an increase in deviation from best practices. This helps ensure better performance with fewer errors while reducing costs for things like production time or equipment upkeep!
Is cumulative layout shift a ranking factor?
Cumulative layout shifts are one of many indicators we use to measure site speed, which can affect ranking in our search results. This metric reflects changes made on-page such as load time or scrolling behavior after consecutive visits over extended periods of time (days). The more cumulative layouts shift occur during this period, the higher likelihood there is an issue with page loading times or design efficiency causing poor user experience. CLS becomes relevant from 2021 onwards when it comes into effect as a ranking factor but until then you need to make sure your pages meet all expectations by reducing average load times below 3 seconds.
How do I lower my CLS score?
Reserve space statically for the ad slot. When putting ads in the content flow, make sure the size is allocated to avoid shifts and take extra care when placing them near the top of your viewport while following best practices like not blocking out main text with an ad banner or making a layout too cluttered by having many banners at once.
Why is CLS a negative factor?
The shifting of webpage elements before the page has fully loaded is called CLS. It can cause a poor user experience by making it difficult to read content and learn what they are looking for on your website. Users may become frustrated, or even abandon their web browsing if there are too many pages that shift around within one visit due to bad coding practices such as using unoptimized javascripts or third-party scripts which often use outdated technologies such as Flash Player plugins in websites with no fallback plan should these old plugins fail.
How is the CLS score calculated?
The Google CLS Score is a measure of how well your site's layout conforms to best practices by taking into account the distance between elements on each page and their relative impact. What this means in terms you can easily understand, however, is that it will score higher if there are more navigational links or any other information users would need right at hand as opposed to making them scroll down for what they're looking for. The farther away something appears from where people start scrolling on the screen or when there aren't navigation buttons directly next to content readers want access to.
