Introduction

In the spring of 2021, Google will roll out a major algorithm change called the “Page Experience” update. This update introduces a new set of ranking factors called “Core Web Vitals” — largest contentful paint, first input delay, and cumulative layout shift — that measure performance and user experience on any given website. In this article, we provide an introduction to the third metric: cumulative layout shift.

cumulative layout shift visual stability metric

What is Cumulative layout shift?

Cumulative layout shift is a key metric in Google's new set of “Core Web Vitals” that measures the sum total of all the unexpected layout shifts that occur during the loading of a page. A layout shift occurs any time a visible element changes position from one frame to the next. To illustrate, say you went to click on the menu bar of a homepage and it shifted up and you accidentally clicked on a newsletter signup button that popped up instead — that’s an example of layout shift.

Why should marketers care about cumulative layout shift?

Marketers and other business should care about cumulative layout shift because, ultimately, it will improve your business and aid in achieving digital marketing success. CLS impacts digital marketing in two main ways — through SEO and user experience.

CLS IMPACTS SEO

The first reason is that cumulative layout shift will become a ranking factor in May 2021. Google wants to make sure that users are more often visiting sites from their search results that have good user experiences. A good CLS score is one indication that users will be delighted in this regard. And it constitutes 5% of the weighted average in Google Lighthouse scoring.

CLS IMPACTS USER EXPERIENCE

The second reason is that unstable layouts pose many challenges for users. It can lead to small annoyances (like missing the button to click and having to try again) or even to accidentally adding the wrong product to a cart and making an unintended purchase. These are just a few examples of how layout shifts can lead to bad reviews, less future visits, and permanent loss of customers. It should be no surprise that poor CLS scores are correlated with higher bounce rates, shorter session lengths, and more rage clicks.

What factors affect cumulative layout shift?

There are a number of different factors that influence cumulative layout shift. Common elements that tend to cause shifts include certain fonts, images, videos, contact forms, buttons, and ads. For instance, dynamically injected content - like Youtube video widgets - can cause layout shifts because sites embeds don’t reserve enough space for the true size of the amend. Another example is images without dimensions. In this case, the culprit is the use of CSS instead of height and width dimensions to resize images as part of responsive design best practices. 

How do you measure cumulative layout shift?

Cumulative layout shift is the product of two measures of movement in the viewport: impact fractions and distance fractions. Distance fraction is the amount of space the element has moved from its original position to its final position. Impact fraction is the total space the element occupied from when it was downloaded to when it shifted. These two numbers are multiplied together to generate a CLS score.

EXAMPLE OF HOW TO MEASURE CLS

For example, if the element initially took up 35% of the screen, then moved another 15%, it ultimately took up 50% of the viewport. 50% would be the number impact fraction and 15% would be the number for distance fraction. Multiplied together, the CLS score would be .075%.

Note that Google disregards user-generated layout shifts, like those caused by typing into a site's search box. 

DEFINING CLS SCORES: GOOD, NEEDS IMPROVEMENT, AND POOR

In terms of scores for cumulative layout shift on a website:

cls page experience metric scoring

CUMULATIVE LAYOUT SHIFT TOOLS:

Use the following reports and tools to monitor and measure cumulative layout shift:

How do you improve cumulative layout shift?

Improve the cumulative layout score for web pages by implementing these 5 practices:

  1. Declare height and width dimensions for images in the HTML. Also, use a proportional aspect ratio for responsive images.
  2. For ads, style the div to specific heights and widths where they will be shown in order to reserve sufficient space and constrain their appearances to those specified dimensions.
  3. Always include size attributes on dynamically injected content like Youtube videos and Tweets.
  4. Do not insert content above existing content, except in response to user interactions.
  5. For custom fonts, display values or use rel = “preload” in the link for downloading specified web fonts.

IN SUMMARY

Cumulative layout shift is a key metric in Google's new set of “Core Web Vitals” that measures the sum total of all the unexpected layout shifts that occur during the loading of a page.

Marketers should care about this metric because it will become a ranking factor in May 2021 and, if left unaddressed, can pose significantly negative user experiences that can ultimately drive business away from your website.

The sizing and positioning of all sorts of elements like images and videos can have an impact on cumulative layout shift. The best way to score well on CLS is to do the little things from a design standpoint, like declaring the proper dimensions on your images and making sure that new content isn’t being inserted above existing content in the page loading process.

As this is Google’s own metric, there are a number of reports and tools that allow you to monitor and improve your CLS scores including the Core Web Vitals report in Search Console, Google Lighthouse report, and Chrome Developer tools.

Frequently Asked Questions

What is cumulative layout shift?

Cumulative Layout Shift is one of the new Core Web Vitals metrics that will be used in the new  Google “Page Experience” update rolling out in the summer of 2021. It measures the visual stability of a web page as elements are being progressively loaded.

How important is cumulative layout shift for SEO?

Cumulative Layout Shift accounts for 5% of your Google Performance Score (which doubles as your “Page Speed” score on mobile and desktop in Google’s PageSpeed Insights tool as well). More importantly, it is also one of the new Core Web Vitals that will play ranking factors in the new page experience update. In order to pass the Core Web Vitals assessment, you need to pass all three metrics, so this metric must be accounted for in your optimization strategy.

What causes cumulative layout shift issues?

There are a number of different factors that influence cumulative layout shift. Common elements that tend to cause shifts include certain fonts, images, videos, contact forms, buttons, and ads. For instance, dynamically injected content - like Youtube video widgets - can cause layout shifts because sites embeds don’t reserve enough space for the true size of the amend.

How do you measure cumulative layout shift?

Cumulative layout shift is the product of two measures of movement in the viewport: impact fractions and distance fractions. Distance fraction is the amount of space the element has moved from its original position to its final position. Impact fraction is the total space the element occupied from when it was downloaded to when it shifted. These two numbers are multiplied together to generate a CLS score.

How do you improve cumulative layout shift?