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 Optimize CSS Delivery

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

Step 1

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

/wp-content/plugins/novashare/css/style.min.css
WP Rocket combine exclusion

Note: Combining CSS is no longer needed on sites that are well optimized. Since HTTP/2, combining CSS and JS is a deprecated optimization technique. We don’t combine files on any of our sites.

Step 2

Next, you’ll need to add a snippet of code to your site to exclude it from Async CSS (as per WP Rocket’s documentation). You can add the code to your WordPress functions.php file, or we recommend using the free Code Snippets plugin.

add_filter('rocket_exclude_async_css', function($excluded_files = array()) {
	$excluded_files[] = '/wp-content/plugins/novashare/css/style.min.css';
	return $excluded_files;
});

If you’re using the Code Snippets plugin, select “Only run on site front-end” option.

Exclude Novashare from WP Rocket Async CSS snippet
Exclude Novashare from WP Rocket Async CSS snippet

And that’s it. You’ll no longer have any CLS warnings from Novashare when using WP Rocket’s Optimize CSS Delivery feature.

Was this article helpful?

Related Articles