The drive behind the adoption of new web technologies often revolves around experimentation -- developers use HTML5 or CSS 3 because it's something new and exciting. That experimental drive is great for pushing boundaries and discovering cool new possibilities. But there's another, more practical reason, to start using the newest features of the web, particularly in the case of CSS 3, which can make not only speed up your development time, but make your site faster as well.
Eliminating images in favor of CSS 3 transitions, web fonts and animations means fewer HTTP requests, fewer files for users to download and faster page loads. Examples include replacing rounded corner images with border-radius, ditching faux-shadow images for drop-shadow and replacing images of fancy fonts with the actual web fonts.
In some cases the fallbacks necessary for older browsers will negate the speed gain for those that aren't using modern web browsers. You need to be aware of your audience and which browsers make up the majority of your site's visitors before you jump in with both feet, but in those cases where newer browsers dominate, transitioning your site to CSS 3 can provide a significant speed boost.
Our friends at Smashing Magazine recently broke down the process by creating the same page twice, once using CSS 3, and then again using more traditional techniques like background images for buttons and rounded corners. The result is that CSS 3 not only sped up development time, but also made the page load faster in the browser.
Not convinced? Last year Google began using CSS 3 rules to render elements of the Gmail interface in those browsers that can handle CSS 3. The company reports that using CSS 3 sped up rendering times by 12 percent.
Naturally the speed gains possible by transitioning to CSS 3 will vary considerably depending on the design of your site and how well it lends itself to CSS 3's new features. But even a tiny speed boost, combined with the great flexibility of CSS 3, the ability to build responsive websites and the ability to tweak designs without opening Photoshop, makes CSS 3 not only fun and experimental, but downright necessary.
See Also:
