Reducing Unused CSS Automatically With NitroPack (+ Results)

Today, we’re releasing our Reduce Unused CSS (RUCSS) feature to all NitroPack users!

We’ve been developing and testing RUCSS for months and we’re excited to finally release it.

This article will focus on a few topics, including why removing unused CSS is important and how RUCSS works.

If you’re not interested in that, feel free to skip ahead to the “How to Test RUCSS on Your Website” section.

How Unused CSS Slows Down Page Load

The term Unused CSS refers to CSS rules that aren’t used on the current page.

These rules make files larger than necessary. Since larger files take longer to download, unused CSS slows down the page load.

This is an issue by itself, but it gets even worse when we consider the role CSS plays in constructing the render tree.

CSS is responsible for how each page looks, so browsers must load, parse and apply all CSS files referenced in the head tag before rendering the page.

This happens during the render tree’s construction, which is a map that browsers use to paint the page. That’s why CSS is render-blocking by default.

When constructing this map, the browsers have to iterate through all DOM elements and all CSS rules to find the matching pairs. That’s why having a lot of DOM elements or unnecessary CSS rules can hurt performance.

Reducing either of these can have a big impact on the speed.

Lowering the number of DOM elements can rarely be automated, but decreasing the number of CSS selectors can be done automatically in most cases.

Put simply:

When browsers find an external CSS file, they can’t do anything else until they’ve dealt with it. The more information this file has, the more time-consuming this process becomes.

A popular way of dealing with this issue is Critical CSS (which NitroPack also provides). In terms of performance, reducing unused CSS takes things even further.

How NitroPack’s RUCSS Works

The RUCSS feature works by finding CSS rules that aren’t used on the page and removing them.

For example, global CSS files usually have thousands of rules.

Now, if you’re on the home page, you don’t need the CSS that styles blog posts and vice versa. But because the rules are in a global stylesheet, the browser has to deal with them, regardless if they contribute anything to the page.

The RUCSS feature finds and reduces these unnecessary CSS rules. This directly affects how fast the browser builds the render tree.

For instance, if a page has 1000 DOM elements and 1000 CSS selectors, the client’s browser has to perform roughly 1,000,000 operations (some elements or selectors can be skipped). If we remove even half of the selectors with RUCSS, we’re left with only 500,000 operations.

That’s a massive improvement, with only a single technique.

In short:

By reducing unused CSS, we lower the total number of bytes that have to be downloaded. More importantly, we also ensure browsers can start rendering the page faster.

How to Test RUCSS on Your Website

While RUCSS works great for most websites, we encourage you to test this feature thoroughly.

NitroPack’s Safe Mode can help you try out RUCSS without risking UX issues.

Start by going to Settings >> General. Then, enable the Safe Mode and save your settings.

When this mode is active, 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 the CSS settings:

Make sure you’re still in Safe 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 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 by 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 find more details about the additional options for RUCSS in our Help Desk.