Introduction
Imagine you're browsing a website, excited to find the information you need, but just as you're about to click on a link, the page suddenly shifts, causing you to tap on something unintended. Frustrating, isn't it? This annoying phenomenon is called layout shift, and it can have a significant impact on your user experience and, ultimately, your business.
In this article, we will look at common causes of layout shift, how to measure them, what causes them and how to fix them.
What is CLS?
Cumulative Layout Shift (CLS) is one of the three Core Web Vitals. It quantifies the largest burst of layout shifts based on size and distance they move for every unexpected layout shift that occurs during the entire time of the page's existence.You have to differentiate between expected and unexpected layout shifts. Expected layout shifts happen because of user interaction, for example if a user opens a dropdown menu. Unexpected layout shifts happen without user interaction. Those are the ones that matter in this article.
Why does the CLS matter?
When users encounter unexpected layout changes, it interrupts their browsing flow and frustrates their attempts to interact with the webpage. Users may accidentally click on the wrong elements, leading to unintended actions or even leaving the website altogether. A disjointed browsing experience contributes to higher bounce rates and lower engagement metrics. These negative experiences can damage your brand's reputation and result in high bounce rates and lost conversions.
Additionally, being part of the Core Web Vitals, CLS is also an indicator for Google on how to rank your page since it rewards pages that have good user experience.
How to measure and identify CLS?
First, we need to know what a good CLS is. The CLS score is calculated based on the size and the distance elements on the website move in a certain time span after the page was loaded. This metric is used since it considers how much of the user's view is influenced by the CLS. According to Google, sites should strive to have a CLS of 0.1 or less for at least 75% of page visits.
There are several ways to measure and identify CLS. To decide what tool to use, you always have to keep in mind what data your monitoring tool uses. Some use real-life data only from certain browsers (Google CrUX). Some only use lab data (Lighthouse). The best practice here is to take a look at all of them.
Also, you have to differentiate between Layout shifts that occur while loading and layout shifts that occur after the website is loaded. A basic rule here is if Google CrUX and Lighthouse tell you the same thing, then you probably found a layout shift while loading. You can identify those through the experience section in your performance panel.
If you find layout shifts after loading your website, you can use the Web Vitals extension or implement a PerformanceObserver inside to record the layout shifts inside your console. The following example shows how to create a PerformanceObserver to log layout-shift entries.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
But now let's dive into the four most common causes for layout shifts and their solutions.
Major causes and effective solutions to CLS issues
Images without dimensions
One of the most common culprits is images without specified dimensions. When the browser doesn't know an image's size until it loads, it can cause content to jump around, leading to a higher CLS score. Always specify the width and height attributes for images and video elements. This way, the browser knows exactly how much space to allocate, reducing unexpected shifts.
Injecting content
Injecting content into a page without predefined spaces can push content down or to the side, causing shifts. This is often seen with ads, embedded forms or iFrames that appear without a reserved space. For content like ads, always reserve space ahead of time. If you know the size of the ad, set a static size. If not, consider using placeholders with a generic size to prevent content from jumping.
Unoptimized web font delivery
Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) occurs when custom fonts load slower than the rest of the content, causing a jarring visual shift. To combat FOUT or FOIT, preload essential fonts. This ensures fonts display at the same time as the rest of your content, preventing layout shifts. You can find a deep dive about layout shifts caused by fonts here.
Animations
Changes to CSS property values can require the browser to react to these changes. Try to avoid animating properties that might trigger re-layout, paint or composite like box-shadow and box-sizing. Try to use transform animations since they can be used to translate, scale, rotate, or skew without triggering a re-layout and so completely avoiding layout shifts.
Conclusion
Cumulative Layout Shift (CLS) is a crucial metric that web developers and site owners should be aware of. It directly impacts user experience and can influence search rankings. By understanding its causes and applying the mentioned solutions, you can ensure a smoother and more user-friendly website experience.
