Understanding Cumulative Layout Shift

As our digital world continually evolves, it becomes increasingly important to focus on improving the performance and user experience of websites. Central to this effort is understanding Core Web Vitals, a set of metrics defined by Google that measure the health and speed of a webpage¹. One such metric that has been gaining a lot of attention is the Cumulative Layout Shift (CLS).

CLS is a member of Google's Core Web Vitals, a trio of metrics designed to quantify aspects of a site's user experience, particularly loading speed, interactivity, and visual stability. It specifically measures visual stability, which directly influences a user's perception of a site's performance. Unexpected layout shifts on your website can lead to poor user experiences, including difficulties in interaction or reading content, which can potentially damage your reputation and impact your SEO rankings.

Understanding how CLS works, what it measures, and how it impacts your site's performance is crucial for developers. In this article, we'll dive deep into the technical details of CLS and provide actionable insights into improving this essential Core Web Vital metric.

What Is Cumulative Layout Shift?

Cumulative Layout Shift measures the instability of content by quantifying how much visible elements on the page unexpectedly shift around without user input. It encapsulates the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

Each layout shift score is calculated with a formula: impact fraction multiplied by distance fraction. The impact fraction pertains to the viewport's area that an unstable element impacts between two frames, while the distance fraction refers to the greatest distance any element has moved within the viewport, divided by the largest dimension of the viewport.

Having a low CLS is beneficial to the user experience of a website. Google suggests a CLS score of less than 0.1 to ensure a good user experience. However, this can be a tricky feat to achieve without an in-depth understanding of what causes layout shifts.

Causes of Cumulative Layout Shift

There are several common causes of unexpected layout shifts that contribute to a high CLS. These include:

1. Images without dimensions: If images do not have specified height and width, the browser will not know how much space to allocate for them until they load. This can cause the rest of the content to shift².
2. Ads, embeds, and iframes without dimensions: Similar to images, these elements can cause layout shifts if their dimensions are not specified beforehand.
3. Web Fonts causing FOIT/FOUT: Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) can result in layout shifts. These occur when custom fonts are being loaded and take up more or less space than the fallback fonts.
4. Dynamically injected content: Content that is added to the page after the initial load can push down other content, causing a layout shift.
5. Actions waiting for a network response before updating DOM: Layout shifts can occur if an action taken by a user, such as clicking a button, requires a network response before updating the DOM.

How to Measure Cumulative Layout Shift

CLS can be measured in several ways, which include:

1. Lab Data: Lab data can be collected in a controlled environment using tools like Lighthouse and Chrome DevTools³.
2. Field Data: Real-user data, also known as Field Data, can be collected from actual user interactions using tools like Google's PageSpeed Insights, Chrome User Experience Report (CrUX), and Loado⁴.
3. JavaScript: You can also measure CLS manually using the Layout Instability API, a JavaScript API that provides insights about the layout stability of a webpage.

Reducing Cumulative Layout Shift

Given that high CLS can impact the user experience and SEO, it becomes imperative to take actionable steps towards reducing it. Here's how:

1. Specify dimensions: Always include width and height size attributes on your images and video elements, or reserve the required space with CSS aspect ratio boxes.

2. Preallocate space for dynamic content: Avoid inserting new content above existing content on your webpage unless in response to a user interaction⁵.

3. Avoid non-composited animations: Use transform animations instead of animations of properties that trigger layout changes. Stick to CSS transform and opacity changes⁶.

4. Use web font loading control strategies: Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) can be avoided by using font display options.

CLS and Its Role in SEO

Cumulative Layout Shift is not just a measure of user experience but has significant implications for SEO as well. In May 2020, Google announced that Core Web Vitals, including CLS, would become a ranking signal in a future update known as the "Page Experience Update"⁷.

Since the Page Experience Update went live, websites failing to meet the recommended threshold for any of the Core Web Vitals may experience a drop in their Google Search rankings. This means that a high CLS can negatively affect your website's visibility in Google's organic search results⁸.

Therefore, understanding and optimizing CLS can improve both your website's user experience and its SEO performance.

Conclusion

Cumulative Layout Shift is more than just a technical concept—it's a gateway to better user experiences and improved SEO. By understanding what it is, how to measure it, and most importantly, how to optimize it, you can ensure that your website provides a stable and visually appealing experience for all users. It's not just about making Google happy; it's about keeping your users satisfied and engaged with your website too.

By using tools like Loado, which provides real-user monitoring and collects Core Web Vitals metrics from browsers, you can better understand your website's performance and optimize it accordingly. After all, a well-optimized website is key to happy users and better conversions. Happy optimizing!