September 3, 2022
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 webpage1. 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.
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.
There are several common causes of unexpected layout shifts that contribute to a high CLS. These include:
CLS can be measured in several ways, which include:
Given that high CLS can impact the user experience and SEO, it becomes imperative to take actionable steps towards reducing it. Here's how:
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.
Preallocate space for dynamic content: Avoid inserting new content above existing content on your webpage unless in response to a user interaction5.
Avoid non-composited animations: Use transform animations instead of animations of properties that trigger layout changes. Stick to CSS transform and opacity changes6.
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.
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"7.
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 results8.
Therefore, understanding and optimizing CLS can improve both your website's user experience and its SEO performance.
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!
Boost Your Website Performance
Setup performance monitoring in minutes and get insights in real-time.
No credit card required. Cancel anytime.