“Remove unused CSS” is a great feature that can speed up the website’s initial loading time and provide better results in the speed tools, especially for mobile versions.
Sometimes, visual issues may occur when the RUCSS feature is active on your website.
Here are a few steps you can try to determine the affected CSS files and how to resolve the visual issues with the feature enabled:
1. Check if the issue is related to the Remove unused CSS (RUCSS) feature.
To do so, go to the NitroPack app and disable the RUCSS feature.
Once you’ve deactivated RUCSS, go to the Dashboard and purge your website’s cache.
2. Once you’re sure RUCSS is causing the issue, you can pinpoint where the CSS is stripped.
First, visit the problematic URL with ?nonitro parameter added at the end of the URL.
This way, you load the non-optimized 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.
Click on Inspect next, which opens your browser’s Developer Tools.
From here, under the Elements tab, you will see the affected CSS.
The above example shows that the Font’s color is loading via a CSS file.
Now that you have spotted the file, right-click on it and open it in a new tab.
In the new tab, you will see the content of the CSS file you inspected.
All you need to do here is copy the CSS file's name along with the .css extension at the end.
It should look like this:
Please note that more than one CSS file might be connected to the element. In this case, inspecting the elements thoughtfully before proceeding to the next step is advised.
Now, you have the CSS file that needs to be excluded by going to NitroPack's Dashboard and placing the exclusions.
Go to NitroPack’s Dashboard and proceed to the Settings tab. There, under the Cache menu, you will find the Excluded Resources feature.
Then, simply place the CSS file with wildcards on both sides, so it considers the whole path of the file.
It should look like this:
*style.css*
You can also set the type of file you wish to exclude (in our case, CSS) and the Resource Relation.
You can also decide which device to be excluded - Desktop or Mobile.
Finally, select the operation from which the file should be excluded. In this case - Remove unused CSS.
After all the changes are made, save your settings.
We then recommend doing a full cache purge so that NitroPack can create the new optimizations where the issue should no longer be present.
📌 If you need any assistance or have questions, you can always reach out to our support team at [email protected] or via this link: https://support.nitropack.io