In some cases, when our Remove Unused CSS (RUCSS) feature is enabled, visual issues might appear.
Such issues might be:
Misaligned elements on your website;
Missing styling / CSS;
Here are some practical troubleshooting steps you can take to deal with them ⬇️
1. Make sure that no third-party features are conflicting
Some third-party plugin features may overlap our Remove 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:
2. Conflicting or incompatible CSS
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:
Broken or incomplete CSS;
Incorrect selector being added or stripped;
Optimization failing completely.
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.
3. Ensure the issue is related to our Remove Unused CSS feature
If you’ve found no conflicting plugins and your CSS code looks okay, it's time to confirm that the issue originates from our RUCSS feature.
➡️ To do so, go to the NitroPack app and disable the RUCSS feature.
Go to Cache Settings >> HTML & CSS.
Toggle off to disable the feature “Remove unused CSS.”
Save the changes.
Once you’ve deactivated the Remove unused CSS feature, go to the Dashboard 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 RUCSS disabled, please reach out to our Support team at [email protected] or via this link: https://support.nitropack.io
4. “Remove unused CSS” is causing the issue
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).
The affected CSS is now spotted. What’s next?
From there on, we have two options:
We can еxclude the problematic CSS selector from RUCSS.
This can be done via Remove unused CSS > Exclude critical CSS selectors for matching elements.
📌 Don’t forget to save your settings and purge the cache after changes are made.
Excluding the selector did not work. What now?
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 the chat in the bottom right corner.