Lighthouse: Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a performance metric introduced in 2020 by Lighthouse to measure the perceived visual stability of a page load.
Simply put, CLS measures the unexpected shifting of web elements while the page is being rendered. This measurement is then quantified as an aggregate score of all the individual layout shifts on your page.
CLS is also one of the metrics that make up Google's Web Vitals. Learn more about Google's Web Vitals initiative here.
How does your site score on this metric?
What does Cumulative Layout Shift measure?
According to Google, "CLS is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts- a low CLS helps ensure that the page is delightful."
Basically, whenever a page loads, certain page elements unexpectedly shift, affecting the way users interact with the webpage.
These elements could be buttons, contact forms, images, videos, fonts, or other types of content.
A website with a low CLS has a stable page display, which does not shift elements around and ensures a steady, predictable loading of all website content.
Reducing CLS is crucial as pages that move around can result in a negative user experience (particularly on mobile devices).
For example, we've all experienced a situation where we've waited for a page to load, found the button we intended to interact with; yet, just as we've clicked/tapped on it, the screen has shifted down and we've clicked/tapped on a different link entirely, often an ad.
Expected vs Unexpected Layout Shift
It is important to note the difference between expected and unexpected layout shifts.
- An expected layout shift happens in response to a user input.
- For example, clicking on the search icon to expand an input field.
- An unexpected layout shift, on the other hand, is usually triggered by third-party content, dimensionless images, or other dynamic content.
- For example, an ad suddenly appearing and pushing an image or content down the page.
GTmetrix differentiates between expected and unexpected layout shifts by excluding layout shifts that occur within 0.5 seconds of user input.
Cumulative Layout Shift's effect on your Performance Score
CLS accounts for 15% of the total Performance Score, signifying its relatively high importance.
While some of the other Performance Score metrics are directly related to the page loading speeds, CLS focuses on measuring your visitor's page experience.
In particular, CLS is a major contributor to "user delight" - i.e., offering a smooth, lag-free experience to your visitors.
This is further solidified by its inclusion in the Web Vitals set.
Thresholds for Cumulative Layout Shift
It is important to note that CLS is a score - not a timing in milliseconds or seconds, and is calculated using detected shifts in the browser.
Thresholds for CLS scores are, as follows:
- Good - nothing to do here = CLS of 0.1 or less.
- OK, but consider improvement = CLS between 0.1 and 0.15.
- Longer than recommended = CLS between 0.15 and 0.25.
- Much longer than recommended = CLS of 0.25 or higher .
How to improve Cumulative Layout Shift?
Note that the particular audits mentioned below likely contribute the most to your CLS; however, your page's CLS score may also be affected by other optimizations that aren't mentioned here.
Improve your CLS score by incorporating good practices into your development workflow, such as:
1) Specifying image dimensions
Always specify, both, width and height for your website's image and video elements so that the correct spacing is used for images/videos.
Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more about this, read this article.
2) Reducing layout shifts caused by ads, embeds, and iframes
To reduce layout shifts caused by ads, embeds, and iframes, do things like:
- Reserve ad slot size (preferably the largest) before loading the ad library.
- Move ads to the bottom or out of the viewport.
- Use placeholders when there is no ad available to show.
To learn more, read this article.
3) Avoiding inserting new content above existing content
Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.
To learn more, read this article.
4) Preventing the Flash of Invisible Text (FOIT)
The Flash of Invisible Text (FOIT) issue can also affect your page's CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.
5) Avoiding non-composited animations
Note: Some of the Structure audits are related; improving one is likely to improve the others.