Unminified CSS

Thanks to the following report, which you will see in the opportunities section of Google Lighthouse, it will be very easy to detect CSS files using high bytes.

Did you know that the vast majority of CSS files on your web page are much larger than they should be? Let’s explain this with an example if you wish. Check out the code below:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

All of the code you see above can be downloaded into a single line of code that will provide the same functionality. Here is as follows:

h1, h2 { background-color: #000000; }

The two different codes you see above perform exactly the same functions. But while the first takes up much more bytes, the second takes up much less and performs the necessary function. Moreover, removing the whitespace improves the performance of the website. Here is a version of whitespace that has also been removed:

h1,h2{background-color:#000000;}

Some of the tricks and hints are used in order to take the minification process one step further. For example, six-digit color values can also be used in their trivalent form. Using #000 instead of #000000 will accomplish the same purpose.

Google Lighthouse reveals the difference between the two cases by calculating the minified version of the CSS system. According to this calculation, a potential saving value appears. If you start with an audit that has high potential saving values, your performance boost rate can increase much faster. For this, you can first use basic optimization methods, then use different tricks such as the color value optimization we have just mentioned to reduce the already small file size even more.