CSS3 vs. CSS: A Speed Benchmark

http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

by acrum • 15 years ago

54 10 15 years ago

smashingmagazine.com

someone_here• 15 years ago

This is the kind of benchmark I like to see for any technology.

Anyone know of anything similar for other web technologies?

lloeki• 15 years ago

Indeed. Although it is "just one experiment, and the outcome was influenced by [his] own abilities." this kind of "benchmark" is what gives me ammo against grumpy, entranched dev who goes "new_foo is useless anyway, I can do that with old_bar too", and to make a hesitant hierarchy finally make a leap forward instead of clinging into aging, "mastered" technology.

inji• 15 years ago

If the differences between css3 and no-css3 is so small as in this test (a few rounded corners, some drop shadows and some tiny gradients), you should totally go with pure css3 since it'll get easier to maintain but still look decent in old browsers. If you're having heavy artwork which will have huge impact on the experience; go with images (perhaps a mix?)

lovskogen3• 15 years ago

Gah. That's obvious. But he didn't test the _performance_. That's the real pain of CSS3 versus CSS. Try using box-shadow, or lots of gradients on a medium old machine – then you'll get a sluggish experience.

snprbob86• 15 years ago

box-shadow is seriously slow

We had a site with the main content area shadowing over the nav bar. When the browser window was large on my big monitor scrolling was very sluggish. SpeedTracer (in Chrome) was reporting 90 to 110ms times per render, dozens per flick of the mouse wheel! Replacing the box-shadow with an image resulted in 6 to 10ms per render: silky smooth.

lovskogen3• 15 years ago

Yeah box-shadow is the worst, especially if you scroll. So I wonder why the author doesn't mention this.

mgcross• 15 years ago

I appreciate the comparison, and I know it's nitpicking, but those images seem much heavier than they need to be. Using JPGs and/or 8-bit PNGs for the header and sub images could have saved 400K or so.

CSS3 vs. CSS: A Speed Benchmark

Related Stories