0

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

1
  • I am quite curious : if you need nanoseconds speed improvement, what kind of project do you work on? It must not be a standard corporate website with a CMS behind, that's for sure. Oct 12, 2009 at 7:42

3 Answers 3

2

You'd be much better serving the css gzipped, rather than worrying about things like that.

2
  • Yeah, but whitespace hardly makes a difference when gzipped, so it's a good way to get a lot of result. Oct 12, 2009 at 12:32
  • 1
    @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. Oct 12, 2009 at 16:21
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: www.minifycss.com and this.

9
  • 1) So its x bytes eitherway? 2) Care to elaborate? Thanks
    – eozzy
    Oct 12, 2009 at 6:35
  • 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. Oct 12, 2009 at 6:46
  • 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? :)
    – eozzy
    Oct 12, 2009 at 6:50
  • @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!) Oct 12, 2009 at 6:51
  • @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. Oct 12, 2009 at 6:57
0

Sounds like this is a lot of trouble, you're time might be best spent elsewhere if you're trying to get better performance. Are you aware of Steve Souders work on High Performance Websites? http://stevesouders.com/hpws/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.