ナビゲーションのボタン画像ファイルが個別にあると1つにまとまっている場合の比較

ナビゲーションのボタン画像を表示する際、個別の画像ファイルを使用する場合と、1つにまとめられた画像ファイルを使用する場合の表示速度の差を比較しました。

ナビゲーションボタンは画面上に複数配置され、各ボタンには複数の状態がある場合が多いと思います。
このボタン表示のためにCSSの背景画像を設定して表示する場合、ボタンごと、状態ごとに個別の画像ファイルで表示するか、1つにまとめられた画像ファイルの一部分を表示する、2つの方法があると思います。
前者の方が実装は容易と思いますが、後者の方法を用いてCSSのbackbround-positionで表示位置を調整することで表示内容を切り替えた方が、表示が高速になるとされています。これを確かめたいと思いました。

今 回、ナビゲーションボタンが4つ配置してあります。そして、ボタンごとに2つの状態の画像を設定します。ボタン画像数は4×2=8です。画像ファイルを個 別に用意、すなわち8ファイル用意した場合と、1ファイルにまとめて表示切替した場合について、FirefoxのFirebugを使用して表示速度の差を比較しました。

時間の測定

画像ファイルを個別に用意した場合の例

赤枠で囲んだ部分は、ボタン画像の内の4ファイルです。画像読み込みの合計時間は4.1秒となっています。

画像ファイルをまとめた場合の例

赤枠で囲んだ部分は、8つのボタン画像ファイルをまとめた後の1ファイルです。画像読み込みの合計時間は3.24秒となっています。

それぞれの平均時間

キャッシュの影響で、Ctrl + F5の再読み込みを行ったときでも時間にバラツキがありました。このため、数回測定し、平均を求めました。

画像を個別に用意した場合の画像読み込みの合計時間を2回測定したところ、平均4.7秒となりました。

8つのボタン画像ファイルを1ファイルにまとめた場合の画像読み込みの合計時間を3回測定したところ、平均3.3秒となりました。

結果

8つのボタン画像ファイルを1ファイルにまとめただけで、このページ全体の画像に関わる時間が30%も短縮されました。画像ファイルのリクエスト回数が全体的な応答時間に及ぼす影響は少なくないようです。

画像を1ファイルにまとめるという最適化が、ページ表示時間を短縮させる効果がはっきりと表れました。