CSS vs CSS3 スピードテスト

１年程前にCSS3を利用するとブラウザに負担をかけてしまい、ウェブサイトの表示パフォーマンスが悪くなる　などということを言われたことがありました。おそらく、ブラウザの進化の過程では、そんな時もあったのかもしれません。でも最近ではCSS3がパフォーマンスが悪くなるというのは間違いのようです。

上記画像はMERCURY AUTOMOBILESというテストページ ですが、CSSで画像を多用したバージョンと、CSS3で角丸などを利用して画像を極力減らしたバージョンを用意しています。

利用されたCSS3

1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow with RGBa

結果

となりました。

CSS3の方がパフォーマンスで優れているようです。つまりCSS3を利用することはモバイルウェブのようにパフォーマンスがより影響する環境ではより効果が高いことが予測できます。今後は CSS3をもっと勉強するようにしたいですね。

出典：

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