Are you looking to unlock the power of Cumulative Layout Shift (CLS)? If so, you’re in the right place.
Cumulative Layout Shift is a metric used to measure the visual stability of a page, measuring how often users experience unexpected layout shifts of visible page content.
In this blog post, we’ll explain what CLS is, why it’s important, and how you can use it to improve your website’s user experience.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a metric used to measure the visual stability of a web page. It is calculated by measuring the total number of unexpected layout shifts during a page load.
Layout shifts occur when elements on a page move or change size unexpectedly, causing the user to suddenly see another part of the page then they were previously viewing.
CLS is important because it provides a measure of how stable a page is for the user.
If a page has a high CLS score, the user is likely to experience a lot of unexpected layout shifts as they navigate the page, which can lead to a poor user experience.
How is CLS calculated?
CLS is measured on a scale of 0 to 1, with 0 being the best score and 1 being the worst.
A score of 0 means that the page has no unexpected layout shifts, while a score of 1 means that the page has a lot of unexpected layout shifts.
The CLS score is calculated by measuring the number of unexpected layout shifts occurring during a page load.
This includes any unexpected movement or resizing of elements on the page, such as images, text, or buttons.
The score is then calculated by taking the total amount of unexpected layout shifts and dividing it by the total amount of viewport area.
To improve the CLS score of a page, developers should ensure that all elements on the page are properly sized and positioned before the page is loaded.
This will help to reduce the number of unexpected layout shifts that occur during a page load.
Additionally, developers should ensure that any animations or transitions on the page are smooth and do not cause any unexpected layout shifts.
Why is Cumulative Layout Shift important?
Cumulative Layout Shift (CLS) is an important metric for measuring a website’s stability and user experience.
It is an important metric because it measures the number of unexpected layout shifts that occur on a page due to changes in the page’s layout.
This is important because unexpected layout shifts can disrupt the user experience, making it difficult for users to complete tasks on the page.
CLS is important because it helps to identify areas of a website that may need improvement.
By measuring the number of unexpected layout shifts on a page, it is possible to identify areas where the layout may be unstable or where elements are shifting unexpectedly.
This can help website owners to identify and fix any issues that may be causing unexpected layout shifts, improving the overall user experience.
Additionally, CLS can measure third-party content’s impact on a page’s layout and identify areas where third-party content can be optimized to reduce layout shifts.
Display ads are notoriously bad for CLS as they can move the content of a page down when they are inserted in between paragraphs.
What is the history of Cumulative Layout Shift?
The history of Cumulative Layout Shift (CLS) dates back to the early 2000s when web developers began to recognize the need for a metric to measure the stability of a web page.
Google first proposed CLS in 2012 as part of their PageSpeed Insights tool.
Since its initial introduction, CLS has become an increasingly important metric for web developers.
In 2018, Google began to incorporate CLS into their Core Web Vitals, a set of metrics designed to measure the overall health of a website.
This marked a significant milestone in the evolution of CLS, as it was now being used as a key indicator of website performance.
In 2020, Google announced that CLS would be used as a ranking factor in their search engine results.
This marked another major milestone in the evolution of CLS, as it was now being used to influence the visibility of websites in search engine results.
Since then, CLS has become an increasingly important metric for web developers.
Google has continued to refine and improve the metric, and web developers are now using it to measure and improve the stability of their websites.
Overall, the history of CLS is one of continual refinement and improvement. From its initial introduction in 2012, CLS has evolved into a key metric for web developers.
It is now being used to influence the visibility of websites in search engine results.
Important things to note about Cumulative Layout Shift
Aspect Ratio
The aspect ratio is the ratio of the width of an image to its height. It is an important factor in web design, affecting how an image is displayed on a web page.
Aspect ratio is also essential in Cumulative Layout Shift (CLS), as it can affect how elements on a page are laid out.
If an image’s aspect ratio is incorrect or not defined, it can cause elements on the page to shift when the image is loaded and create a CLS issue.
Google Web Dev
Google Web Dev is a set of tools and services for web developers to help them create and maintain websites. It includes tools such as Google PageSpeed Insights, which can help identify CLS issues.
Google Web Dev also includes tools such as Lighthouse, which can help developers identify and fix CLS issues.
CSS
CSS (Cascading Style Sheets) is a language used to describe the presentation of web pages. It is used to define the layout of a web page, including the size and position of elements.
CSS can be used to prevent CLS issues by ensuring that elements are sized and positioned correctly.
WordPress
WordPress is a popular content management system (CMS) used to create and manage websites.
WordPress can be used to create optimized websites for CLS, as it includes features such as responsive design and image optimization.
Viewport
A viewport is the area of a web page that is visible to the user. It is important to consider the viewport when designing a web page, as it can affect how elements are laid out and can cause CLS issues.
Compare Cumulative Layout Shift
Cumulative Layout Shift (CLS) vs First Input Delay (FID)
When comparing Cumulative Layout Shift (CLS) vs First Input Delay (FID), the main difference is that CLS measures the stability of the page layout, while FID measures the page’s responsiveness. CLS measures the total amount of unexpected layout shifts during the page load, while FID measures the time it takes for the page to respond to the first user interaction.
CLS is a measure of how much the page layout changes during the page load, while FID measures the time it takes for the page to respond to the first user interaction. CLS is a measure of the stability of the page layout, while FID is a measure of the responsiveness of the page. CLS is measured in points, while FID is measured in milliseconds.
Cumulative Layout Shift (CLS) vs Largest Contentful Paint (LCP)
When comparing Cumulative Layout Shift (CLS) vs Largest Contentful Paint (LCP), the main difference is that CLS measures the stability of the page layout, while LCP measures the time it takes for the page to display the largest content element.
CLS measures the total amount of unexpected layout shifts during the page load, while LCP measures the time it takes for the largest content element to be displayed on the page.
CLS measures how much the page layout changes during the page load, while LCP measures the time it takes for the largest content element to be displayed on the page.
CLS is a measure of the stability of the page layout, while LCP is a measure of the loading performance of the page. CLS is measured in points, while LCP is measured in milliseconds.
FAQ about Cumulative Layout Shift
How do you find the cumulative layout shift?
The cumulative layout shift (CLS) is a metric used to measure the amount of unexpected layout shifts that occur on a webpage. It is measured by calculating the total distance of all individual layout shifts on a page, divided by the viewport size.
To find the CLS score for a page, you can use a tool such as Google’s PageSpeed Insights or Lighthouse. These tools will provide a score for the CLS and recommendations on how to improve it.
How do I improve my cumulative layout shift score?
Improving your CLS score starts with understanding the sources of layout shifts on your page. Common sources of layout shifts include images, ads, and dynamic content. To reduce layout shifts, you can use techniques such as reserving space for images, using size attributes for images, and using a placeholder for ads. Additionally, you can use animation to reduce layout shifts by ensuring that elements are moved smoothly and predictably.
Does cumulative layout shift affect SEO?
Yes, CLS can affect SEO. Google has stated that CLS is a factor in its search ranking algorithm, and pages with high CLS scores may be penalized. Additionally, pages with poor CLS scores can lead to a poor user experience, which can affect the overall ranking of a page in search results.
Conclusion
Overall, I have learned a lot about Cumulative Layout Shift and how it affects website user experience.
I now understand that it is an important metric to measure and optimize for, as it can have a major impact on the user experience.
Refer back to this blog post in the future as you continue to learn more about Cumulative Layout Shift and how to improve it.
Also read: this is how I improved site speed and core web vitals with Ezoic LEAP
Joost Nusselder is The Content Decoder, a content marketer, dad and loves trying out new tools en tactics. He's been working on a portfolio of niche sites since 2010. Now since 2016 he creates in-depth blog articles together with his team to help loyal readers earn from their own succesful sites.
