CSSスプライトはどのようにWebサイトをスピードアップしますか？

Question

CSSスプライトがサイトのパフォーマンスを向上させる仕組みを理解しようとしていますか？

1つのイメージの合計サイズが小さいイメージの合計である場合、複数の小さなイメージのダウンロードが小さいイメージを保持する1つのイメージのダウンロードより遅いのはなぜですか？

Answer 1

HTTPリクエストのオーバーヘッドがそのような影響を持つ理由を理解することが重要です。

最も簡単な形式では、HTTPリクエストはソケットを開いて、オープンソケットで要求を送信し、応答を読み込むことで構成されます。

ソケットを開くには、クライアントのTCP/IPスタックがTCP SYNパケットをサーバーに送信します。サーバはSYN-ACKで応答し、クライアントはそれに応答してACKを返します。

したがって、1バイトのアプリケーションデータを送信する前に、サーバーに少なくとも1.5ラウンドトリップする必要があります。

クライアントが要求を送信し、要求を解析して、要求されたデータを見つけ出し、それを送り返す必要があります。これはもう1回の往復にサーバー側のオーバーヘッドがあります。いくつかの遅いサーバーが見られる）と実際のデータを送信する時間を加えたものです。パケットがドロップされて再送信されるネットワーク輻輳がないと仮定すると、これが最善のケースです。

あなたはこれを避ける必要があります、あなたはすべきです。

現代のブラウザは、関連するオーバーヘッドの一部を削減するために、複数のリクエストを並行して発行します。理論的には同じソケット上でHTTPリクエストを行うことができるため、少し上手くできます。しかし一般的に、ネットワークラウンドトリップはパフォーマンスに悪影響を及ぼすため、回避する必要があります。

Answer 2

サーバーへの往復回数が少なくなりました。 6つの異なるイメージに対して6つのリクエスト（リクエスト）をする代わりに、1つのリクエストと6つの同じイメージを使用します。サーバーが「最後に尋ねたときから変更されていません」と応答する場合は、ネットワークトラフィックの量が大幅に減少する可能性があります。

Answer 3

複数の画像が複数のhttp要求を必要とするためです。 Yahooのパフォーマンスルール＃1：Minimize HTTP Requestsを参照してください。

Answer 4

リクエスト数を最小限に抑えることに加えて、イメージによっては、ファイルサイズが分割されている場合よりも小さくなることがあります（メタデータの量が減ったため、とりわけ）。スプライトを使用するもう一つの利点は、ホバー状態の要素に最初にカーソルを置いたときにフリッカー効果がなく、ページのパフォーマンスに対するユーザーの認識が向上することです。あなたが読んでいるかもしれない画像の最適化に関する興味深いリソースは、Yahoo User Interface Blogのブログ記事のseriesです。パフォーマンスのためのYahooの推薦されたプラクティスを読み返す際に、私は彼らがsuggestedもあなたのファイルサイズを減らすことができることを見ることを驚かせた。

Answer 5

上記の理由以外に、私はそれらを扱いやすくしています。画像を更新する場合は、変更とアップロードが必要なファイルは1つのみ、コード内で変更するURLは1つのみです。