Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Reduce unused CSS

Overview

Reducing unused CSS rules can reduce render-blocking behaviour to speed up your page load and improve your visitors' page experience.

By default, CSS files are considered render-blocking as they delay First Paint until the browser has finished executing them.

Depending on the layout and your visitors' device, loading CSS rules not needed to render above-the-fold content can have a heavy impact on your page performance, both, measured and perceived.

How does your site score on this audit?

Types of unused CSS

When talking about unused CSS, it generally falls into two categories. Both categories affect your page performance, albeit in different ways. They are:

1) Non-critical CSS

These are CSS rules that aren't used to render above-the-fold content but may still be used for other pages or for styling below-the-fold content.

2) Dead CSS rules

Dead CSS rules refer to styles that aren't used at all anymore. They may be remnants from previous versions of your site, or part of testing and/or temporary usage.

How does unused CSS affect page performance?

Every time a page loads, the browser must download, parse, and execute all external stylesheets before it can render anything on the page.

This is because the stylesheets themselves contain rules that affect the styling of the page, which need to be established before the browser can display any content.

If stylesheets contain dead or non-critical CSS rules, then they are unnecessarily larger than they need to be.

Naturally, the larger the CSS file, the longer it takes the browser to download, parse, and execute.

How unused CSS effects your performance
Loading unused CSS rules slows down your page load by serving unnecessarily large CSS files.

Because of these unnecessarily larger CSS files, the browser is blocked from tending to other critical tasks, possibly delaying your page's First Paint and increasing the amount of time your visitors spend waiting for the page to display something.

Overall, reducing the amount of unused CSS can reduce browser execution time and bandwidth consumed, resulting in a faster loading page.

How does GTmetrix trigger this audit?

GTmetrix reports all the stylesheets that have at least 2 KB of CSS that were not used to render above-the-fold content.

Expanded view of Remove unused CSS audit
GTmetrix evaluates the potential file size savings that arise from reducing unused CSS rules.

GTmetrix also estimates the file size savings possible through the reduction of unused CSS rules.

How to reduce unused CSS?

You can address unused CSS with the following strategies:

1) For non-critical CSS rules

For non-critical CSS rules, consider the following strategies:

a) Inlining critical CSS

Consider inlining critical CSS directly in the page's HTML. We talk about this in our how to eliminate render-blocking resources blog article.

b) Code-splitting CSS

Separate your non-critical CSS through code-splitting. In doing so, render-blocking behaviour can be reduced as only the critical CSS is loaded first, and the remaining non-critical CSS can be loaded later.

Read this document to learn how to implement code-splitting for your CSS files using the mini css extract plugin.

2) For dead CSS rules

For dead CSS rules, review your CSS code and remove any CSS rules that are no longer required.

Consider auditing for similar or duplicate rules to further reduce your CSS footprint. Learn more about removing dead CSS here.

Note: This is an advanced-level optimization

Developer support is strongly recommended.

Summary

2.8.0
 ****