Different CSS techniques and their performance
screwlewse.com
Different CSS techniques and their performance
1–9 of 9 posts
Re: Different CSS techniques and their performance
#2The 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.
Re: Different CSS techniques and their performance
#3Yikes! 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...
Re: Different CSS techniques and their performance
#4I removed the external font file and some other css that may skew the results. Next, I'll re-test and the charts automatically update.
Re: Different CSS techniques and their performance
#5I 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?
Re: Different CSS techniques and their performance
#6Yes, 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.
Re: Different CSS techniques and their performance
#7I 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?
It's easy to slow a page to a crawl using complex CSS selectors.
Re: Different CSS techniques and their performance
#8My 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.
Re: Different CSS techniques and their performance
#9My 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…
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.)