What is minifying CSS?
Minifying CSS is just what the name implies... making your CSS instructions smaller. When I first wrote this article a couple of years ago, I was mainly thinking of how to make your existing CSS smaller via an online tool, but times are changing. I now know that to truly minify your CSS you need to know if you are using all your CSS and if you aren't then something needs to change.
Since all CSS files are render blocking by default it is essential to have the smallest lightest CSS possible so your pages can load faster.
See your CSS usage by using the CSS delivery tool.
Wordpress themes and CSS
The most common way that CSS goes overboard is when you buy a brand new, beautiful wordpress theme. It is shiny and lovely. The problem is that it is also very configurable...
Many Wordpress themes might have a dark background or a light background. In this scenario you choose the light background and it looks superb.
But wait... Did you know that even though you chose the light background that the CSS for the dark background is still being loaded? That is likely Several hundreds of lines of code.
Ouch. Now think about this... If your theme was offered in twelve colors, you are still loading the CSS for all those twelve colors? Now we might be in the thousands of unused css instructions. Ouch again.
It is common that wordpress theme load thousands of CSS instruction that they are not using. You may have chosen "pink" but the css instructions for blue, red, white, black, purple, etc. are still there.
Minify means make smaller
If your themes are loading all that CSS and you are not using it, it makes sense that much of it can be deleted. It is my hope that Wordpress theme authors will come to understand this. But If you have bought a theme from somewhere or someone, make sure to ask what CSS is repeated for different customizations that you are not using.
It isn't just Wordpress
The true first step to minifying CSS is to ensure you aren't loading CSS that is not being used. This info will often only come from the theme author.
How to Minify existing CSS
Even if you can not ferret out all the unused css instructions in your code, you will likely need to at least run your your css through a css minify tool. Here are a couple I have used...
An example of minifying css
Below are some CSS instructions that are formatted using alot of white space (not good for file size)...
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
That code can be copied and pasted into an online tool and the resulting code will look like this...
body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}
The minified code is smaller in file size, and also has other enhancements added, particularly when using larger CSS files. Because your CSS code is smaller in size and more optimized, your pages will load faster
No matter how you use your CSS (inlined, external files, combined external file) smaller is better and will help your webpages load faster.
by