

Different CSS techniques and their performance - screwlewse
http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/

======
wdewind
I don't understand CSS optimization. Who actually notices a page being slowed
down by CSS? I've never once had this problem, is there a certain audience
that frequently would?

Anyone here actually using SASS etc specifically for performance?

~~~
Daniel_Newby
It's easy to slow a page to a crawl using complex CSS selectors.

------
rimantas
My take on this: the game is not worth the candle. Usually there are lower
hanging fruits to be gathered regarding client-side performance, and I am not
even sure it is worth to bother with CSS performance: 100ms on huge page is
not that much. Also there are other factors to consider: adding classes to
your markup will increase it's size, and it will be downloaded every time
(with millions of hits it adds up). CSS on the other hand can be cached and
have zero impact on load time (expires set into future). Non-semantic class
names are ugly. My ideal page would use as little IDs and classes as possible
(preferably none, doable with HTML5 where you can use semantic elements
instead of trying to give some semantic meaning to the DIV via some class
name). Yes descendent selectors and friends are slower than direct targeting
with id or class, but the difference is negligible. Spend your time reducing
the number of http requests, minimizing js, taking care of parallel loading,
setting proper expires and cache control headers, don't sweat about CSS
selectors speed.

~~~
screwlewse
RE: low hanging fruit. It's assumed that you have already done that. Just one
more piece of the puzzle. As the test suggests.. it would be good to code in a
way that's less bloated, however it's not always going to make a huge
difference.

re: zero-impact if cached: I assume you mean visitors that have already
downloaded your css from a previous visit? That's been shown to be inaccurate.
I also would assume that you have css with far future expires and is zipped,
(possibly URI'zed), and on a fast CDN. (not all CDN's are fast). Yet there is
no such thing as zero impact. The css still has to be painted on the page and
even when cached. If your CSS is 500kb, that could take a long time for a
browser to parse CSS.

re: non-semantic class names.. it's a test.. nuf said

re: your ideal site: There't lots I could say here.. besides the fact that IE
is still to simpleton to understand most selectors I assume you are speaking
of. Also, if you are talking about decendent selectors like I am thinking..
check the Link to Steve Souder's site.. they talk on that. (hint: they're
faster)

again, this is assuming you have done all of the other things.. and then some.
There is much more you can do before optimizing your css.. but some are at
that point. Just because it doesn't apply to you, doesn't mean it isn't an
issue to others.. Nor does it mean we should assume there is no issue, without
testing and measuring (in order to make sure.)

------
screwlewse
Yikes! You are right.. what was I thinking adding the @font-face.

However, the rest of the css is used in all the tests as a base. I don't see
how that would affect the test considering it's on all scenarios (except the
no css scenario)

I use the javascript-based date as I found it to be quite accurate at in
giving me the time difference from the time css is loaded until it's done.
Thanks for the reminder.. I need to credit the testing JS to Steve Souders..
found in his article here:
[http://www.stevesouders.com/blog/2009/03/10/performance-
impa...](http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-
css-selectors/)

------
screwlewse
Yes, I do. I come from large corporations, where studies have shown that when
a site is slower, even by 50-100 milliseconds, your traffic WILL decrease.
When your site gets a million views a day, 2 percent is large. Thats when you
start to nitpick each and every part of your site that slows things down. I
use SASS/Compass because it's an awesome tool to maintain your CSS, however
it's very easy to add alot of extra CSS (mixins and whatnot). The reason I
created this, was to find out if using @extend would perform similarly to the
OOCSS methods, which are proven to perform fast. I think it accomplishes
exactly that.

------
rgrove
The test page contains extraneous CSS that will affect the outcome of the
tests, including a @font-face declaration (yikes).

Also, given the extremely low times in question here and the lack of
iterations, JS-based profiling using Date objects may give an inaccurate
picture of the differences between techniques.

------
screwlewse
I removed the external font file and some other css that may skew the results.
Next, I'll re-test and the charts automatically update.

