In this post, we're going to work our way through what Cumulative Layout Shift (CLS) metric is for. We'll provide insight on how to improve this metric, and since it's one of the Core Web Vitals, your improvements have potential to increase your overall performance score by a substantial amount.
Is your website getting a warning about large layout shifts on PageSpeed Insights and you’re not quite sure how to address this issue?
In this post, we’re going to talk about what layout shifts are, what their impact is, and how to fix them. First of all, this issue is mostly relevant to the Cumulative Layout Shift (CLS) metric, which is one of the three Core Web Vitals (CWV).
Furthermore, CLS is responsible for measuring the instability of the content on a page. To explain, by instability, we’re referring to the change of shape and position of elements during the initial page load.
Why it’s such a big deal is because it impairs user experience by moving elements on the page when users try to interact with them. For example, you visit a website and start to consume the content, when all of the sudden you get bombarded with ads, pushing the content out of your view.
These kinds of experiences can be quite frustrating and might cause your visitors to leave your website altogether.
Understanding the causes of layout shifts
When you’re performing an audit on your website using PageSpeed Insights, you might get 2 different sets of metric information. To clarify, PageSpeed Insights will use Lighthouse to get the lab data and if your website is eligible to be included in the Chrome User Experience (CrUX) dataset, it will fetch data from there as well, which reflects user experiences your real visitors had.
However, CLS might differ between those two sources, which also leads many developers to believe that one from CrUX isn’t correct. But that is not true of course, because unlike Lighthouse which detects CLS only from initial page load, the CrUX dataset stores CLS information from the full life of the page.
This is also a clue that there are post-load layout shifts present on your page, which a Lighthouse won’t be able to detect.
On a more general note, layout shifts are common during the initial page load for the most part. That is because that’s when the system fetches all the resources to render the page and some might load faster than others, which can cause elements to jump around until the page is completely populated.
In order for you to provide a good user experience to your visitors, the CLS score of your website will need to be 0.1 or less for at least 75% of page visits. Unlike other CWV metrics, CLS has no unit for its value, because it tries to quantify instability of the content, which is not something we can measure with time.
Most common causes for poor CLS score are
- Images don’t have dimensions attributes set
- Space isn’t reserved for dynamically injected content like ads, embeds, and iframes
- Web fonts
How to identify page load CLS issues
First of all, when CLS from CrUX and Lighthouse or in other words, lab and field data, doesn’t differ, it usually means that the main layout shifting occurs during initial page load.
While PageSpeed Insights provides diagnostic information about entire webpage performance, it also has a neat filter, which allows you to isolate issues that are only relevant to a specific metric, one of which is CLS as well.
However, you should be aware that the Lighthouse tool doesn’t identify elements that are causing the shift, but the elements that were impacted by the shift. This may cause some confusion among developers, when an issue persists even though they addressed it and made changes to the elements that PageSpeed Insights pointed them to.
How to resolve common CLS issues
Images
First of the many reasons for large layout shifts are images that don’t have space reserved, where they’re going to render. We can simply address this issue by adding dimensions attributes width and height, to which we set each dimension values in pixels.
By reserving the space where it’s going to render, you will place the rest of the content in its final position.
Furthermore, when you’re working with responsive images, you can define the srcset attribute, which basically allows the user’s browser to pick an image size that is most optimal for their screen size.
In case you have an image that appears cropped on mobile devices and full on desktop, you can deal with them by wrapping the img tag of your image in picture tags and include different source tags inside. The following example demonstrates how it should look like.
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
<source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
<img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>
Ads, embeds and iframes
Like with images, we need to reserve space for any other type of content that comes in late. We can fix this issue by simply adding a min-height CSS property. Just to be safe, you should add it in a style attribute of the element.
Another culprit for layout shifts can also be CSS animations, more specifically, when we’re changing CSS properties that trigger re-layouts. Some of these properties are top, bottom, left, right, height, width. We can deal with these by using transform property instead.
Web fonts
Web fonts can take some time to load, and once they do, they might cause your content to shift when swap with the system fallback font. We also call this flash of unstyled text or FOUT for short.
In another case, we might have invisible text that is displayed with a fallback font until the web font loads to make it visible. We call this phenomenon flash of invisible text or FOIT for short.
In order to fix these issues, we can use the font-display: optional CSS property, so the web font loads only if it’s available by the time of initial layout.
Another way we can go about it is by using system fallback fonts that are similar to the web font and use additional CSS properties like size-adjust, ascent-override, line-gap override to make it even more similar spacing wise.
And last but not least, you can preload the font with <link rel=”preload”> tag to load it as soon as possible.
Conclusion
To conclude, we described what layout shifts are, what impact they have on our website and how to address them. Furthermore, PageSpeed Insights is an invaluable tool for every web developer, it still has some flaws, and it’s important to know what is the exact issue when we work on those warnings it gives us.
Improving CLS is no exception, and by going through this article, you’ve hopefully gained that knowledge that will allow you to make improvements you wanted to make on your website.
