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 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
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
Scroll down and click “Save Changes.”
Step 4
Clear your used CSS in WP Rocket.
Step 5
Clear the page 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.