Improving Your Website's Cumulative Layout Shift (CLS) for SEO

On this page

  1. General Strategies to Improve CLS
  2. Using Lighthouse in Chrome to Check CLS
  3. Periodic testing

In the digital age, ensuring your website offers a seamless user experience is an aspect to consider for SEO. One key aspect of this is optimising your website's Cumulative Layout Shift (CLS). This article aims to provide a clear understanding of CLS and practical steps to improve it, including using Google Lighthouse in Chrome for evaluation.

Understanding Cumulative Layout Shift (CLS)

What is CLS? Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a website. It quantifies how much the content on a page shifts unexpectedly during the loading phase. High CLS scores can frustrate users, as content moving around may lead to accidental clicks or difficulty in reading the page, negatively impacting user experience and SEO.

Why is CLS Important for SEO?

Google considers CLS as one of the Core Web Vitals, essential for providing a good user experience. Websites with better CLS scores are likely to rank higher in search engine results, as they are seen as offering a more stable and user-friendly experience.

General Strategies to Improve CLS

  1. Optimise Images and Media: Ensure images and videos have specified dimensions (width and height) to prevent layout shifts when they load. This helps the browser allocate the right amount of space on the page even before the media loads.
  2. Reserve Space for Ads: If your site uses ads, allocate specific space for them. Avoid dynamic ad sizes that can cause layout shifts when they load.
  3. Use Stable Fonts: Avoid flash of unstyled text (FOUT) or flash of invisible text (FOIT) by using stable web fonts. This prevents layout shifts due to font loading.
  4. Load Non-Critical Resources Later: Use lazy loading for images and non-essential scripts to reduce initial load time and prevent layout shifts.
  5. Optimise CSS and JavaScript: Efficient CSS and JavaScript can prevent unnecessary layout shifts. Ensure your scripts and stylesheets are optimized and don’t cause content to reflow.

Using Lighthouse in Chrome to Check CLS

Step 1: Access Lighthouse

  1. Open Google Chrome.
  2. Navigate to the website you want to test.
  3. Right-click anywhere on the page and select 'Inspect' to open Chrome Developer Tools.
  4. Click on the ‘Lighthouse’ tab.

Step 2: Configure Your Test

  1. In the Lighthouse tab, choose the categories you want to test (Performance, Accessibility, etc.). Make sure ‘Performance’ is checked to include CLS.
  2. Choose the device type (mobile or desktop) for the test.

Step 3: Run the Report

  1. Click on ‘Generate report’. Lighthouse will audit the page.
  2. Once completed, a report will be generated, showing your website’s CLS score under the ‘Performance’ category.

Step 4: Analyse the Results

  1. A low CLS score (below 0.1) indicates good visual stability.
  2. The report will also provide specific suggestions for improving your CLS.

Step 5: Implement Recommendations and Retest

  1. Use the suggestions from the Lighthouse report to optimise your website.
  2. After making changes, retest with Lighthouse to see improvements.

Periodic testing

Improving your website's CLS is essential for a better user experience and SEO. Regularly monitoring and optimising your site using tools like Google Lighthouse ensures your website remains visually stable and user-friendly. Remember, a website that's easy to interact with not only ranks better but also retains users longer, benefiting your online presence significantly.

Can't find the answer you are looking for?

Try using searching below: