Cumulative Layout Shift - Boost Web Performance and User Experience
Table of Contents
Cumulative Layout Shift (CLS) is a key user-centric metric in the Core Web Vitals. It measures the visual stability your website provides, which affects its overall user experience. Parts of your web page moving around the screen in disorder can be perplexing to your visitors. For instance, if a visitor tries to click on a button, a sudden layout shift can cause them to click on the wrong button or lose their place in the text.
In short, if the visible elements on your site move around uncontrollably, your visitors will have a hard time interacting with them. This unpredictability can be frustrating and can lead to lower user engagement, increased bounce rates, and poor conversion rates. Moreover, search engines nowadays also take notice and reflect that in your overall ranking.
In this article, we’ll cover what the Cumulative Layout Shift is, what factors fuel it, and how it affects your visitor’s experience and SEO. We’ll also show you how to measure and improve your CLS scores, so let’s get started.
Let’s say you’re reading an intriguing article or about to click a ‘Buy Now’ button, and out of nowhere, an image or an ad loads up top, pushing everything down. That’s a layout shift. When these shifts happen multiple times during a single session, it’s called a ‘Cumulative’ Layout Shift.
The elements loading on your web pages should follow a stable rendering pattern. A page element like an ad, a web font, a contact form, images, and videos can shift the layout of the entire page. If their dimensions are not set properly, this can cause a flash of unstyled text or a flash of invisible text, for example.
Such layout shifts can be expected or unexpected. Read on to learn how to differentiate both and which one the CLS score focuses on.
Expected Layout Shift
Expected Layout Shift refers to any deliberate change in the position of page elements that occurs as a result of user interaction. For example, when a user clicks on a drop-down menu and it opens, shifting other elements on the page, this is an expected shift in the layout.
Therefore, expected layout shifts are not bad for your website’s user experience or SEO. However, it’s still important to design these shifts in a user-friendly way, ensuring that they make sense to your users and don’t cause unnecessary confusion or frustration.
Unexpected Layout Shift
An unexpected layout shift refers to the sudden and unplanned movement of page elements on a webpage while a user is interacting with it. This happens when visible elements on a webpage change position or dimensions without user initiation, often due to late-loading multimedia content, fonts, ads, or dynamic content.
An example of an unexpected layout shift is a late-loading image or pop-up ad, pushing the text or button down and causing you to lose your place or click the wrong thing.
These unexpected shifts can be quite frustrating for users, leading to a poor user experience. From an SEO perspective, a high frequency of unexpected layout shifts, measured as Cumulative Layout Shift (CLS) by Google, can negatively impact your website’s search engine ranking. Thus, minimizing unexpected layout shifts is crucial for providing user satisfaction and optimizing your website’s performance in search engine results.
The highlight here is that the CLS score is influenced solely by shifts that occur within the visible portion of the webpage, often referred to as “above the fold.” If any movement takes place outside the current viewable area or “below the fold,” it won’t have an impact on your CLS score.
Factors Contributing to CLS
So far, we’ve established that the Cumulative Layout Shift score pertains to the Core Web Vitals and measures the unexpected movement of elements on a webpage.
But what fuels these sudden changes? The culprits are numerous, and we’ll elaborate on the key contributors below, so keep reading.
Render Blocking Resources
Render-blocking resources like CSS or JavaScript files can cause layout shifts. When a browser encounters these resources, it must pause and fully load them before it can display the webpage. Slow-loading resources can disrupt the rendering process, leading to unstable elements and a poor CLS score.
To mitigate this, it’s crucial to inline critical CSS and JavaScript and defer non-critical JavaScript, ensuring a smoother rendering.
Image and Video Element Sizing
Images and videos without specified dimensions can also lead to individual layout shifts. When these elements load slowly or without dimensions, they can push other content around on the page, causing a disruptive shift.
Assigning explicit height and width attributes to images and videos can prevent such shifts, offering your users a more stable viewing experience. A site with images without specified dimensions needs improvement to keep its CLS score low.
Dynamically Injected Content
Dynamically injected content, such as ads embeds and iframes, is another factor that can cause layout shifts. When this content loads and changes the DOM without warning, it can push existing content aside, leading to a high CLS score.
Reserving space for dynamic content can help prevent these shifts and improve the overall user experience.
Web Fonts
Web fonts, particularly ones that cause Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT), can contribute to a poor CLS score. If they load slowly, they can cause the browser to swap the fallback font with the loaded web font, triggering unexpected layout shifts.
Efficient loading of web fonts can help maintain a stable layout, enhancing user satisfaction and engagement.
Impact of CLS on User Experience
Cumulative Layout Shift (CLS) is a vital metric that directly impacts the user experience on your website. Simply put, CLS measures the unexpected shifting of web page elements while the page is still downloading.
A high CLS score can lead to a frustrating page experience. Unexpected layout shifts can be quite confusing, leading to users leaving your site prematurely.
SEO-wise, a high CLS can negatively affect your website’s ranking. Search engines like Google prioritize user experience, and a site with a high CLS may be deemed as delivering a poor experience. Therefore, minimizing CLS improves user satisfaction, increases engagement, and potentially boosts your site’s ranking in search engine results.
A smooth, seamless user experience keeps your visitors happy and engaged. And in the world of SEO, a happy visitor means a happy search engine.
Measuring and Monitoring CLS
To master SEO, knowing how to measure and monitor Cumulative Layout Shift (CLS) is a must. CLS, a key component of Google’s Core Web Vitals and a significant ranking factor, can greatly influence your website’s performance and visibility.
In this section, we’ll discuss the CLS score, a numerical value that quantifies layout shifts on your webpage. We’ll also introduce various tools designed to accurately measure CLS to boost your website’s stability and overall SEO ranking.
CLS Score
Google determines the CLS of a webpage by evaluating two key factors for every unexpected layout shift: the impact fraction and the distance fraction.
The Impact fraction quantifies the portion of the viewport area that an unstable element occupies between two frames.
The Distance fraction measures the distance that a page element has traveled (amount of space) from its initial location to its final position, essentially representing the shift in layout in ratio.
The Cumulative Layout Shift score consists of the impact fraction multiplied by the distance fraction ratio. The layout shift score rises exponentially with the increase of the impact and distance fraction.
So, if the element is large or it pushes the text a long way down, the CLS score will be high, meaning the disruption was significant. The more the picture takes up your screen or the further it pushes the text, the faster the CLS scores increase.
Tools for CLS Analysis
If you wonder how to calculate the CLS performance of your site – relax – there are free tools you can use. These tools are the Google Page Speed Insights and the Lighthouse tool of the Chrome browser. Keep reading to learn how to measure your website’s CLS scores with each of these tools.
PagesPeed Insights
Google PageSpeed Insights is a valuable tool for evaluating your website’s Cumulative Layout Shift (CLS) performance. To use it, simply enter your website’s URL and hit “Analyze.”
The tool will then evaluate your site, providing a wealth of information, including your CLS scores. PageSpeed Insights breaks down how unstable elements on your webpage contribute to these scores, offering insights into elements that shift from their initial layout during page load without user input.
The tool identifies these elements, how much space they occupy, and how far they move, providing a comprehensive view of your website’s Cumulative Layout Shift performance. With this tool, you gain the insights needed to optimize your site’s layout stability, enhancing user satisfaction and SEO performance.
Chrome Dev Tools
Another tool you can use is Chrome’s Lighthouse tools for measuring Cumulative Layout Shift (CLS). To measure CLS using the Lighthouse report in the Chrome browser, follow the steps below.
- Open your webpage in Chrome. Click on the kebab menu (three vertical dots) on the top right, navigate to ‘More tools,’ and then select ‘Developer Tools‘.
- Within the Developer Tools panel, locate the “Lighthouse” tab. Here, you can generate a report by clicking “Analyze page load.”
- Allow some time for Lighthouse to generate your report. This report will include your layout shift score, detailing shifts in the layout that occur when new elements are added while the page loads.
Note that not all layout shifts are undesirable – those resulting from user interactions are typically expected. The report identifies elements that shift unexpectedly, their aspect ratios, the amount of space they occupy, and how far they move.
These layout shift scores help you understand and effectively measure CLS to gain valuable insights and enhance the visitor experience.
How to improve Cumulative Layout Shift
Now that you know how to measure CLS, it’s time to take action and make sure your site complies with the Core Web Vitals.
Here, we’ll share more insights on minimizing CLS on your site to improve your visitor’s experience and SEO.
Optimizing Resource Loading
Optimizing the loading of resources, like CSS, JavaScript, and images, is a key strategy to improve your site’s Cumulative Layout Shift (CLS). You can prevent unstable elements from causing late layout shifts by reducing their load times.
Methods like compression, minifying code, and employing a Content Delivery Network (CDN) can speed up resource loading. Consider using modern image formats like WebP, which offer better compression and quality.
Setting Element Dimensions
You can reserve sufficient space in the page layout by setting webpage elements’ height and width dimensions. This prevents unexpected shifts when the elements load, improving your site’s stability. So, if you have images and videos or iframes without dimensions, make sure to add them.
- Here’s how you can set dimensions for an image as an example:
<img src="image.jpg" alt="Description of image" width="500" height="600" />In the above code, the width of the image is set to 500 pixels, and the height is set to 600 pixels. When the page loads, the browser will reserve this much space for the image, preventing other elements from shifting when the image loads.
- Similar to images, you should also specify the height and width for videos.
<video controls="controls" width="320" height="240">
<source src="movie.mp4" type="video/mp4" /></video>Here, the width and height of the video are set to 320 and 240 pixels, respectively.
- For CSS, you can specify dimensions like this:
#myDiv {
width: 500px;
height: 600px;
}In the above CSS, a div with the id “myDiv” is given a width of 500 pixels and a height of 600 pixels.
Strive to maintain the same aspect ratio (the ratio of width to height) as the original image or video to prevent distortion. If the aspect ratio is not the same, it could lead to unexpected shifts, negatively impacting the Cumulative Layout Shift (CLS).
Using Proper Image and Video Attributes
When it comes to creating a responsive and efficient website, using proper attributes for your images is crucial. HTML5 introduces the srcset attribute, allowing you to offer different versions of an image for different device or viewport sizes. This allows the browser to select the most appropriate image source to load, improving your website’s efficiency and responsiveness.
<img src="image.jpg" sizes="(max-width: 600px) 480px, 800px" srcset="image-480w.jpg 480w, image-800w.jpg 800w" alt="Description" />In this example, the browser will choose image-480w.jpg when the viewport is 600px wide or less, and image-800w.jpg otherwise.
For more complex scenarios, such as art direction or different image formats for different browsers, you can use the
<picture>
<source media="(min-width: 800px)" srcset="large.jpg, large-2x.jpg 2x">
<source media="(min-width: 480px)" srcset="medium.jpg, medium-2x.jpg 2x">
<img src="small.jpg" srcset="small-2x.jpg 2x" alt="Description">
</picture>In this case, large.jpg will be used for viewports 800px wide or more, medium.jpg for viewports between 480px and 799px, and small.jpg for viewports less than 480px. The 2x denotes a version of the image for high-resolution (Retina) displays.
Using these attributes properly, you can ensure your images load efficiently across different devices, improving your site’s performance and viewer experience.
Managing Dynamic Content
Dynamic content like ads or pop-ups can cause layout shifts if not properly managed. It’s crucial to reserve space for this content to prevent it from pushing other visible elements on the page when it’s added.
Reserve Space for Ad Elements
Ads are typically loaded in an asynchronous manner. This means they’re added to your webpage dynamically, either during or after the rest of your page has loaded. They can cause shifting in the layout if they don’t have reserved space.
Google recommends using Responsive Ad Units if you’re using Google AdSense. These units automatically adjust their size to fit your page layout and screen size. However, you should still specify a minimum height and width to prevent layout shifts.
Here is an example:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}Always ensure that the allocated ad slot fits the size of the ad to prevent it from displacing other content when the page loads.
Preloading Critical Assets
Preloading critical assets can enhance page load speed and reduce unexpected shifts of the layout. This technique involves telling the browser about important files it needs to display the page, allowing it to handle these files early in the load process.
Such critical assets are CSS, JavaScript files, videos, and images. You can use the ‘link’ tag with ‘rel’ attribute set to preload to inform the browser to start downloading the specified resource:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="background.jpg" as="image">
In the above snippet:
- ‘href’ specifies the path to the resource.
- ‘as’ tells the browser the type of content being loaded.
- ‘type’ provides the MIME type of the resource (only necessary for fonts).
- ‘crossorigin’ is used with fonts, as they are fetched using anonymous mode CORS.
Utilizing CSS aspect-ratio Property
If you use the CSS aspect-ratio property, you can ensure your elements retain the same aspect ratio as the viewport size changes. That helps prevent distortion in your videos or image’s appearance. The aspect ratio is the width of the image or video divided by its height. For example, an image with a width of 800 pixels and a height of 600 pixels would have an aspect ratio of 4:3.
Specifying incorrect or different aspect ratios can cause an image or video to take up more or less space than expected, leading to a layout shift.
Controlling Web Fonts
Web fonts, particularly third-party fonts, can cause layout shifts if not managed properly. Techniques such as font-display: swap, preloading critical fonts, and hosting fonts locally can help control how web fonts load and reduce CLS.
To optimize your website’s performance and SEO ranking, it’s crucial to control web fonts effectively. Start by limiting the number of font styles used. More styles mean more files to download, slowing down your site.
Use modern formats like WOFF2 for better compression and faster loading times. Remember to include ‘font-display: swap‘ in your CSS. This makes the browser show text in a system font until the custom font loads, preventing invisible text. If you manage your web fonts responsibly, you ensure a faster, more user-friendly site that ranks higher in search results.
Implementing Lazy-Loading for Offscreen Images
Lazy-loading is a technique where offscreen images are loaded only as they come into the viewport. This can enhance website performance by reducing the amount of data that needs to be loaded when the page first loads.
However, it’s important to note that lazy-loading should not be applied to above-the-fold images, as this can result in a poor Cumulative Layout Shift (CLS) score.
Here’s an example of how you can implement lazy-loading for an image:
<img class="lazyload" src="placeholder-image.jpg" alt="Description" data-src="actual-image.jpg" />In the above example, placeholder-image.jpg is a lightweight image that is displayed until actual-image.jpg loads. The data-src attribute holds the URL of the actual image that should be loaded when the image comes into the viewport. The lazyload class is used to target the image with JavaScript to implement the lazy-loading functionality.
Note that this manual setup can be a bit complex, especially for a website with many images. Thus, you can automate the process by enabling Lazy-Load easily for your WordPress website using the SiteGround Speed Optimizer plugin, for example.
Avoiding Animations That Trigger Layout Changes
Animations can cause layout shifts if they affect the layout of other elements on the page. Make sure any animations, especially in single page apps, are managed in a way that doesn’t disrupt the layout.
To make your website animations smoother and faster, stay away from animating properties like width, height, or position which force the browser to do extra calculations. Instead, use ‘transform‘ and ‘opacity‘ for your animations – they’re much easier on your browser’s engine.
If you’re using JavaScript for animations, use ‘requestAnimationFrame‘ for optimal performance. Also, don’t forget to hint the browser about elements that will be animated using the ‘will-change’ property. Just remember, every animation should enhance your user’s satisfaction, not slow it down!
Handling User Interaction Responsibly
User interactions, like clicks or taps, should not cause unexpected layout shifts. Make sure any layout changes resulting from user interactions are smooth and predictable.
When handling user interactions, it’s vital to minimize Cumulative Layout Shift – unexpected movement of elements on your page. This often happens when an unstable element is added to the page without specifying size.
To avoid this, set image dimensions for responsive images so the browser knows how much space to allocate, preventing that jarring jump when images load. This isn’t just about user experience, it’s a ranking factor for SEO too. So, don’t leave blank space – be proactive with your layout for a smoother, user-friendly site.
Conclusion
Optimizing your website’s Cumulative Layout Shift (CLS) is crucial for providing a seamless user experience and boosting your SEO ranking. To ensure smooth, predictable page loads, it’s essential to optimize resource loading, set explicit dimensions for images and videos, manage dynamic content responsibly, and control web fonts effectively. Remember to handle user interactions in a way that doesn’t cause unexpected layout shifts.
Leverage tools like Google PageSpeed Insights and Chrome’s Lighthouse tools for measuring and monitoring your CLS, allowing you to make necessary improvements. Enhance your visitors’ experience by taking the steps we showed you in this guide and ensure your site complies with Google’s Core Web Vitals. A well-optimized site will keep both your visitors and search engines happy, leading to higher user engagement and improved visibility in search results.
FAQs
What is a good CLS score?
A good Cumulative Layout Shift (CLS) score, which measures visual stability on your website, is 0.1 or less. This low score means users experience minimal unexpected movement of page elements, making for a smooth, user-friendly experience.
A CLS score above 0.25 indicates a need for improvement, as it could lead to user frustration and a potential drop in engagement. Maintaining a good CLS score is ensuring your users have a seamless and enjoyable browsing experience on your site.
Does CLS affect SEO?
From an SEO perspective, a lower CLS score is better because it means your page is visually stable, leading to a smoother, more enjoyable user experience. Google uses CLS as a ranking factor, and it accounts for 25 % of the total Performance Score in GTmetrix. So, if you’re aiming for a higher spot in search results and want to keep your visitors happy, it’s crucial to keep an eye on your CLS score and aim to keep it as low as possible.
Are layout shifts bad for UX?
Yes, layout shifts are generally bad for user experience (UX). When elements on a webpage move unexpectedly, it can disrupt the user’s interaction, causing frustration and confusion.
For instance, a user might be reading an article or about to click a button when a sudden layout shift causes them to lose their place or click the wrong thing. This unpredictable behavior can lead to decreased user engagement and increased bounce rates.
Minimizing layout shifts is crucial for providing a smooth, enjoyable user experience that keeps visitors coming back.