css - cssスプライトImgのロード時間はどちらが速いですか?

Question

最近、パフォーマンスを向上させるためにサイトを CSS スプライトに切り替えています。以前は 1 つの dll に 16 x 16 ピクセルの 5 つの img がありましたが、現在は 5 つの画像とテキストで構成される 220 x 140 ピクセルの css スプライトがあります。この大きな画像を読み込む方が本当に速いですか?

Answer 1

私は、実際のライブ スプライトが常に最適なソリューションであると信じています。5x 16px x 16px から 220px x 140px の 1 つのファイルを取得する方法がわかりません。最小限のスペースを使用する場合、16px x 80px の単一の画像でそれを行うことができるはずです。サイズはもちろん重要です。テキストを画像に入れるのは良い考えではありません。HTML でテキストをプレーン テキストとして送信する方がはるかに高速であり、さらにスクリーン リーダーを使用するユーザーにとっては読みやすくなり、SEO の点でもはるかに優れています。cssで再現できない特別なフォントやスタイルを使用している場合にのみ、テキストを画像に入れます。

Answer 2

答えは「場合による」

スプライト イメージから 1 つのイメージをロードすると、ファイル サイズが大きくなるため、速度が低下します。

しかし、2 番目の画像に対する 2 番目のリクエストを開始すると、スプライトはより高速になります。

Answer 3

スプライトが慎重に構築され（多くのスペースを無駄にすることなく）、サイトのあらゆる場所で使用される場合はそうです！特に、リクエスト間のレイテンシと時間が非常に長くなる可能性があるモバイルデバイスでは。

Answer 4

正直なところ、ロードする回数によって異なります。量が少ないと遅くなりますが、量が多いと速くなります。