Remove unused CSS

2 min read

Google Lighthouse offers some warnings in the Opportunities section that will allow you to achieve a high rate of improvement if you correct them. The Remove Unused CSS alert also looks like this:

Remove Unused CSS Task

Why Unused CSS Slown Down the Performance? 

One of the best things you can do to add styles inside a page is to add the <link> tag to the source code right after the <head>.

<!doctype html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    ...

One of the best things you can do to add styles inside a page is to add the <link> tag to the source code right after the <head>.

The browser downloads the main.css file and this file is tagged as an external style sheet. This is because this file is stored separately from HTML files.

Before a browser can display or process an image in front of the user, it must first complete the necessary operations with all external style sheets. For example, downloading, parsing and processing are the three most basic of these. The browser must ensure that style sheets are rendered before it begins to display content. Otherwise, the new rules that the style sheets will present may disrupt the current look.

Remember: Every external style sheet must be downloaded from the network. The use of such network trips is extremely successful in minimizing the time the user has to wait for the page to load. Moreover, if this method was not used, the user would not see any content while waiting for the page to load, and therefore the bounce rate would be at risk of increasing.

Removing an unused CSS also prevents the creation of an unnecessary render tree. For those who ask what a render tree is, let’s quickly tell it: It’s kind of like a DOM tree, but with a small difference. The render tree contains a separate style for each node.

Detecting Unused CSS

You can use The Coverage tab of Chrome DevTools for that: 

Remove unused CSS

Test Your Website Performance!

You can quickly analyze your site in a minute