Speed Minify 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 truely minify your CSS you need to know if you are using all your CSS and if you aren't then something needs to change.

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 look 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?

Ouch. Now think about this... If your theme was offered in twelve colors, you are still loading the CSS for all those twelve colors?

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

Online tools are available to do this. This website has one such tool and I will describe how to minify your CSS on that tool (or just go to our Minify CSS tool).

Below are some CSS instructions that are formatted using alot of white space (not good for file size)...

That code can be copied and pasted into our tool and the resulting code will look like this...

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

How to do this?

1. Go to the Minify CSS tool.

2. Enter CSS code into tool

3. Click "minify"

4. Copy new code

Properly Minimized CSS code improves page speed

No matter how you use your CSS (inlined, external files, combined external file) smaller is better and will help your webpages load faster.