透過PNGファイルを重ねた時の表示速度に関する実験

普段、ウェブサイトを見ていて、イケてるサイトを見るとき、表示速度に感じる「もたつき」。
その主な原因はやはり「画像」にあると思われます。
特に「透過PNGファイル」を多用せざるを得ないようなサイトでその傾向は顕著な気がします。
他にもjavascriptやらCSSやらHTMLマークアップ構造とかが複雑に絡みあっての結果なのですが、今回はそれらの中でも大きな原因のひとつ「透過PNGファイル」の扱いについてスポットを当ててみたいと思います。

何を調べるか？

透過PNGファイルを使う上で最も重要な機能「透過PNGファイル同士の重なり」によって、ページの表示するスピードがどのように変わるのかを、実験してみたいと思います。

実験する条件

①異なる透過PNGファイル24枚を単純に並べる（基準）
https://www.m-hand.co.jp/test/test1/

②異なる透過PNGファイル24枚を同じ箇所にCSS：positionで重ねる
https://www.m-hand.co.jp/test/test2/

③異なる透過PNGファイル24枚を同じ箇所にCSS：back-groundで重ねる（divの24重入れ子）
https://www.m-hand.co.jp/test/test3/

計測方法

指定URLの読み込みが完了するまでの時間を計測してくれる下記サイトのサービスで行います。
http://webwait.com/

予想する結果

同じ…というような気もするし、レンダリングに要する時間分①→②→③の順番に時間がかかるのでは…？とも。果たして結果は…？
昔、テーブルタグ全盛期にテーブルタグの入れ子実験をしていたサイトがあったのを思い出しました。で、今回はその実験のオマージュと言えます。

実験結果

①0.18s
②0.18s
③0.26s

結論

①と②がほぼ同じ結果ということに少し驚きました。「重なり」程度のレンダリングは表示スピードにそれほど影響は無いということが分かりました。
わずかな差ですが、やはり③に時間がかかるのは予想通り。HTMLソースもCSSも長く複雑になるので当然です。

③のコーディングを必要とする状況は、「伸縮を必要とする角丸ボックス」を表現する際。（多くてもせいぜい4重の入れ子でしょうけど）
デザインの都合、対応ブラウザの都合などで、③を使う必要がある場合に、表示速度という点でデメリットになるというのはサイト設計／仕様策定の段階で、一考の余地があるかも知れません。
表示スピード／デザインの必然性／対応ブラウザ／対応端末
これら制作上の制約に対してトータルに考慮してユーザー体験をよりよいものにしていきたいですね。

誤解しないで！

今回のはあくまでも実験。
メンテナンシビリティを考慮したコーディングは、とても大切なことなので、何でもかんでもpositonを使えということを言いたかった訳ではありません。
back-groundを使うべきところでは今後も正しく使っていきましょう。