Slice Imageでサイトを高速化

ネタ元:CSS Spritesでサイトを高速化&CSS Sprites化と画像減色でサイトを高速化

ナローバンド時代にサイトの表示を高速化する為に利用された古典的手法「Slice Image」と、ネタ元のCSS SpritesやSlice Imageで、なぜサイトの高速化が可能かを解説したいと思います。

Slice Imageでサイトを高速化

注)古典的な手法で現在はバッドノウハウです。実際には利用しないでください。

Slice Imageは画像を分割し、複数の画像として表示することにより、表示を高速化する為のテクニックです。

例えば、大きい画像を表示する際に、一度に読み込むよりは10個の画像にわけて読み込んだほうが表示は高速になります。

1個の蛇口からバケツに水を注ぐより、10個の蛇口から水を注いだほうが速く満杯になるのを想像してもらったら解りやすいと思います。

画像の分割はFireworksのスライスツールを利用することにより簡単に行うことが可能です。

また、Slice Imageでは1つの画像を複数の画像として扱う為、それぞれの画像に対して最適化を行うことが可能です。

色の少ない箇所は解像度を下げたり、gif形式に変更したり、逆に複雑な描画がされている箇所は高解像度に設定したりと。

ナローバンド時代のWEBサイトは、どれだけ画像を最適化してかどうかで表示速度が全く異なりました。

高速化の為のコネクション数

Slice Imageは画像を分割することにより高速化を図るのに対し、CSS Spritesは画像を統合することにより高速化を図ります。

相反する二つの手法が、共に高速化のために利用される理由はWebサーバーのコネクション数にあります。

Webサーバーは一度に処理できる同一コネクションに限界(注)があり、限界を超えた場合、待ち行列に入れられ順次処理されていきます。
注)MaxClientsの設定やApacheのバージョンにより異なる。

CSS Spritesは複数の画像を同一コネクションで読み込むことにより、待ち行列に入った際でも最初のコネクションですべての画像を取得することができます。
また、Webページ表示時に発生するプロセスが減る為、高速化にもつながります。

逆に、Slice Imageは画像を分割することにより、複数コネクションから同時に取得でき、一つのコネクションの時間も短い為、高速化を図ることが可能になります。

結論

現在の日本のインフラ環境などを考えると問題ないと思いますが、CSS Spritesを利用する際は作成する画像のサイズによっては逆に遅くなる危険性もありますので注意が必要かと。

スポンサードリンク

«データベースの論理削除と物理削除 | メイン | re:マルチシートアプローチとかクラス名とか»