Question

I’m considering micro-optimization of a huge CSS stylesheet and have a couple questions related to that:

1. Is lowercase better than uppercase for reducing file size?
2. Is background-position:right (5 chars); smaller than background-position:0 100%; (6 chars incl whitespace)?

Is there anything else that might help reduce file size? (Besides merging CSS selectors, properties etc ofcourse, that I’ll have to do manually)

Thanks

Answer 1

1. The character case doesn’t matter, there’s no difference in the number of bytes.
2. 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: http://www.minifycss.com and this.