Visual stability is crucial in retaining and converting page visitors into paying customers. Evidently, nothing’s more frustrating than unexpected image shifts, floating ads or texts jumping around an article.
Does your website suffer from these sudden layout movements? Google’s new Core Web Vitals metric, Cumulative Layout Shift (CLS), addresses these challenges.
How does Cumulative Layout Shift impact your Technical SEO and responsive web design and development efforts?
Google identifies three Core Web Vitals that are set to be ranking factors: Cumulative Layout Shift, First Input Delay (FID), and Largest Contentful Paint (LCP).
CLS is one of the new Core Web Vitals that deal with visual stability.
Cumulative Layout Shift quantifies how often unexpected layout, content and image shifts happen on your website. Like the Google Page Layout algorithm update in 2012, CLS will significantly affect how Google and page visitors view your website. By learning what does CLS means and how to improve Cumulative Layout Shift, you can minimize unexpected layout movements and reduce your bounce rate.
After a thorough study and experiments, I’ve found a way to reduce my website’s cumulative layout shift (CLS), reduce total time blocked (TBT), and how to maintain a low score for longest contentful paint (LCP).
In this article, we will understand CLS (Cumulative Layout Shift) from both the user and webmasters (SEO) point of view.
What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a Core Web Vitals metric that measures a web page’s visual stability and how much it shifts from its original position to a different visual location. An unexpected layout shift occurs when a visible element, such as responsive images, changes HTML img size or position, affecting the overall page layout.
Why does CLS happen?
Several factors may cause unexpected shift images or layout movements like this, including:
- Third-party ads, iframes or widgets
- Slow-loading fonts causing FOIT/FOUT
- Dynamically injected content, such as promo bars, that create a loading difference
- Images and videos with unknown dimensions
- Ads, embeds, and iframes without dimensions.
- Unspecified CSS image size or HTML img size attributes
- Synchronous or asynchronous loading of Document Object Model (DOM) elements
- Flash of unstyled content (FOUC)
- Inappropriate HTML code image size or CSS background image size
- Animations that trigger layout change
Like the Google Page Layout algorithm, CLS mainly looks at how the block-level elements are affected upon loading the website. If there’s a certain lag behind the loading time of responsive images or other website content, an element may get pushed beneath a fold or jumble around the page, which could impact your session length, bounce rate, conversion rate and other user behavior metrics.
What causes Cumulative Layout Shift?
Cumulative layout shift often comes down to three main culprits:
- Unformatted images
- Dynamic advertisements
- Heavy embeds
We will study each of them one by one in the last section: How to Improve CLS Score.
What Is Google Layout Algorithm?
Good example: Site layout that highlights content
Bad example: Site layout that pushes content below the fold
The Google Page Layout algorithm update targeted websites with excessive static ads above the fold. These ads shift images and other site elements, forcing page visitors to scroll down the page to view the content they need.
Many technical SEO services providers and responsive web design professionals saw a 40 percent drop in traffic when the Google Page Layout algorithm update was first implemented, on February 7, 2012. This is because of too many ads that prevented users from receiving a better experience.
Some members of the WebmasterWorld forum saw an impact, they shared this image:
How Does the Google Page Layout Algorithm Relate to CLS?
Post-Google Page Layout algorithm changes allow responsive website design professionals to focus on the balance between content and ads, setting the stage for the CLS update.
A responsive web design company that understands what is Google layout algorithm has the upper hand in optimizing for the Core Web Vitals and achieving a good CLS score. Knowing how to recover from the Google Page algorithm is key to optimizing your page layout for third-party ads and dynamically injected content above the fold.
Why Does CLS Matter to the Page Experience Update?
Technical SEO experts and responsive web design professionals recognize the challenge of determining unexpected layout and image shifts when developing a website. To streamline responsive web design testing and ensure the best possible user experience (UX), CLS allows you to look at how far existing elements move from one animation frame to the next and change your website layout without bumping the CLS score.
More reasons learning what does CLS mean and mastering how to optimize for Cumulative Layout Shift are essential:
- A visually stable website is key to brand success.
- CLS approximates the users’ perceptual experience of layout instability.
- Complicated and non-responsive website designs are harder to optimize.
- Unspecified CSS background image size or HTML code image size may cause unintended content orders.
- Not knowing how to optimize for CLS can result in lower Google rankings and bad user experience.
- Unexpected image, layout and content shifts render a poor user experience.
Now that you understand what is CLS and why it matters in technical SEO and responsive web design services, let’s move on to the more crucial aspects of CLS. The following discussions focus on how to measure Cumulative Layout Shift, what is a good CLS score and how to optimize for CLS.
How to Find and Measure CLS?
Let’s understand, how Cumulative Layout shift (CLS) is calculated.
To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames.
The layout shift score is a product of two measures of that movement:
- Impact fraction
- Distance fraction.
Initially, the layout shift score was calculated based only on impact fraction. The distance fraction was introduced to avoid overly penalizing cases where large elements shift by a small amount.
So, let’s dig deep into how Cumulative Layout Shift works.
1. Impact Fraction:
Google identifies the impact region or the screen area affected by the shift images or layout movement to calculate the impact fraction. The impact fraction pertains to the ratio of the impact region to the viewport.
Here’s the formula for the impact fraction:
Area (impact region) ÷ Area (viewport) = Impact fraction
2. Distance fraction
It determines how far site elements moved from the original position to the next frame.
Google also measures the distance fraction using this formula:
(Maximum move distance) ÷ (Height of viewport) = Distance fraction
By multiplying the impact fraction by the distance fraction, you get the CLS score.
Layout shift score = Impact fraction * Distance fraction
If the CLS test results show that a website element moved a lot, it means it can be very distracting for the users. However, if the elements moved by only a few pixels, it is less likely to affect your CLS score and user experience.
How to Measure Cumulative Layout Shift
Using CLS Test Tools?
Now that you know how to measure CLS according to Google standards, let’s discuss the different CLS test tools and methods that you can use to determine your CLS score:
Example on how to measure CLS easily to analyze your page performance with Google’s PageSpeed Insights tool:
- Enter a website URL into Google’s PageSpeed Insights tool.
- Click ‘Analyze.’
- Check your performance. You can review both mobile and desktop performance, which you can switch between using the top left corner navigation.
The page analyzed below shows a good cumulative layout shift score of 0.017
It further gives you suggestion on what needs to be done in order to improve the score:
What Is a Good CLS Score?
Ideally, web pages wouldn’t have any image shift or layout movement at all. However, this might not be possible for all websites.
In this case, technical SEO experts and responsive web design services providers should aim for a low CLS score. The more stable your layout is, the lower your CLS score.
Below mentioned is the ideal threshold score of CLS – Cumulative Layout Shift:
Good User Experience
Poor User Experience
On April 13, Google updated its metrics in the Search Console report — based on feedback from web developers — to reflect a more accurate representation of layout shifts on single-page apps and long-running pages.
Google now uses session windows to group together layout shifts on a web page and ensure the CLS score doesn’t grow unbounded. To calculate the CLS score, Google now looks at the maximum session window with a one-second gap, capped at five seconds
Let’s look at this example by Google:
A session window begins when the first layout shift starts and expands until there is a session gap or no layout shift. A new session window begins when another layout shift occurs after the interval. The scores of each layout shift are totaled to provide each window’s score.
Google considered that there are multiple window sizes on various web pages, and these can result in different layout shifts and unreliable CLS scores. To ensure the session window is large enough, Google figured five seconds is a good limit to the window size.
Based on Google’s analysis, 55 percent of pages will not see a change in CLS score at the 75th percentile. Meanwhile, the rest will see about three percent improvement in their CLS scores at the 75th percentile due to this change.
Besides knowing what is a good Cumulative Layout Shift score, you must also master how to improve CLS to ensure your website complies with the upcoming Core Web Vitals update.
How to Improve and Fix Cumulative Layout Shift?
In the video below, Addy Osmani talks about optimizing CLS for an eCommerce store that uses placeholders for their product images
The Core Web Vitals optimization process can take 30 – 60 days, depending on your site issues and the number of web pages you have to update. What’s more, it takes 28 days before the changes you’ve made on your HTML set image size and other site elements are approved by Google.
As such, you must understand what is a good Cumulative Layout Shift score and execute the right strategies on how to improve CLS as soon as possible to avoid Google penalties once the new Core Web Vitals are implemented.
18 Ways on How to Improve Cumulative Layout Shift:
- Use transform animations in implementing carousels
- Always add appropriate HTML img size or CSS content image size attributes to your image and video elements.
- Use font style matching tools, such as Google Type or Type Connection, to match the fallback font and the web font as closely as possible.
- Reserve a space for injected content, such as promo bars and ads. If you can’t, consider making the position fixed.
- Size the container to the height of the content ahead of time, so things don’t shift around or the HTML set image size doesn’t change as it comes in.
- Ensure the needed CSS is loaded before the content.
- Hire a responsive web design company or technical SEO agency to audit your website CLS and design modifications based on the CLS audit.
- Optimize responsive images by reducing their HTML set image size to less than 100kb.
- Use WebP format or any next-gen formats like jpeg2000 to compress your CSS image size and create smaller, richer images.
- Perform regular responsive web design testing and page speed audits to determine issues with your HTML code image size and other site elements.
- Consult with a technical SEO agency or responsive web design company to determine whether synchronous loading or asynchronous loading works best for your DOM tree.
- Audit and monitor if all web pages have CSS content image size attributes.
- Use a content delivery network (CDN) and caching server like Nitropack or WP Rocket.
- Place a container on your website that houses ads.
- Speak to a responsive web design agency to know if there are third-party plugins to assist you in preloading fonts or other dynamically injected content.
- Add encoded SVG images in CSS as background images.
- Improve HTTP response and elements synchronization.
How to Fix a Cumulative Layout Shift More Than 0.25 s or 0.1 s on Mobile and Desktop?
If you want to avoid large layout shifts on your WordPress site, here’s how you can reduce a bad CLS score (with and without plugins):
- Include Width and Height Size Attributes on Images and Video Elements
- Preload Fonts (And Optimize Them)
- Manage Space and Size for Ad Slots
- Manage Space for Embeds and Iframes
- Manage Dynamic Content
- Prefer the CSS Transform Property for Animations
By going over each point, you’ll understand how to fix the Search Console status: CLS issue: more than 0.25s or CLS issue: more than 0.1s, both from mobile and/or desktop.
For each of our recommendations, you’ll find a piece of information about its performance impact — from low to high. The higher the impact is, the higher chance that the Cumulative Layout Shift grade will improve after following that specific recommendation.
1. Include Width and Height Size Attributes on Images and Video Elements
Performance impact: high
One of the simplest ways to fix CLS is to include the width and height attributes on your images and video elements in your WordPress CMS:
WordPress adds image dimensions by default. So, this action should be automatically solved.
Another way to solve this issue is to take advantage of the CSS aspect ratio boxes and let the browsers set the default ratio of images.
<img src=”image.extension” width=”1200″ height=”680″ alt=”image intro” />
It may have taken a few minutes to load it line by line, by it meant that the page didn’t shift around.
2. Preload Fonts (And Optimize Them)
Performance impact: low (high only if the site has large text)
If web fonts don’t load fast, they cause a terrible user experience and affect the CLS grade.
As a best practice for avoiding layout shifts, you should preload fonts.
By preloading fonts, you’ll tell the browser to load the fonts as one of the top-priority resources. When rendering the page, the browser will load the fonts as fast as possible. As a result, the browser will likely include the fonts in the first meaningful paint- that’s when the page’s primary content is fully loaded and displayed. In that case, no layout shift will occur.
You can add the rel=preload to the key web fonts:
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
Useful tip to reduce the FOUT issue is to add the display:swap;missing on font-display properties.
There are other ways to load fonts faster:
Convert the icon fonts to SVG. Font icons take a while to load and don’t help accessibility. There’s no reason to use them. Using SVGs, the font will render faster, and you will load the exact fonts you need.
Make multiple font formats available. By doing so, the browsers will pick the compatible format and only load its font. Here is some information about font formats that you may find helpful:
- Avoid TTF. It’s usually 10 – 20% more heavy than WOFF.
- Use SVG for Safari. It’s usually a bit smaller than WOFF.
- Use WOFF2 for modern browsers. It’s the smallest size – around 30% smaller than WOFF and SVG.
- Implement WOFF as a fallback when SVG or WOFF2 can’t be used.
Host your fonts locally or use a CDN to cache them. You’ll avoid any delay and deliver fonts faster.
Optimize your fonts to make them as small and fast as possible.
By applying these recommendations, you’ll optimize your fonts and avoid several layout shifts.
3. Manage Space and Size for Ad Slots
Performance impact: high
There are several best practices to avoid any layout shift for ads:
- Assign fixed dimensions to the ads so that you’ll reserve enough space for the ads to be loaded.
- Reserve the biggest possible space for ads. Historical data come in handy to assess what’s the best dimension for each ad slot.
- Keep every space reserved for ads that have not been displayed. In other words, you shouldn’t collapse any area on the viewport. You could rather include a placeholder or a fallback element.
- Place non-sticky ads in the middle of the page — anyway, far from the top of the viewport.
4. Manage Space for Embeds and Iframes
Performance impact: high
The recommendations for managing embeds and iframes are similar to the ones for ads.
In particular, you should precompute enough space for such elements. Once again, historical data can be useful to understand how much space you should reserve.
Placeholder or fallback is an excellent solution to manage the unknown embed size.
5. Manage Dynamic Content
Performance impact: high
Dynamic content such as banners can also affect Cumulative Layout Shift. Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.
By managing dynamic content, you’ll take care of the following PageSpeed recommendations:
- Avoid large layout shifts
- Avoids enormous network payloads.
6. Prefer the CSS Transform Property for Animations
Performance impact: high
The last best practice to ensure visual stability is to take care of animations. You can use the CSS property: transform, which doesn’t trigger any layout changes.
You’ll address the “Avoid non-composited animations” PageSpeed recommendation.
How to Optimize for Cumulative Layout Shift?
Still struggling on how to optimize for CLS? Here is advice for you to help you understand what is CLS and how to improve CLS.
- HTML image size: 1MB
- CSS content image size: ≤ 100kb
- CSS background image size: ≤ 100kb
To reduce layout shifts caused by ads, embeds, and iframes, do things like:
- Reserve ad slot size (preferably the largest) before loading the ad library.
- Move ads to the bottom or out of the viewport.
- Use placeholders when there is no ad available to show.
Conclusion - Key Note!
It’s important to understand Cumulative Layout Shift. It’s not necessary to understand how to do the calculations yourself.
But understanding what it means and how it works is key as this has now become part of the Core Web Vitals ranking factor.
1 thought on “What is Cumulative Layout Shift (CLS): How to Improve it”
It was a great read! I did not know much about Cumulative Layout Shift, and after reading your article I gained a lot of insights after reading this. Thanks a lot for sharing about this information, I think this will help a lot of design and development efforts. It will be very helpful in my process, and I will be able to direct my efforts the best. I learned a lot from this article, and I will definitely share this within my network.