Enter your keyword

Whitespace in CSS Files Makes Everything Slower, Apparently

Whitespace in CSS Files Makes Everything Slower, Apparently

I’ve been trying to increase the speed of my website lately, both through some changes that are being done for me by somebody professionally, as well as through optimizing the CSS files that govern the style of this website. So I was excited to see this article from Perishable Press on optimizing CSS. Among other things, it tells me that superfluous white space in CSS files can make a site load more slowly, which is rather interesting because in the past I think I’ve been writing CSS form in the longest way possible. If you want to strip out excess whitespace in your CSS code, you first have to make sure that the whitespace you’re removing is not essential. There are some spaces that need to remain, such as white space that shows up between values in a statement. For example, you cannot abbreviate the following code:

p {
font-family:normal 1.33em/1.33 Georgia,serif;
}

by removing the spaces in between normal and 1.33em, or by removing the space between 1.33 and Georgia. So this code:

p {
font-family:normal1.33em/1.33Georgia,serif;
}

Would not work. However, you CAN remove the spaces between lines. So the following code is more efficient than the first example:

p {font-family:normal 1.33em/1.33 Georgia,serif;}

This may not seem like a big deal, but it is when you have a long CSS file like I do. The post at Perishable Press suggests that a removal of 500 characters from a CSS style sheet can cut down on 500 bytes per second of file load time, which is a decent amount of time, when you think about it.

If you’re too lazy to remove all the white space yourself, you can also use an online CSS Optimizer to do it for you, automatically. Cool.

Hey everybody, we’ve got a new featured blogger ad up and running! Please check out Marcy at The Glamorous Life Association in the sidebar ASAP! If you’d like to participate in the ABDPBT Featured Bloggers Program, please email me and I’ll put you on the waiting list.

No Comments

Post a Comment

Your email address will not be published.