CSS micro-optimization

The character case doesn't matter, there's no difference in the number of bytes.
It depends on the browser:

The first statement is one byte shorter, but it also has a different meaning.

In general file size is not the only factor in the speed calculation. It also depends on how difficult it is for the browser to interpret it. So any overly clever CSS construct might squeeze some bytes out of the total size, but it's possible that the parsing process itself takes longer.

Back to your example: It is possible that second statement is a little bit slower, not just because of the extra space, but also the value consists of two tokens and depending on the internal representation of the background, the browser might have to do some unit conversions. On the other hand that keyword lookup can take a little more time, too, so it is really specific to a certain browser implementation. Most likely any gain would be in the range of nano-seconds and you shouldn't bother with this kind of optimization, as it most likely will not pay off. But if you really want to do this, you have to profile, i.e. measure the loading time.

In general it's enough to remove all comments and all unnecessary whitespace, but never do any development work on that "minified" source. Keep the original and recreate the compressed version when needed.

More information about this topic: www.minifycss.com and this.

1) So its x bytes eitherway? 2) Care to elaborate? Thanks

Nimbuz 2009-10-12 06:35:39

Removing whitespace won't save anything if you're going to gzip the css - in fact, it could increase the size of the gzipped output.

Alexander Gyoshev 2009-10-12 06:46:43

Since I'm doing micro-optimization, Im dealing in nano-seconds. Anyway, if you were to choose for 'right' or '0 100%' what would you go with? :)

Nimbuz 2009-10-12 06:50:19

@Alexander: The *relative* compression might be better, but how can adding whitespace to a data stream decrease the *absolute* size of the compressed output? (Serious question!)

DR 2009-10-12 06:51:05

@Nimbuz: I don't have enough facts to choose one, it would be pure guessing :) The best thing would be to measure the loading time difference.

DR 2009-10-12 06:57:19

Is there any benchmarking tool for CSS? Sure, let me know your guess. :)

Nimbuz 2009-10-12 07:04:40

@DR: It's kind of difficult to explain without going into compression theory, but if you have say 5 spaces in a row in one place, and 4 spaces in a row in another place, gzip might create two separate "tokens" for them. But if you added spaces so they were all 6 spaces in a row, there would only be one token so better compression.

DisgruntledGoat 2009-10-12 16:27:27

On second though, that is probably a bad example since minifying would replace all whitespace with a single whitespace character anyway. A better example would be `#fff` vs `#ffffff`. If you have another colour `0ffff0` then it could use `ffff` as a token in the latter case, but not the former. In general, all these differences are miniscule, so IMO it's not worth sacrificing readability.

DisgruntledGoat 2009-10-12 16:30:00

You can go into compression theory, if you like :) But if I understand you correctly, better compression in such a way would only occur by chance, not in a general case, i.e. you cannot decrease the size of *every* zipped text file by randomly adding whitespace.

DR 2009-10-12 17:23:31

Thats a second step. :)

Nimbuz 2009-10-12 06:42:20

Yeah, but whitespace hardly makes a difference when gzipped, so it's a good way to get a lot of result.

Rich Bradshaw 2009-10-12 12:32:21

@Nimbuz: actually, it's the first step. Gzip will make the biggest difference out of anything. The difference between gzip and minify+gzip is negligible.

DisgruntledGoat 2009-10-12 16:21:58

ansaurus

tags:

views:

answers:

CSS micro-optimization

related questions