Core Web Vitals: What Is Cumulative Layout Shift?
Google's Cumulative Layout Shift
With Google incorporating its Core Web Vitals metrics as signals for its search ranking algorithm, the metric known as "cumulative layout shift" is becoming a vital part of search engine optimization (on top of how it helps your users’ experience with your website).
But what does "cumulative layout shift" (or CLS) mean, what does it measure and how can you know if your site has issues with it?
Cumulative Layout Shift Explained
CLS is, as noted above, a Core Web Vital metric used by Google to measure the user-friendliness of a page. Cumulative layout shift, specifically, measures how much the content on a page moves around as the page loads.
Have you ever clicked on a link, started reading an article on the landing page and suddenly had the text jump, requiring you to scroll up or down or making you lose your place?
Or maybe you were about to click a button on a page when a video suddenly loads in its place, causing you to accidentally hit "play".
What you’ve experienced is what we mean when we refer to "layout shift".
In Google’s words, cumulative layout shift measures "sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page."
A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
In the illustration below, the page represented on the left loads two blocks of content first and then a third block of content loads, pushing the first content down the page.
This is a layout shift.
The clip below shows a layout shift in action and highlights why it’s such a problem for a website’s usability:
Anyone who has experienced this situation out on the web knows just how wildly annoying it can be.
Why does Google care about CLS?
Google obviously sees cumulative layout shift as something that’s important enough to use as a ranking signal for its search algorithm. But why would Google care about something like this?
As we noted in our recap of Google’s evolution toward Core Web Vitals, Google’s ultimate goal is to provide its users the best possible online experience when using its search engine. Making Google fast, accurate and easy to use is a big part of that, but so is making sure that the pages it recommends are also "delightful" to use.
And few things kill a web user’s "delight" like a layout shift.
How Cumulative Layout Shift is Measured
Google measures a layout shift any time an element that’s visible in the viewport (meaning visible on the user’s screen) changes its position on the screen between two frames as the page loads. So if an image moves from the left side to the right side of the screen, or a button moves two or three lines down the page, Google records a shift.
Note that something is only considered a layout shift if it's an element moving from its original start position. Loading new elements or changing the size of existing elements won’t necessarily be measured as a layout shift unless they cause something else on the page to move in order to accommodate that change.
As a Core Web Vital metric, Cumulative Layout Shift tells you how often your real-life users experience this issue.
Cumulative layout shift score
When Google evaluates pages based on their CLS scores. This number is created by assigning a score for every unexpected layout shift (more on that "unexpected" bit later…) and adding them all together. Hence the “cumulative” part of CLS.
Layout shifts are scored by determining how much a shift changes the way the page is loading.
Layout shift scores are calculated according to the formula:
impact fraction * distance fraction = layout shift score
This formula breaks down as:
- Impact fraction: The measure of how much space a layout shift takes up on the user’s screen. It’s calculated by measuring what percentage of the viewport space is taken up by an element when it first loads and then combining it with how far it moves (again measured as a percentage of viewport space). In the diagram below, the text element takes up 50% of the viewport and loads at the top of the screen. Then, in the next frame, the page loads an image that takes up 25% of the viewport, causing the first text element to shift down.
Since the text takes up 50% of the viewport and the space it moved takes up 25% of the viewport, its impact is 75%, making its impact fraction
0.75. This number is a way to express how much a layout shift affects a page.
- Distance fraction: The measure of how much a layout shift causes a previously loaded element to move, relative to the largest dimension of the viewport. In the example above, the phone’s largest dimension is height and the text element moved down 25% of the screen’s height. This makes its distance fraction
0.25. Distance fraction is important to this equation because it prevents Google from penalizing large page elements that move only a small amount relative to the screen.
Taking this example, we can calculate the score of this layout shift by plugin the two fractions into the equation
impact fraction * distance fraction = layout shift score, which looks like this:
0.75 * 0.25 = 0.188
Google will perform this equation each time it detects a previously-loaded element moving from one frame to the next as it loads the page. The page’s cumulative layout shift score is calculated by summing all of the individual layout shift scores together.
Causes of Cumulative Layout Shift
CLS can sneak into a page’s code a few ways during the development phase.
Embeds without dimensions
When you add things like images, videos or iframes to a page, you need to specify height and width dimensions in the page’s HTML code. When you declare the dimensions for an image, the browser knows exactly how much space it will need to allot for that image so it can properly load the page.
If you don’t declare the dimensions of an image in the HTML code, the browser won’t know how much space it needs until it starts to load that image. This will cause layout shifts because the browser will have to move stuff out of the way to make room for the image.
If your site uses responsive images, make sure each version for each viewport size uses the same aspect ratio.
How to solve or avoid Embeds without dimensions
When you add an image, video or frame to a page make sure you specify the dimensions in the HTML. You can even just specify the width and trust the browser to set the height on its own.
Running ads is a good way to monetize your website once you start attracting traffic. However, ads can cause CLS issues when you use dynamic ads on your site.
Dynamic ads refer to advertisements that change based on who is visiting your site and what device they’re using. These ads are popular because they’re quick and easy to install. However, they take away some control over what’s loading on the page.
Depending on the particular user visiting your page, the ads they see could change shape or size or fail to load altogether. And since dynamic ads don’t have dimensions specified in the HTML, browsers don’t know how much space to reserve for them when rendering the page.
How to solve or avoid dynamic ads
Use CSS aspect ratio boxes to reserve page space for your ads. This will tell browsers how much space to allot for various elements when rendering page content. Note that if you do this, you could wind up with extra white space when smaller ads load in larger boxes. However, this won’t affect a page’s CLS score.
You should also be sure to specify a default or fallback image to load in case the actual ad fails. Doing so will prevent CLS issues that occur when the user’s browser tries to show an image that doesn’t exist.
Dynamically injected content
Dynamically injected content refers to embedded content such as YouTube videos, Tweets, forum comments or some other widget. Again, these cause issues because they often load within the main content of the page causing text, images, links and buttons to shift up or down the page.
How to solve or avoid dynamically injected content
Don’t put dynamic content above existing content on a page. Particularly in the content that appears above the fold.
If you have to use dynamic content above existing content, reserve space for it or have it load in response to a user action.
While it’s pretty obvious that ads, images, videos and dynamic content can all cause CLS issues, the fonts you use on your site could also be the cause behind layout shifts.
There are generally two types of fonts. There are web-safe fonts that any browser knows how to read and load, and then there are custom fonts.
When you use a custom font, a user’s browser will pre-load the page text using a font it knows while it downloads your actual font. Or it will display the text in an invisible font.
Either way, once the browser downloads the custom font it will reload the text using that font. This will cause the text to flash in and out (called a "flash of unstyled text") or suddenly appear out of nowhere (called a “flash of invisible text”). These flashes are momentary - hence the term “flash” - but they can cause layout shifts when font sizes change.
How to solve or avoid custom fonts
You can avoid this issue altogether by just sticking with web-safe fonts. However, if you really want to use a custom font, add the
rel="preload” value to the tag with the font’s download link.
This solution will only work for website visitors using Chrome 83 though.
The Ideal Cumulative Layout Shift Score
Google views CLS scores on a spectrum of "good" to “needs improvement” to “poor”. They define a “good” CLS score as 0.1 or lower, while a score of 0.25 or higher is considered “poor” and needs to be fixed ASAP.
Testing and Tracking Cumulative Layout Shift
Google breaks tools for testing and tracking CLS scores into two categories:
Lab tools: "in the Lab" refers to using software to simulate a real-life user visiting a page and then measuring and calculating CLS score. Lab testing a page is absolutely vital before pushing it live so you don’t wind up serving user’s a page with a poor experience. Lab tools include Chrome Dev Tools, Google Lighthouse and WebPageTest.
Field tools: While lab testing is crucial, it won’t necessarily catch every potential issue because each individual user will experience a page differently based on a variety of factors. Therefore, you also need to track what happens when actual users load a page. This is what we mean by "field test". Field test tools include Chrome User Experience reports, PageSpeed Insights and the Core Web Vitals section of Google Search Console.
Understanding CLS is Key to Success
We got into a lot of nitty-gritty details in this guide to Cumulative Layout Shift. And it really is a good thing if you know the details of what CLS is, how it works and why it matters.
However, the real takeaway should be understanding the core concept beyond CLS: it’s a way of quantifying a page’s visual stability and is an important part of understanding the experience of real users visiting that page online.