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.

3) For WordPress (or other CMS) Users

While reducing unused CSS on your page is generally not easy, you can use WordPress (or other CMS) plugins to help you accomplish this.

For example, WP Rocket has an Optimize CSS delivery option, which also contains a Reduce unused CSS feature.

Note: This is an advanced-level optimization

Developer support is strongly recommended.

Summary

2.8.0
 ****


Using WordPress? Improve this Audit with WP Rocket

WP Rocket can reduce unused CSS on your page with just a few clicks.

Get full page caching for your WordPress website (and more) to speed up overall loading times.


Get WP Rocket »

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×