Cumulative Layout Shift (CLS)

General Strategies to Improve CLS

1. Optimise Images and Media: Define image/video dimensions to allocate space before they load, avoiding shifts.
2. Stable Fonts: Use web-safe fonts or font-display settings to reduce layout shifts from font rendering.
3. Lazy Loading for Non-Essentials: Delay loading images or scripts to speed up initial load times and prevent content shifts.
4. Optimised CSS/JavaScript: Ensure efficient CSS and JS files to prevent reflows.
5. Allocate Space for Ads: Designate a specific space for ads, avoiding dynamic changes.

How to check CLS scores

Use Google's Speed Test Tool

Use Google's Speed Test Tool for a detailed breakdown of web vitals like CLS.

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.

Troubleshooting:

1. Unexpected Content Shifts:
   • Ensure you’ve specified dimensions for images or ads. Ads dynamically loading without allocated space can cause shifts.
2. Testing Different Browsers:
   • CLS issues may vary across browsers. Use tools like BrowserStack to test how different browsers handle your website’s CLS.

Pro Tips for Optimisation:

1. Test Regularly: Periodically test CLS after making any changes, especially with media or script adjustments.
2. Focus on Above-the-Fold Content: Prioritise stability for content that loads first on the page, as this is what users interact with immediately.
3. Avoid Dynamic Layout Adjustments: Ensure any interactive elements like modals, tooltips, or banners have predictable and non-intrusive animations to avoid unexpected shifts.

FAQs: