I installed the "Web Developer" extension on FF and when I was viewing the "speed report", this was one of the cautions I received:

CSS_SIZE - Caution. The total size of your external CSS is 4404 bytes, which is above 4080 bytes and less than 8K. For external files, try to keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.

Can someone make sense of this and explain it to me? Does one need to be aware of the size of a CSS file, and if so, maybe split it into multiple stylesheets?

This looks like a very useful tool for development, but I wasn't aware of any CSS file size optimization criteria.

Basicly, you need to take a look through your css and see if theres anything you can remove.

There's nothing 'wrong' as such, it's just saying your css is a bit on the large side.

I dont think splitting the css will help because it will have to send 2 packets out to retrive the css (which is what it's doing at the moment). (NOTE TO READER: Correct me if I'm wrong.)

But is this really a problem that one needs to concern themselves with when designing pages? More people (at least in the USA), are going to broadband, so I would think that this would be a moot point, at least in my opinion. I'm just curious as this is the first time I've ever seen this being proposed as a possible problem.

Originally Posted by Smoking Man

4404 bytes, which is above 4080 bytes and less than 8K.

lol, I think that THEY should be the ones checking their warning prompts are not over-bloated with usefull information! Just incase you wernt sure of where 4404 bytes lay in the range between 4080 and 8k.....

I always think it's a good idea to have your pages download as quickly as possible regardless of whether visitors will be accessing your site via broadband or dial-up.

A good rule of thumb is to try to have your pages download in under 8 seconds for dial-up since that seems to be the cutoff time for people sticking around to see the site or moving on to another site.

I wouldn't be too concerned about any one individual part of the speed report. I use that site myseld all the time. It's good though to point out ways you can make your site a little faster.

I agree with Miki about not breaking up the css file into 2 since that will add another http request for the second file.

What I have been doing in my css is to remove a lot of white space. Instead of:

h1 {
color: #000000;
font-size: 16px;
font-weight: bold;
}

I use:

h1 {color:#000; font-size:16px; font-weight:bold}

Just doing that over your whole file can greatly reduce the file size and I don't think it makes it that much harder to read.

You can also use shortcuts where possible and if you know something has a default that's the same as what you want to use you don't necessarily need to specify it.

What I've seen though is the major impact in speed will be in the nunmber of images you use on a page and also how well you've optimized those images.