PageSpeed (Legacy)
YSlow (Legacy)

PageSpeed: Remove unused CSS (deprecated)


Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.

How does your site score on this recommendation?

Details from Google

Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk. In addition, once the stylesheet is loaded, the browser's CSS engine has to evaluate every rule contained in the file to see if the rule applies to the current page. Often, many web sites reuse the same external CSS file for all of their pages, even if many of the rules defined in it don't apply to the current page.

The best way to minimize the latency caused by stylesheet loading and rendering time is to cut down on the CSS footprint; an obvious way to do this is to remove or defer CSS rules that aren't actually used by the current page.

Read our Lighthouse documentation to learn more about removing unused CSS.



PageSpeed recommends:

  • Remove any inline style blocks containing CSS that is not used by the current page.
  • Minify CSS.
  • If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.
  • If a page references style rules that are not needed right at startup, put them in a separate .css file and defer loading of the file until the onload event is fired
  • If you use JavaScript to generate styles, be sure that those functions aren't called from pages that don't use those styles. This may require some refactoring of JS code.

Read More

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