<\/span><\/h2>\n\n\n\nSo 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
There are a few ways to improve your CLS score and optimize the user experience:<\/p>\n\n\n\n
\u2022Lazy 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.<\/p>\n\n\n\n
\u2022Add 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.<\/p>\n\n\n\n
\u2022Prioritize visible page content. Make sure critical content like headlines, intros, and calls-to-action load first before less important page elements.<\/p>\n\n\n\n
\u2022Use 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.<\/p>\n\n\n\n
\u2022Audit 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/span>How to Measure CLS With Google Lighthouse<\/span><\/h2>\n\n\n\nTo 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.<\/p>\n\n\n\n
<\/span>How to Run Lighthouse<\/span><\/h3>\n\n\n\n\n- Open your site in Chrome and open the DevTools (View -> Developer -> Developer Tools).<\/li>\n\n\n\n
- Click the “Lighthouse” tab.<\/li>\n\n\n\n
- Select “Performance” as the category and check the “Cumulative Layout Shift” audit.<\/li>\n\n\n\n
- Click “Generate report”. Lighthouse will now analyze your page and provide a score for CLS.<\/li>\n\n\n\n
- 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\u2014aim for 0.1 or less.<\/li>\n<\/ol>\n\n\n\n
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:<\/p>\n\n\n\n
\u2022 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.<\/p>\n\n\n\n
\u2022 Set fixed width container elements. Having fluid-width containers can lead to content shifting around as the page resizes.<\/p>\n\n\n\n
\u2022 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.<\/p>\n\n\n\n
\u2022 Use CSS grid, flexbox, and position: sticky for layouts. These modern layout methods are less prone to causing layout shifts than floats.<\/p>\n\n\n\n
\u2022 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.<\/p>\n\n\n\n
\u2022 Reduce DOM changes after load. JavaScript that modifies page layout or styles after initial load can trigger layout shifts. Minimize DOM changes when possible.<\/p>\n\n\n\n
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!<\/p>\n\n\n\n
<\/span>Common Causes of High CLS Scores<\/span><\/h2>\n\n\n\nWhen 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.<\/p>\n\n\n\n
<\/span>Dynamic Content<\/span><\/h3>\n\n\n\nContent 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:<\/p>\n\n\n\n
\n- Load dynamic content asynchronously so it doesn’t block rendering of other page elements.<\/li>\n\n\n\n
- Add padding or margin to sections where dynamic content will load so they are allotted the necessary space.<\/li>\n\n\n\n
- Use the
aria-hidden=\"true\"<\/code> attribute to hide dynamic sections from assistive technologies and search engines until the content loads. This prevents them from detecting a layout shift.<\/li>\n<\/ul>\n\n\n\n<\/span>Late-Loading Images<\/span><\/h3>\n\n\n\nImages that load in after initial page render are another source of CLS problems. Some solutions:<\/p>\n\n\n\n
\n- Use responsive placeholder images with the
loading=\"lazy\"<\/code> attribute. This delays loading the image until it’s scrolled into view.<\/li>\n\n\n\n- Add
width<\/code> and height<\/code> attributes to <img><\/code> tags so the page allotts the proper space for the image even before it loads.<\/li>\n\n\n\n- Use low-quality image placeholders that are the same size as the final image. Swap in the full-quality image once loaded.<\/li>\n<\/ul>\n\n\n\n
<\/span>CSS or JavaScript Errors<\/span><\/h3>\n\n\n\nErrors in your CSS or JS code can also sometimes cause layout shifts. Double check for:<\/p>\n\n\n\n
\n- Missing CSS selectors or properties<\/li>\n\n\n\n
- JS errors preventing page elements from loading properly<\/li>\n\n\n\n
- Outdated CSS\/JS file references<\/li>\n<\/ul>\n\n\n\n
<\/span>Advertisements<\/span><\/h3>\n\n\n\nAds, especially those loading via third-party networks, frequently shift page layouts. Some options to reduce CLS from ads:<\/p>\n\n\n\n
\n- Vet ad partners and only use those with a proven track record of stable ad units.<\/li>\n\n\n\n
- Set fixed width\/height for ads in advance to allot proper space.<\/li>\n\n\n\n
- Load ads asynchronously and hide the space with
aria-hidden=\"true\"<\/code> until the ad loads.<\/li>\n<\/ul>\n\n\n\nBy 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!<\/p>\n\n\n\n
<\/span>Tips to Minimize CLS Issues<\/span><\/h2>\n\n\n\nCumulative 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.<\/p>\n\n\n\n
<\/span>Load CSS before JavaScript<\/span><\/h3>\n\n\n\nMake 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.<\/p>\n\n\n\n
<\/span>Minimize JavaScript execution time<\/span><\/h3>\n\n\n\nThe 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.<\/p>\n\n\n\n
<\/span>Add width and height attributes<\/span><\/h3>\n\n\n\nAdding 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.<\/p>\n\n\n\n
<\/span>Use CSS flexbox and grid<\/span><\/h3>\n\n\n\nCSS 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.<\/p>\n\n\n\n
<\/span>Add padding-top to large images<\/span><\/h3>\n\n\n\nFor 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\u2019t shift up. Remove the padding-top once the image loads.<\/p>\n\n\n\n
<\/span>Lazy load offscreen images<\/span><\/h3>\n\n\n\nImages 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.<\/p>\n\n\n\n
<\/span>Use CSS contain: strict<\/span><\/h3>\n\n\n\nThe 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/span>Optimizing Images to Avoid CLS<\/span><\/h2>\n\n\n\nOptimizing 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.<\/p>\n\n\n\n
<\/span>Compress images<\/span><\/h3>\n\n\n\nCompressing 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.<\/p>\n\n\n\n
<\/span>Use next-gen formats<\/span><\/h3>\n\n\n\nNewer 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\u2019ll 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\u2019s browser.<\/p>\n\n\n\n
<\/span>Add width and height attributes<\/span><\/h3>\n\n\n\nIncluding 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:<\/p>\n\n\n\n
<\/span>Lazy load images<\/span><\/h3>\n\n\n\nLazy 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.<\/p>\n\n\n\n
<\/span>Use responsive images<\/span><\/h3>\n\n\n\nFor 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/code><\/pre>\n\n\n\n<\/span>Using CSS and JavaScript to Control Layout Shifts<\/span><\/h2>\n\n\n\nCumulative 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.<\/p>\n\n\n\n
<\/span>Using CSS Techniques<\/span><\/h3>\n\n\n\nOne way to optimize CLS is by using CSS techniques like:<\/p>\n\n\n\n
\n- Specifying fixed width containers: This ensures content within the container will not shift. For example:<\/li>\n<\/ul>\n\n\n\n
css<\/p>\n\n\n\n
.container {<\/p>\n\n\n\n
width: 600px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.container {<\/p>\n\n\n\n
width: 600px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\n- 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:<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
css<\/p>\n\n\n\n
.element {\n\npadding: 10px;\n\n}<\/code><\/pre>\n\n\n\nUsing relative or absolute positioning: This allows you to precisely position elements relative to each other so they stay in the same place. For example:<\/p>\n\n\n\n
css<\/p>\n\n\n\n
.element {\n\nposition: relative;\n\ntop: 10px;\n\nleft: 20px;\n\n}<\/code><\/pre>\n\n\n\nLoading 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.<\/p>\n\n\n\n
<\/span>Using JavaScript<\/span><\/h3>\n\n\n\nTo control layout shifts, you can also use JavaScript to:<\/p>\n\n\n\n
Set fixed height elements: Give elements a fixed height so content within them does not shift. For example:<\/p>\n\n\n\n
js<\/p>\n\n\n\n
element.style.height = '200px';<\/code><\/pre>\n\n\n\n\n- Load content asynchronously: Use
async<\/code> or defer<\/code> attributes to load non-essential scripts asynchronously after page load. This prevents them from impacting page layout.<\/li>\n\n\n\n- Use Intersection Observer: This allows you to load elements as they enter the viewport, preventing layout shifts from occurring as elements load in.<\/li>\n<\/ul>\n\n\n\n
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.<\/p>\n\n\n\n
<\/span>Setting Up Monitoring to Catch CLS Regressions<\/span><\/h2>\n\n\n\nTo properly monitor for CLS regressions, you\u2019ll want to set up some tracking. The core metrics to keep an eye on are:<\/p>\n\n\n\n
<\/span>CLS Score<\/span><\/h3>\n\n\n\nYour 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 \u201cgood\u201d. 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.<\/p>\n\n\n\n
<\/span>Element Shift Count<\/span><\/h3>\n\n\n\nThe 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.<\/p>\n\n\n\n
<\/span>Most Shifted Elements<\/span><\/h3>\n\n\n\nPay 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.<\/p>\n\n\n\n
<\/span>Monitoring Frequency<\/span><\/h3>\n\n\n\nIt\u2019s 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.<\/p>\n\n\n\n
You should also monitor CLS after any major changes to your site, like:<\/p>\n\n\n\n
\n- A site redesign or theme update<\/li>\n\n\n\n
- Switching to a new ad network<\/li>\n\n\n\n
- Adding a new third-party tool<\/li>\n\n\n\n
- Optimizing images or making other resource changes<\/li>\n<\/ul>\n\n\n\n
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\u2014your users will thank you!<\/p>\n\n\n\n
<\/span>Cumulative Layout Shift FAQs: Your Top Questions Answered<\/span><\/h2>\n\n\n\nCumulative 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.<\/p>\n\n\n\n
<\/span>What exactly is Cumulative Layout Shift?<\/span><\/h3>\n\n\n\nCumulative 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.<\/p>\n\n\n\n
<\/span>How is CLS calculated?<\/span><\/h3>\n\n\n\nCLS 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.<\/p>\n\n\n\n
<\/span>What causes high CLS?<\/span><\/h3>\n\n\n\nSome common causes of CLS include:<\/p>\n\n\n\n
\n- Images loading in slowly: As images load in, the content below them gets pushed down, causing layout shifts.<\/li>\n\n\n\n
- Ads: When ads load in after the page content, they push other elements down and sideways.<\/li>\n\n\n\n
- JavaScript: JS that manipulates the page after load can trigger shifts.<\/li>\n\n\n\n
- CSS: Stylesheets that change element sizes or positions after load lead to layout changes.<\/li>\n<\/ul>\n\n\n\n
<\/span>How can I improve my CLS score?<\/span><\/h3>\n\n\n\nHere are some tips to optimize your CLS:<\/p>\n\n\n\n
\n- Lazy load images, ads and other media. Only load them as the user scrolls to them.<\/li>\n\n\n\n
- Add width and height attributes to images so the browser can allocate space for them immediately.<\/li>\n\n\n\n
- Minimize the use of CSS and JS that change the layout after the initial page load.<\/li>\n\n\n\n
- Use CSS grid, flexbox and position: sticky to create more robust layouts.<\/li>\n\n\n\n
- Consider not using ads if they significantly impact CLS. User experience should come first.<\/li>\n<\/ul>\n\n\n\n
<\/span>What is a good CLS score to aim for?<\/span><\/h3>\n\n\n\nAccording 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.<\/p>\n\n\n\n
<\/span>Conclusion<\/span><\/h2>\n\n\n\n