Squeeze the last drop of performance from your site – Minify your CSS
Posted December 20th, 2009.
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…


It would be really super nice if the IDEs that our community uses to build web apps would let us code em up like your initial example and then pack em down when closing the file… only to unpack em when re-opening.
Vic,
It would be nice, wouldn’t it. Fingers crossed that someone at the software companies reads this and gets cracking.
It would free me from having to use notepad all the time to review code that’s a pain to view in design software.