You’ve probably heard web developers and SEO experts talk about Cumulative Layout Shift lately. But what exactly is CLS and why does it matter? In short, CLS refers to the movement of visible page content, like images, ads or paragraphs, that occurs after a page has loaded. When a user is trying to interact with elements on the page and those elements suddenly shift positions, it leads to a poor user experience. Google has made CLS an important ranking factor, so optimizing for it is key to a good SEO strategy.
In this guide, we’ll walk you through everything you need to know about CLS – what causes it, how it’s measured, and most importantly, how to fix it. By the end, you’ll be well on your way to optimizing your site and providing a seamless user experience. So buckle up, we’ve got a lot to cover!
What Is Cumulative Layout Shift?
Cumulative layout shift (CLS) refers to the movement of visible page elements that occurs between the time a page starts loading and when the page is interactive. This unanticipated movement can be jarring for users and negatively impact their experience on the site.
To measure CLS, browsers track how much each visible element on the page shifts from its initial position as the page loads. The total sum of all element shifts is the CLS score for that page load. A lower score is better since it means there were fewer unexpected movements that could disrupt the user.
There are a few common causes of high CLS:
- Images without dimensions: If you add an image without specifying its width and height, the browser won’t know how much space to reserve for it. Once the image loads, the content around it will shift.
- Dynamic content: content that loads in dynamically after the initial page render, like ads, can cause layout shifts if the space they will occupy isn’t accounted for.
- Slow resource loads: If a resource on your page takes a long time to load, the browser will initially reserve only a small space for it. When the resource finally loads, it can cause surrounding content to shift.
- Font swaps: Loading a fallback font initially and then swapping in a custom font face once it loads can trigger layout shifts.
To improve your CLS, optimize your images, minimize dynamically injected content, optimize load times for critical resources, and use font loading strategies that avoid layout shifts. Monitoring your CLS in the field and fixing issues as they arise is key to delivering a seamless user experience.
Why CLS Matters for User Experience
So what exactly is Cumulative Layout Shift (CLS) and why should you care? CLS refers to the movement of visible page elements that changes the page’s layout between the time a user first sees the page and when its main content finishes loading. Even small shifts can be jarring and frustrating for users, disrupting their experience and focus.
For many sites, CLS issues stem from ads, images, and other elements loading in after the initial page render. As these elements pop in, the page layout shifts – pushing down content the user was trying to read or interact with. Not a great user experience! CLS matters because it directly impacts how users perceive the quality, usability and professionalism of your site. High CLS scores damage user trust and satisfaction, which can hurt conversion rates, bounce rates, and other key metrics.
There are a few ways to improve your CLS score and optimize the user experience:
•Lazy load images, ads, and other media. Only load these elements when they’re about to scroll into view. This prevents layout shifts from elements loading in late.
•Add size attributes to images. Specify the width and height of images in the HTML so the browser can allocate proper space before the image loads.
•Prioritize visible page content. Make sure critical content like headlines, intros, and calls-to-action load first before less important page elements.
•Use CSS grid or flexbox for layouts. These technologies enable more flexible and resilient layouts that are less prone to layout shifts as page elements load in.
•Audit and fix existing layout shifts. Check your site for any elements that load in late and cause visible movement. Address these issues to improve CLS and user experience.
Optimizing CLS is well worth the effort. By creating stable layouts and prioritizing visible content, you’ll build a better overall experience for your users. And that will pay off through improved satisfaction, trust, and other key metrics.
How to Measure CLS With Google Lighthouse
To improve your site’s Cumulative Layout Shift (CLS), you first need to measure how much shift is actually happening. The easiest way to do this is using the Lighthouse tool in Chrome DevTools.
How to Run Lighthouse
- Open your site in Chrome and open the DevTools (View -> Developer -> Developer Tools).
- Click the “Lighthouse” tab.
- Select “Performance” as the category and check the “Cumulative Layout Shift” audit.
- Click “Generate report”. Lighthouse will now analyze your page and provide a score for CLS.
- Review the CLS section of the report. It will show you the total CLS score for the page, as well as a screenshot highlighting the elements that shifted. The lower the score the better—aim for 0.1 or less.
If your CLS score comes back high, don’t panic. The report will also provide suggestions for improvements to help reduce layout shifts on your site. Some things you can do include:
• Add width, height, and padding to images and video elements. Without size attributes, the browser won’t know how much space to allocate for these elements and they may shift when loaded in.
• Set fixed width container elements. Having fluid-width containers can lead to content shifting around as the page resizes.
• Preload images and fonts. Resources that load in after initial page render are a common cause of layout shifts. Preloading them prevents them from shifting content when they load.
• Use CSS grid, flexbox, and position: sticky for layouts. These modern layout methods are less prone to causing layout shifts than floats.
• Ensure ads do not displace page content. Ads that load in and push down content after initial page render will hurt your CLS score. Consider using fixed ad placements.
• Reduce DOM changes after load. JavaScript that modifies page layout or styles after initial load can trigger layout shifts. Minimize DOM changes when possible.
By measuring CLS with Lighthouse and following these best practices, you’ll be well on your way to a perfectly stable site layout and improved user experience. Let me know if you have any other questions!
Common Causes of High CLS Scores
When analyzing your site’s CLS score, it’s important to understand what factors are contributing to layout shifts. By identifying the root causes, you can make fixes to improve your score and user experience.
Dynamic Content
Content that loads in dynamically after the page has initially rendered is a frequent culprit of CLS issues. Things like ads, embedded media, comment sections, and ecommerce products loading via AJAX can push other content down the page, causing shifts. To remedy this, you have a few options:
- Load dynamic content asynchronously so it doesn’t block rendering of other page elements.
- Add padding or margin to sections where dynamic content will load so they are allotted the necessary space.
- Use the
aria-hidden="true"attribute to hide dynamic sections from assistive technologies and search engines until the content loads. This prevents them from detecting a layout shift.
Late-Loading Images
Images that load in after initial page render are another source of CLS problems. Some solutions:
- Use responsive placeholder images with the
loading="lazy"attribute. This delays loading the image until it’s scrolled into view. - Add
widthandheightattributes to<img>tags so the page allotts the proper space for the image even before it loads. - Use low-quality image placeholders that are the same size as the final image. Swap in the full-quality image once loaded.
CSS or JavaScript Errors
Errors in your CSS or JS code can also sometimes cause layout shifts. Double check for:
- Missing CSS selectors or properties
- JS errors preventing page elements from loading properly
- Outdated CSS/JS file references
Advertisements
Ads, especially those loading via third-party networks, frequently shift page layouts. Some options to reduce CLS from ads:
- Vet ad partners and only use those with a proven track record of stable ad units.
- Set fixed width/height for ads in advance to allot proper space.
- Load ads asynchronously and hide the space with
aria-hidden="true"until the ad loads.
By auditing for these common causes of CLS and making fixes, you’ll be well on your way to optimizing user experience and boosting your Lighthouse CLS score. Let me know if you have any other questions!
Tips to Minimize CLS Issues
Cumulative Layout Shift (CLS) refers to the movement of visible page content that occurs between the time a user requests a page and the time the page’s layout is stabilized, causing unexpected layout changes. Minimizing CLS is important for user experience and SEO. Here are some tips to help improve your site’s CLS.
Load CSS before JavaScript
Make sure your CSS is loaded before JavaScript files. If JS files load first, they may shift page content around once the CSS loads, causing CLS issues.
Minimize JavaScript execution time
The faster your JS files load and execute, the less opportunity there is for layout shifts to occur. Minimize and compress JS files, remove unused code, and optimize JS execution.
Add width and height attributes
Adding width and height attributes to images, videos, and iframes gives the browser the dimensions before the content loads. This prevents the page from shifting around as the content loads in.
Use CSS flexbox and grid
CSS flexbox and grid are more modern layout options that are less prone to causing CLS issues. They make it easy to design responsive layouts that load fast and don’t shift around. Consider using them instead of floats.
Add padding-top to large images
For large landscape images, add padding-top with the same aspect ratio as the image. This reserves the space before the image loads so the page content below it won’t shift up. Remove the padding-top once the image loads.
Lazy load offscreen images
Images that load but are not visible in the viewport often cause CLS as the page height changes when they load in. Use lazy loading to only load images as they scroll into view. This prevents them from shifting the layout before the user sees them.
Use CSS contain: strict
The CSS contain: strict property helps prevent CLS in a couple ways. It ensures an element’s layout is calculated strictly based on its own contents and descendants. It also forces descendants to be contained within the element’s box. Using contain: strict on containers of dynamic content can help limit the effects of layout changes to only that part of the page.
Minimizing CLS may require making trade-offs for other web performance metrics. But improving user experience through a stable layout is worth the effort. With some experimenting, you can find the right balance for your site.
Optimizing Images to Avoid CLS
Optimizing your images is one of the easiest ways to improve CLS. Images that load slowly or change size after page load are common culprits of layout shifts. By properly optimizing your images, you can avoid these CLS issues and improve user experience.
Compress images
Compressing your images reduces their file size, allowing them to load faster. You can use a free tool like ImageOptim, Compressor.io or Kraken.io to compress PNG, JPG, GIF and SVG images. Aim for compressing images down to the smallest size possible without noticeably reducing quality.
Use next-gen formats
Newer image formats like WebP and AVIF can provide better compression than PNG or JPG. Using these formats, you may be able to reduce image size by 30% or more. The downside is that not all browsers support them, so you’ll need to provide fallbacks for PNG/JPG. You can use a service like Cloudinary to automatically generate and serve the most appropriate image format based on a user’s browser.
Add width and height attributes
Including width and height attributes on your tags allows the browser to allocate the proper space for an image before it loads. This avoids layout shifts that can happen when an image loads at an unexpected size. Simply add width and height attributes that match the actual pixel dimensions of your image. For example:
Lazy load images
Lazy loading images means delaying the loading of offscreen images until the user scrolls to them. This speeds up initial page load and can reduce CLS. You’ll need to use a JavaScript library like LazySizes to lazy load your images.
Use responsive images
For the best user experience on all devices, you should use responsive images that scale nicely to fit any viewport size. Make sure your images aren’t wider than the content they’re in, and consider using max-width: 100% for fluid responsive images.
By implementing these image optimizations, you’ll see faster page loads, less layout shifting, and an overall improved user experience on your site. Your CLS score and other Core Web Vitals will start to improve as a result.
Using CSS and JavaScript to Control Layout Shifts
Cumulative Layout Shift (CLS) refers to the movement of visible page content that occurs between the time a user requests a page and the page is loaded by the browser. This can be disorienting for users and negatively impact their experience. By optimizing CLS, you can improve user experience and search engine optimization.
Using CSS Techniques
One way to optimize CLS is by using CSS techniques like:
- Specifying fixed width containers: This ensures content within the container will not shift. For example:
“`css
.container {
width: 600px;
}
“`
- Adding padding to elements: Adding padding creates invisible space around an element so if it moves, it is less likely to bump into or overlap other elements. For example:
“`css
.element {
padding: 10px;
}
“`
- Using relative or absolute positioning: This allows you to precisely position elements relative to each other so they stay in the same place. For example:
“`css
.element {
position: relative;
top: 10px;
left: 20px;
}
“`
- Loading non-essential CSS/JS asynchronously: This delays loading of non-critical CSS and JS until after the page has rendered, preventing layout shifts from occurring.
Using JavaScript
To control layout shifts, you can also use JavaScript to:
- Set fixed height elements: Give elements a fixed height so content within them does not shift. For example:
“`js
element.style.height = ‘200px’;
“`
- Load content asynchronously: Use
asyncordeferattributes to load non-essential scripts asynchronously after page load. This prevents them from impacting page layout. - Use Intersection Observer: This allows you to load elements as they enter the viewport, preventing layout shifts from occurring as elements load in.
Optimizing CLS may require making changes to both your CSS and JavaScript. But improving the user experience and search ranking of your site will make the effort worth it. With some experimentation, you’ll be well on your way to understanding and controlling layout shifts.
Setting Up Monitoring to Catch CLS Regressions
To properly monitor for CLS regressions, you’ll want to set up some tracking. The core metrics to keep an eye on are:
CLS Score
Your overall CLS score is the key indicator of how much unexpected layout shifting is happening on your site. Aim for a score under 0.1, which Google considers “good”. Check your CLS score regularly in your analytics platform or web performance tool like Lighthouse. Look for any spikes or upward trends, which could indicate a regression.
Element Shift Count
The total number of elements on your page that shifted unexpectedly. More shifts mean a higher chance of a poor user experience. Look for pages with a high volume of shifts and investigate why those elements are moving around. See if there are any fixes you can implement.
Most Shifted Elements
Pay attention to which specific elements on your pages are shifting the most. Things like ads, images, and third-party embeds are common culprits. Check if there are any issues with how those elements are loaded or sized that you can optimize.
Monitoring Frequency
It’s a good idea to check on your key CLS metrics at least once a week. For high-traffic pages, consider monitoring 2-3 times a week. The more often you check in, the quicker you can catch any regressions and make fixes before they impact too many users.
You should also monitor CLS after any major changes to your site, like:
- A site redesign or theme update
- Switching to a new ad network
- Adding a new third-party tool
- Optimizing images or making other resource changes
Setting up consistent CLS monitoring and alerts will help ensure your users continue to have a smooth, shifting-free experience on your website. Staying on top of your metrics and investigating issues quickly can help prevent CLS regressions from happening in the first place. Keep optimizing and improving—your users will thank you!
Cumulative Layout Shift FAQs: Your Top Questions Answered
Cumulative Layout Shift (CLS) is an important metric to understand if you want fast, user-friendly web pages. This FAQ will answer your top questions about CLS and how to optimize it.
What exactly is Cumulative Layout Shift?
Cumulative Layout Shift or CLS measures how much your page layout changes as elements shift around after the page has loaded. If a user is trying to click a link or button but it moves suddenly, it leads to a poor experience. CLS quantifies this effect so you can improve it.
How is CLS calculated?
CLS is calculated by Chrome DevTools and other tools. They track how much each visible element moves from its original position after the page has loaded. The scores of all movements are then summed to get the total CLS. A lower score is better.
What causes high CLS?
Some common causes of CLS include:
- Images loading in slowly: As images load in, the content below them gets pushed down, causing layout shifts.
- Ads: When ads load in after the page content, they push other elements down and sideways.
- JavaScript: JS that manipulates the page after load can trigger shifts.
- CSS: Stylesheets that change element sizes or positions after load lead to layout changes.
How can I improve my CLS score?
Here are some tips to optimize your CLS:
- Lazy load images, ads and other media. Only load them as the user scrolls to them.
- Add width and height attributes to images so the browser can allocate space for them immediately.
- Minimize the use of CSS and JS that change the layout after the initial page load.
- Use CSS grid, flexbox and position: sticky to create more robust layouts.
- Consider not using ads if they significantly impact CLS. User experience should come first.
What is a good CLS score to aim for?
According to Google, a CLS score under 0.1 is considered good, under 0.25 is average, and over 0.5 needs improvement. The lower the score the better, so aim for under 0.1 if possible. Continually optimizing your CLS will result in faster, more user-friendly web pages.
Conclusion
So now you know what CLS is all about and how to tackle it. The key is not to get overwhelmed – start with the basics, audit your site, and make improvements incrementally. Focus on optimizing your web fonts, limiting dynamic content, and simplifying your page layouts. Measure your CLS in the field, see what’s working, then build on your successes.
Improving CLS may seem tedious, but the payoff in user experience and search ranking is huge. Keep at it and soon a high CLS score will be a thing of the past. Your site visitors will thank you, and so will your place in the search results. Tackle that CLS and happy optimizing! You’ve got this.