Remove unused CSS

Unused CSS is a stylesheet that is not used for rendering and loading the page but is still included in the code.

If you remove or change them, nothing will change on your page.

The page will be displayed the same as before the changes.

Why it is important

The main.css file that the browser downloads is known as an external stylesheet, because it's stored separately from the HTML that uses it.

By default, a browser must download, parse, and process all external stylesheets that it encounters before it can display, or render, any content to a user's screen. It wouldn't make sense for a browser to attempt to display content before the stylesheets have been processed, because the stylesheets may contain rules that affect the styling of the page.

Each external stylesheet must be downloaded from the network. These extra network trips can significantly increase the time that users must wait before they see any content on their screens.

Unused CSS also slows down a browser's construction of the render tree. The render tree is like the DOM tree, except that it also includes the styles for each node. To construct the render tree, a browser must walk the entire DOM tree, and check which CSS rules apply to each node. The more unused CSS there is, the more time that a browser might potentially need to spend calculating the styles for each node.

How the audit fails

Sitefig uses Lighthouse to detect unused CSS rules and creates the report.

See View used and unused CSS with the Coverage tab for manual detection.

Fixing the problem

In Chrome DevTools, the Coverage tab displays unused code on a line-by-line basis.

You can use this tool to review all unused CSS selectors and then remove them from your source code.

There are also several other tools to detect your unused CSS, and you can find some of them here: css-tricks.