The term Unused CSS refers to CSS rules that aren’t used on the current page. These rules make files larger than necessary and slow down the rendering process.
The “Remove Unused CSS” (RUCSS) feature works by finding CSS rules that aren’t used on the page and removing them. This directly affects how fast the browser builds the render tree.
How to Test RUCSS on Your Website
NitroPack’s Test Mode can help you try out RUCSS without risking UX issues. Start by going to the Settings panel, enabling the Test Mode and saving your settings.
When this mode is enabled, you can visit a test version of any page by adding ?testnitro=1 to its URL. While in Test Mode, all changes you make to the NitroPack configuration (including turning on RUCSS) affect only these test pages.
Please note: You have to first enable RUCCS and then initiate the optimization by visiting the URL with the ?testnitro=1 parameter. If an optimization is generated with this parameter already, you may replace “1” with 2,3,4, etc.
You can then enable RUCSS by going to the HTML & CSS menu:
Make sure you’re still in Test Mode and save your settings after enabling RUCSS.
After that, open all pages you’d like to test by adding ?testnitro=1 to their URL. At a minimum, make sure to test:
The homepage - https://example.com/?testnitro=1;
Other high-traffic landing pages - https://example.com/landingpage1/?testnitro=1;
Product pages - https://example.com/product1/?testnitro=1;
Popular articles and other content pieces - https://example.com/blog/post1/?testnitro=1.
Browse around for a few minutes and refresh these pages a couple of times. If you’re not sure whether RUCSS has been applied to a page, visit the “Cache Insights” panel.
Each test page should be optimized for RUCSS to have an effect on it.
It’s essential to test everything on the page, especially dynamically loaded elements.
For example, suppose you load content via AJAX, use pop-ups, or any other dynamic elements. In that case, you need to test them and see if they work as expected.
If everything looks and functions correctly, run the test pages through Google’s PageSpeed Insights. The “Remove unused CSS” warning should be resolved and moved to the “Passed Audits” section.
Note: In some cases, NitroPack preserves CSS rules which PageSpeed Insights considers unused. These rules style dynamic content, and removing them could break some elements.
In these cases, “Remove unused CSS” might not move to the “Passed audits” section. However, its impact should still be significantly smaller.
When you’re done testing, enable RUCSS on your live website by turning off the Test Mode and saving your settings. You should also purge your website’s cache from the Dashboard.
On the other hand, if you don’t want to keep the feature on your website, disable both RUCSS and Test Mode and save your settings.
Advanced Options
You can further customize this feature’s behaviour by using the advanced options:
The “Remove duplicates” option removes duplicate rules from the final CSS files. This option is enabled by default since it makes sure that RUCSS and Critical CSS don’t create unnecessary rules.
You also have the option to force include or force exclude the CSS for matching elements.
The force include option can be useful if RUCSS causes an element to disappear or be displayed incorrectly. In that case, you can find the CSS selector inside the original CSS file that targets the missing element and write it down in the force include field.
After that, save your settings and purge the cache. Once NitroPack re-optimizes the page, the missing element should appear.
On the other hand, you can use the force exclude to tell the system that it should not include certain CSS rules in the final CSS file. Again, you have to find the CSS selector inside the original CSS file and write it down in the force exclude field.
Lastly, if you enabled RUCSS without the Test Mode, you have to explicitly disable it if you don't like its effect on your site. Switching to one of the preset modes (Strong, Ludicrous, etc.) won't disable RUCSS automatically.