Squeeze the last drop of performance from your site – Minify your CSS

So your web design is finished, you’ve got pages and pages of quality content with traffic and blog comments galore. If your anything like me, all that’s left to do now is obsess over every infinitesimal detail imaginable to improve your perfectly fine website.

If that sounds like you, you’ll probably be interested in minifying ( See, now the picture of the Morris Mini makes sense… ) your css/code.

The purpose of minifying your site is cut down unnecessary bandwidth usage/load times. The reduction in file size is usually around 20% – 40% which for a 10kb style sheet obviously isn’t a lot, but hey, every bit counts, especially for high traffic sites.

Take this code for example;

h1 {
font-size: 18px;
font-wei ght: bold;
font-family: Helvetica;}

h2 {
font-size: 16px;
font-weight: bold;
font-family: Helvetica;}

p {
font-size: 14px;
line-height: 18px;
font-family: Helvetica;}

a {
color:#D71920;
text-decoration:none;}

a:hover{
text-decoration: underline;}

Your CSS probably looks something like this and with good reason, it’s clean and easy to follow. Once you’re design is finished however there’s space to be saved here.

By changing your code to this;

h1{font-size: 18px; font-weight: bold; font-family: Helvetica;}
h2{font-size: 16px; font-weight: bold; font-family: Helvetica;}
p{font-size: 14px; line-height: 18px; font-family: Helvetica;}
a{color:#D71920; text-decoration:none;}
a:hover{text-decoration: underline;}

You remove any unnecessary data while retaining all the required information for your stylesheet.

Tiny I know.

If you CSS isn’t laid out like this don’t panic, the more user-friendly layout works perfectly fine. But as I said, if your looking for something new to obsess over…