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.
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 Novashare. Add the following to the “Excluded CSS Files” box in WP Rocket.
novashare
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 exclude Novashare from “Optimize CSS delivery.” Add the following to the “CSS safelist” box in WP Rocket.
novashare
Step 3
Clear your used CSS and site cache.
And that’s it. You’ll no longer have any CLS warnings from Novashare when using WP Rocket’s Optimize CSS Delivery feature.