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 “Reduce 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 Safe Mode can help you try out RUCSS without risking UX issues. Start by going to the Settings panel, enabling the Safe 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 Safe Mode, all changes you make (including turning on RUCSS) affect only these test pages.
You can then enable RUCSS by going to CSS settings:
Make sure you’re still in Safe Mode and save your settings and 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 Status” panel. Each test page should be optimized for RUCSS to have an effect on it.
It’s important 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 that 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, you can enable RUCSS your live website turning off the Safe 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 the Safe Mode and save your settings.
You can further customize this feature’s behavior by clicking on “Additional options”.
The “Dedupe Based On Critical CSS” 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 Safe 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.