开发者

CSS micro-optimization

开发者 https://www.devze.com 2022-12-08 11:40 出处:网络
I\'m considering micro-optimization of a huge CSS stylesheet and have a couple questions related to that:

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


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


  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.


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号