In some cases, when our Reduce Unused CSS (RUCSS) feature is enabled, visual issues might appear.

Such issues might be:

Here are some practical troubleshooting steps you can take to deal with them ⬇️

Some third-party plugin features may overlap our Reduce Unused CSS function. In that case, they should not be enabled simultaneously.

We suggest checking your website’s plugins and disabling any Performance-related features that may clash with NitroPack.

Here is a list of plugins we are aware of that clash with NitroPack:

NitroPack uses a parser for the CSS generation. This means if the CSS code contains value or parsing errors, it can result in the following:

While NitroPack’s CSS generation can handle most syntax errors, there’s no harm in double-checking if your website’s CSS is valid.

To do so, you may use a CSS Validation tool such as:

Simply paste your CSS code there and check if any errors are detected.

📍If there are any errors, we suggest hiring a Developer to correct those.

If you’ve found no conflicting plugins and your CSS code looks okay, it's time to confirm that the issue originates from our Reduce Unused CSS feature.

➡️To do so, go to the NitroPack Dashboard and disable the RUCSS feature.

Once you’ve deactivated the Reduce Unused CSS feature, go to https://nitropack.io/user/pages and purge your website’s cache.

After the pages have been re-optimized by NitroPack, you should re-visit them and check if the visual issues still persist.

If the issue still persists even with Reduce Unused CSS disabled, please reach out to our Support team at [email protected] or via this link: https://support.nitropack.io

With this being the case, we should troubleshoot further to identify which CSS snippet is being stripped incorrectly by NitroPack.

Firstly, you should visit the problematic URL with the?nonitro parameter added at the end of the URL.

This way, you will load the non-optimized version of the page and look for the CSS affected by RUCSS.

Then, navigate to the problematic element and right-click on it, so the dropdown menu shows.

Here’s an example using NitroPack’s website:

We choose an element and click on Inspect, which opens the browser’s Developer Tools.

From here, we can see the affected CSS under the Elements tab.

When we compare CSS from the non-optimized version to the optimized version, you need to focus on steps 3 and 4 (from the screenshot).

Step 3 displays the element you have selected, while on the right-hand side (step 4), you see the CSS code for the selected element. That’s where an issue could appear.

Here, we can spot the stripped CSS selector. We can see that the max-width: 100%; selector is missing in the .img-fluid element.

📍 There are cases where the affected CSS classes might not be in the same HTML element. There also might be more than one affected CSS class located in other elements in the DOM (such as parent elements).

From there on, we have two options:

This can be done via https://nitropack.io/user/settings > CSS section > Reduce Unused CSS > Specify CSS selectors for force exclude CSS for matching elements.

📌Don’t forget to click Save Settings and purge the cache after changes are made.

Purging the cache can be done under the “Cache Status” tab of our Dashboard:

If the above option does not work as expected, we can exclude the CSS file/s that contain the affected CSS selectors.

To do this, check out our separate guide:

📌If none of the above steps helped, please reach out to our Support team at [email protected] or via this link: https://support.nitropack.io