Optimize CLS (Cumulative Layout Shift) in WordPress

Cumulative Layout Shift (CLS) is a key component of Google's Core Web Vitals and significantly influences the user experience on your website. A high CLS score can cause elements to shift unexpectedly during page loading, which is frustrating for visitors and can negatively impact search rankings.

In this guide, you will learn how to reduce the CLS in WordPress to “0” and thus improve the performance of your website.

What is Cumulative Layout Shift (CLS)?

The CLS measures the visual stability of a web page. It indicates how often and how much elements on the page shift during loading. A low CLS value means the page is stable and elements don't move unexpectedly, while a high value indicates layout shifts that impair the user experience.

Why is CLS important?

• User experience: Unexpected shifts can cause visitors to accidentally click on the wrong elements.
• SEO ranking: Google considers the CLS score when evaluating websites. A poor score can negatively impact your ranking.
• Trust and professionalism: A stable website appears more professional and increases visitors’ trust.

Causes of high CLS values

• Dynamic content without reserved space: Ads, images or iframes that load without specified dimensions.
• Asynchronous loading of resources: Delayed fonts or CSS files that affect the layout.
• Non-optimized animations: Using properties that trigger layout recalculations.

How to check your website’s CLS – GTMetrix

To check the Cumulative Layout Shift (CLS) of your website, you can use the tool GTMetrix

It offers a comprehensive analysis of your site's loading times and stability:

1. First, visit the GTMetrix website and enter your website URL in the input field.
2. After starting the test, you will receive a detailed overview of various performance metrics, including the CLS value.

Be sure to carefully analyze the results to understand which elements on your page are responsible for layout shifts.

GTMetrix also offers optimization recommendations that can help you improve the user experience and ensure your website's stability during loading. By regularly checking the CLS and making appropriate adjustments, you can ensure your website remains both user-friendly and performant.

Step-by-step guide to reducing CLS

1. Detect moving elements (on PC/laptop)

Using the Chrome DevTools Layout Shift Debugger:

1. Open your website in Google Chrome.
2. Pressure F12to open the Developer Tools.
3. Navigate to the tab "Performance".
4. Check the box “Layout Shift Regions”.
5. Reload the page and observe the highlighted areas that are causing shifts.

Tip: The Layout Shift Debugger can also create a GIF that visualizes all layout shifts on your page.

2. Optimize font loading

• Set font-display on swap or optional:@font-face { font-family: 'YourFont'; src: url('YourFont.woff2') format('woff2'); font-display: swap; }
• Why? This prevents the Flash of Invisible Text (FOIT) by displaying a replacement font during loading.
• Host fonts locally and preload them:
  • Upload the required fonts to your server.
  • Use the -Tag to preload fonts:

3. Exclude above-the-fold content from optimizations

• Lazy Loading:
  • Disable lazy loading for images and iFrames that appear in the visible area.
• Asynchronous loading of CSS and JavaScript:
  • Make sure critical CSS files load immediately.
  • Delay the loading of non-critical JavaScript, but exclude scripts required for above-the-fold content.

4. Define dimensions for media

• Pictures:
  • Always give width and height Attributes: <img src="bild.jpg" width="600" height="400" alt="Description">
• Videos and iframes:
  • Use the same principles as with images.
  • With responsive designs, you can use CSS to maintain the aspect ratio.
• Why? By reserving space for media, you prevent content from moving when the media is loaded.

5. Use CSS transform properties for animations

• Avoid Changes to width, height, margin, padding or top in animations.
• Use: /* Example of a translation */ .element { transform: translateX(100px); } /* Example of a scaling */ .element { transform: scale(1.2); }
• Why? transform-Properties do not cause layout recalculations and therefore do not lead to shifts.

6. Delay JavaScript loading

• Use plugins:
  • Plugins like “Async JavaScript” or “Autoptimize” can help optimize JavaScript loading.
• Manual delay:
  • Add the attribute defer or async to script tags if possible
• Danger: Make sure that deferred JavaScript is not needed for above-the-fold content.

7. Use a separate mobile cache

• Why? If your mobile version has different styles or features, a separate cache can help apply specific optimizations.
• How?
  • Use caching plugins like “WP Rocket”that offer this functionality.
  • Enable the option for a separate mobile cache in the plugin settings.

8. Optimize your cookie notice plugin

• Problems with some plugins:
  • Some cookie notice plugins load content dynamically and cause layout shifts.
• Recommendation:
  • Use lightweight plugins like “Cookie Notice & Compliance for GDPR/CCPA”.
  • Alternatively, you can use a custom, lightweight script.

9. Deliver dynamic content correctly

• Ads and pop-ups:
  • Reserve space for ad areas even when no ad is loading.
• Banners and inline elements:
  • Plan space for banners or promotions that will be loaded later.
• Why? By reserving space, you prevent content from moving down when the dynamic content appears.

Additional tips

• Use a quality theme:
  • Themes that are poorly coded can contribute to CLS problems.
  • Choose themes that are optimized for performance.
• Regular monitoring:
  • Use tools like Google PageSpeed Insights, GTmetrix or Lighthouseto monitor your CLS level.
• Update plugins:
  • Keep your plugins and themes up to date to benefit from performance improvements.

Conclusion

Reducing cumulative layout shift is crucial for improving the user experience and SEO performance of your WordPress website. By following the steps above, you can effectively lower your CLS score and create a more stable, user-friendly website.

If you have any questions or need support, feel free to leave a comment with your GTmetrix report or contact us directly. Together, we can take your website to the next level of performance!

Thank you for reading this guide.
We hope it helps you optimize your website and provide an excellent user experience.

If you have any questions, please leave a comment with a link to your website.

All mentioned tools – list

Here is a list of the tools mentioned in the article, each with links:

1. GTmetrix – A tool for analyzing your website's loading times and stability. Link: https://gtmetrix.com/
2. Chrome DevTools Layout Shift Debugger – A tool built into Google Chrome for identifying layout shifts. Link: https://developer.chrome.com/docs/devtools/
3. Async JavaScript – A WordPress plugin for optimizing JavaScript loading. Link: https://de.wordpress.org/plugins/async-javascript/
4. Autoptimize – A WordPress plugin for optimizing CSS, JavaScript, and HTML. Link: https://de.wordpress.org/plugins/autoptimize/
5. WPRocket – A caching plugin for WordPress that supports a separate mobile cache. Link: https://wp-rocket.me/ – We also featured WP Rocket. You can find the post here: https://blitzwp.de/wp-rocket-einstellungen/
6. Cookie Notice & Compliance for GDPR/CCPA – A lightweight plugin for cookie notices and privacy compliance. Link: https://de.wordpress.org/plugins/cookie-notice/
7. Google PageSpeed Insights – A tool from Google for measuring the performance and user experience of websites. Link: https://developers.google.com/speed/pagespeed/insights/
8. Lighthouse – An automated open-source tool for improving the quality of websites. Link: https://developers.google.com/web/tools/lighthouse
9. Google Chrome – The web browser that provides the DevTools. Link: https://www.google.com/chrome/