Use code NOVASHARE for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to fix Cumulative Layout Shift (CLS) with Novashare

How to fix Cumulative Layout Shift (CLS) with Novashare

Cumulative Layout Shift (CLS) basically measures elements that cause the greatest layout shifts when a page is loading. When you see buttons, images, etc., start loading in one area of the page and then suddenly bounce to a different area; this would be considered a layout shift. Google triggers warnings for CLS as it hinders the user experience. 

You won’t have Cumulative Layout Shift (CLS) warnings with Novashare. It’s optimized out of the box for Google Core Web Vitals.

No Cumulative Layout Shift (CLS) with Novashare
No Cumulative Layout Shift (CLS) with Novashare

However, there might be times when you’re using another optimization plugin that wraps up your code, such as concatenation or Critical CSS, and this could cause unexpected CLS increases. 

Below we have an example of how to fix this when using WP Rocket’s Optimize CSS Delivery feature (Critical CSS). We’ll keep adding more examples as we discover them. Most likely, the steps will be very similar if you’re using Critical CSS or concatenation in another plugin.

How to fix CLS with WP Rocket’s File Optimization

If you’re using WP Rocket’s File Optimization feature for CSS and having issues with CLS and Novashare, follow the steps below to fix it.

Step 1

If you’re minifying your CSS, you’ll first need to exclude Novashare. Add the following to the “Excluded CSS Files” box in WP Rocket.

novashare
WP Rocket minify CSS exclusion
WP Rocket minify CSS exclusion

Step 2

Next, you’ll need to exclude Novashare from “Optimize CSS delivery.” Add the following to the “CSS safelist” box in WP Rocket.

novashare
WP Rocket Optimize CSS delivery exclusion
WP Rocket Optimize CSS delivery exclusion

Step 3

Scroll down and click “Save Changes.”

Step 4

Clear your used CSS in WP Rocket.

Clear used CSS in WP Rocket
Clear used CSS in WP Rocket

Step 5

Clear the page cache in WP Rocket.

Clear cache in WP Rocket
Clear cache in WP Rocket

And that’s it. You’ll no longer have any CLS warnings from Novashare when using WP Rocket’s File Optimization features.

Was this article helpful?

Related Articles

Your Mastodon Instance