performance tradeoffs - CSS efficiency, CSS filesize, HTML filesize

Question

From my interpretation, google recommends targeting HTML elements via id performs better than targeting purely by hierachy, but when filesize is added into this equation, how do the priorities end up?

Just to be clear, there are three factors here which I wish to discuss the trade-offs between.

CSS efficiency
CSS filesize
HTML filesize

That page does not recommend just arbitrarily adding more classes and ids, but that using more specific selectors can improve performance. You can achieve this without adding extra ids/classes. — akamike
– akamike, Commented May 17, 2010 at 13:07

Timo Westkämper · Accepted Answer · 2010-05-17 13:22:13Z

2

In general it is probably better to keep HTML filesize smaller, since HTML is mostly dynamic and difficult to cache.

CSS is often static and easily cacheable, so filesize is not so important, if you set your cache headers right. CSS selectors are probably most efficient if the selector expressions are not too complex. I believe id selectors are optimized in many browsers.

If you want to keep your CSS efficient then use a simple visual layout, a few simple CSS selectors and use newer CSS effects minimally.

Here is a good set of general best practices for HTML performance : http://developer.yahoo.com/performance/rules.html

edited May 17, 2010 at 13:22

answered May 17, 2010 at 13:06

Timo Westkämper

22.3k5 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dr. Frankenstein Over a year ago

re: "id selectors are optimized in many browsers" - shame most .net projects require avoiding html id's for styling in my experience (they are often set to guid's). That's a good shout about the static/dynamic difference between the two regarding caching.

Dr. Frankenstein Over a year ago

You have only mentioned CSS filesize vs. HTML filesize, what is your opinion on CSS efficiency vs. CSS filesize? Thanks

Collectives™ on Stack Overflow

performance tradeoffs - CSS efficiency, CSS filesize, HTML filesize

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related