How to reduce Cumulative Layout Shift (CLS)
The TL; DR
This post is the third in our series on Core Web Vitals. Here you can read our posts on Largest Contentful Paint and First Input Delay.
In Core Web Vitals, this is the outlier, the metric that is most surprising to be included in the big 3. Most page loading metrics are concerned with How Fast. Cumulative Layout Shift is concerned with How Little. Specifically, how little the content of the page moves around once the page appears to be loaded.
You go to click a button but it shifts and you click something unintended. This can seem like a small aspect of the page loading experience — but like a fly on a birthday cake, a small element is enough to ruin the entire experience. That’s why it gets in the club.
Cumulative layout shift is basically a score given to measure how much the content has moved around on the screen after it is rendered.
To apply a score to cumulative layout shift, the browser measures viewport size and by how far unstable elements move between two rendered frames. The final score is then calculated by multiplying the 'impact fraction' by the distance fraction.
- Cumulative layout shift (CLS) is how much content on the page moves about during the load
- It's mostly caused by unstructured images, dynamic ads, embeds, and web fonts
- It can be improved with aspect ratios, reserved ad space, precomputing space for embeds, and preloading web fonts
This post is the third in our series on Core Web Vitals. Here you can read our posts on Largest Contentful Paint and First Input Delay.
In Core Web Vitals, this is the outlier, the metric that is most surprising to be included in the big 3. Most page loading metrics are concerned with How Fast. Cumulative Layout Shift is concerned with How Little. Specifically, how little the content of the page moves around once the page appears to be loaded.
You go to click a button but it shifts and you click something unintended. This can seem like a small aspect of the page loading experience — but like a fly on a birthday cake, a small element is enough to ruin the entire experience. That’s why it gets in the club.
What is Cumulative Layout Shift?
Cumulative layout shift is basically a score given to measure how much the content has moved around on the screen after it is rendered.
To apply a score to cumulative layout shift, the browser measures viewport size and by how far unstable elements move between two rendered frames. The final score is then calculated by multiplying the 'impact fraction' by the distance fraction.
layout shift score = impact fraction * distance fraction
To apply a score to cumulative layout shift, the browser measures viewport size and by how far unstable elements move between two rendered frames. The final score is then calculated by multiplying the ‘impact fraction’ by the distance fraction. layout shift score = impact fraction * distance fraction Impact fraction:
Impact fraction:
An impact fraction of 0.75 and a distance fraction of 0.10 gives us a cumulative layout shift of 0.075, well within the 'Good' rating for CLS.
But, the final score measures the cumulation of how much every element shifts. Small movements can add up to a bad user experience.
What causes Cumulative Layout Shift?
What causes Cumulative Layout Shift? Cumulative layout shift often comes down to three main culprits: Unformatted images, dynamic advertisements, and heavy embeds.
Unspecified image sizes
Unspecified image sizes In the early days when screen sizes were more or less uniform, the best practice was to specify the height and width attributes to image tags.
This reserved a space for the image to load in. It may have taken a few minutes to load it line by line, by it meant that the page didn’t shift around. When we all made the move to responsive, or mobile-first design, this had to change.
Rather than specifying the dimensions, developers cut the width and height and used CSS to resize images to take up the max-width of the device the page was loaded on.
The problem with this is that the browser has to start downloading the image to determine its dimensions and allocate the correct space for it on the page. When a page loads an article, the text will load first but often jump around as the page reflows to fit in the images.
Dynamic advertisements
Now, if you thought that images making the page content jump around the page was a bad user experience, imagine the same, but with ads, and worse.
Dynamic advertisements Now, if you thought that images making the page content jump around the page was a bad user experience, imagine the same, but with ads, and worse.
To give advertisers more flexibility over their campaigns, it’s common for publishers to support dynamic ad sizes. But, this means that when the display is called, slots may expand or collapse, depending on the configuration.
When ad content is rendered, slots can also be resized if insufficient space is available for the creative. Certain creative types are even designed to expand after they appear on the page. All of these dynamic shifts will push and pull your content over the page.
Heavy embeds
Inline HTML snippets and iframe embeds can fall into the same trap as images. Because the browser doesn't know exactly what the embed is going to contain, images, videos, multiple rows of text, it doesn't know how much space to reserve for it. Get it wrong and it resizes causes shifting once it is fully loaded.
Bonus culprit: Web fonts
It seems fitting that big images, ads, and embeds from other platforms are big layout shifters. They're large, often heavy files, or don't load directly from the page. But, there is another, less obvious destroyer of layouts: Web fonts.
Web fonts do not come installed on the user's system, unlike web-safe fonts. This means that they have to be downloaded by the browser while rendering the web page, then applied to the text.
To serve content faster, browsers will often use a fallback font to show the words while the web font is downloaded. This is known as FOUT - a flash of unstyled text. Browsers may also opt to display "Invisible" text while a new font is rendered, known as FOIT - flash of invisible text. This shifting between fonts and invisible text can affect font size and line-height,
While not an exhaustive list of everything that causes cumulative layout shift, these are the most common and most impactful problems faced by publishers. We can now apply the best practices in each area to get any page a 'good' in Google Cumulative Layout Shift rating.
How to reduce Cumulative Layout Shift?
How to reduce Cumulative Layout Shift? Now we know the main causes of cumulative layout shift we can apply the best practices to get it to 0 on every page.
Best practices to reduce Cumulative Layout Shift
Use aspect ratios on images
Since mobile-responsive has become the norm, modern browsers set the default aspect ratio of images based on an image's width and height attributes so developers can set the width and height as normal.
To prevent cumulative layout shift from images, always include width and height size attributes on your images and video elements. UA stylesheets from the browser will then add a default aspect ratio based on the element's width and height attributes. This happens at the very start of layout calculation preventing shifting images.
When using responsive images, the srcset attribute defines the images. You then allow the browser to select between and what size each image is, you just have to make sure that each image uses the same aspect ratio.
Top tip: If you can’t add image dimensions and aspect ratio to the page’s HTML, estimate the aspect ratio & then use the CSS property ‘object-fit: contain’ for a viable solution with no layout shift.
Reserve space for the ad slot
Sites are still able to offer dynamic ad sizes but reduce layout shift by styling the element before the ad tag library loads. Statically style slot DOM elements with the same sizes that are passed along to the tag library. Reserving the slot size should prevent layout shifts when the ads are loaded off-screen.
If you don't receive the space it becomes possible for the tag library to change the size of ad space after the page layout has been set. The results in a big shift on the page that may drop an ad right where a user is clicking, a Grade-A crime in any user experience.
Google also offers some additional best practices for servicing ads without CLS.
- Avoid collapsing ad space if there is no ad returned. Use a placeholder
- Use your ad data to pick the most frequently used sizes for each ad slot to give yourself the best odds.
- If you're ok with a bit of white space, reserve larger than necessary spaces for ads to prevent shifts
- Reconsider ads at the top of the viewport. There is so much content below them that can all still be shifted around.
Precompute space for embeds
Precompute space for embeds To prevent embeds causing CLS you can precompute sufficient space for embeds with placeholder or fallback. To do this, just follow these steps:
- Obtain the height of your embed by inspecting it with developer tools
- Style a placeholder for the embed in these dimensions
- You can also use media queries to account for any differences in ad/placeholder sizes between different form factors
- Once the embed loads, the contained iframe will resize to fit so that its contents will fit
Preload web fonts
First, you can reduce the time it takes to download web fonts by using the Font Loading API. You can also use the font-display tool to change the rendering custom fonts to values such as auto, swap, block, fallback, and optional if they take too long. The only issue is, all of these time savers bar 'option', can cause the page to re-layout, adding to your CLS.
Preload web fonts First, you can reduce the time it takes to download web fonts by using the Font Loading API. You can also use the font-display tool to change the rendering custom fonts to values such as auto, swap, block, fallback, and optional if they take too long. The only issue is, all of these time savers bar ‘option’, can cause the page to re-layout, adding to your CLS. The most effective way to ensure against CLS is to preload any web fonts.
As of Chrome 83, Google recommends using for your most-used web fonts. Preloaded fonts have a better chance of meeting the first paint, preventing any layout shifting.
The browser now knows that it needs to download this font earlier and removes it from the critical request chain, fetching it earlier in the application.
The browser now knows that it needs to download this font earlier and removes it from the critical request chain, fetching it earlier in the application. Top tip: Use this sparing, only on assets you need as making unnecessary preload requests for things that are not used can harm performance.
Reaching 0 Cumulative Layout shift
Reaching 0 Cumulative Layout shift With these practices, you can reduce your Cumulative layout Shift to 0. Taken from a live Marfeel site, we have a CLS rating of 0.001 with only one author tag causing any shift.
If you would like a mobile website that optimizes all of your core web vitals without sacrificing your content or monetization, get in touch to find out if your website is eligible for Marfeel.