CSSスプライトって意味あるの？ HTTP/2になった時代に考察してみる

CSSスプライトの考察

HTTP/1とHTTP/2の違い

普段、なにげなくブラウザで各社のウェブサイト（ホームページ）を見ていますが、内部的な話をすれば、ブラウザは、IP/TCPプロトコルの上で成り立つHTTP通信により、サーバーからクライアントにデータを読み込んできます。

そして、このHTTP通信をするための規格というものは、時代に沿って進化をしていて、一昔前はHTTP/1系でしたが、2015年頃からHTTP/2となりました。

HTTP/1系⇒HTTP/2になって色んな変化があったのですが、今回の話題に関連する大きな部分をいえば"ストリーム"です。

HTTP/1の時は、HTTP通信をする際、「HTTPリクエスト＆HTTPレスポンス」をするたびに、いちいちTCP接続をしないといけませんでした。また、同時にTCP接続できる数の上限は「6」です。（ブラウザによって差異あり）

対して、HTTP/2になった今は、1つのTCP接続の中で、「HTTPリクエスト＆HTTPレスポンス」を制限なしに並行して扱えるようになりました。

たとえば5つ分の「HTTPリクエスト＆HTTPレスポンス」があった時、

といったように、TCP接続の回数を極端に減らせるようになりました。TCP接続は3ウェイハンドシェイク方式の通信をしており、1回のやりとりで3往復する必要があるので、これの回数を減らせることは、かなり通信速度への影響があります。

CSSスプライトの大きな魅力はHTTP/2が実行してくれる

HTTP/1時代は、CSSスプライトを用いることで、画像ファイルの通信回数を減らし、その分のTCP接続を減らすことができました。

ただ、HTTP/2時代は、そもそもTCP接続の回数が減っているので、CSSスプライトを使っても、得られるメリットがHTTP/1時代より減っている事実があります。

もちろん、HTTP/2においても、CSSスプライトにしたほうがHTTP通信自体の回数自体は確かに減るので、少なからず効果はあります。HTTPリクエストヘッダーとHTTPレスポンスヘッダーは約700～800バイト程度なので、通信の回数を減らすことは根本的には大事です。

しかし、最近のサーバー環境だったり、CMS環境は、昔に比べてかなり高速仕様になっているので、わざわざ作る必要があるかというと、「うーん……」と感じてしまいます。

わざわざ作ってもデメリットのほうが多そう

タスクランナーなどで自動作成できる制作環境を構えている人は、いつも通りにCSSスプライトを作成してOKだと思います。

ただ、CSSスプライトをわざわざ作る、ということで工数がかかりそうな人の場合は、わりと無視して良いとも感じます。

というのも、そんな読込速度に大きい効果あるわけでもないし、それよりもCSSスプライトの制作環境を整えたり、CSSスプライトでまとめた画像について変更などがあった時の管理コストを考えると、あんまりメリデメが成り立っていない気がするためです。

とくに、

などはこだわりすぎず、べつに使わなくても良いんじゃないかと思います。

とはいえ、当然、CSSスプライトが役立つ場面もあります。

HTTP/2時代にCSSスプライトを使う状況とは

ウェブサイトの読込速度において、シビアな目標値を求められる場合は、やはり使ったほうが良いかと思います。

たとえばECサイトだったり、ニュースサイトだったり、他にも利用ユーザーが多いと想定されるサイトなどは、HTTP通信を減らしておくことは大事です。（アイコンが多い場合はなおさら。）

HTTP/2のデメリットも認識しておく

1つのTCPで複数のHTTP通信を並列できるHTTP/2ですが、もちろんデメリットはあります。

それは単純な話、1つのTCP接続内において欠損があった時に、全リクエストがストップするかもしれない、というリスクです。

パケットロスの多い環境においては、HTTP/1のほうがパフォーマンス良いなどの話もある様子。

とはいえ、多くの共用サーバーは、SSLにするとHTTP/2通信になるように設定されていることがほとんどですので、今からHTTP/1通信に切り替えることは、なかなか特殊なケースだとは思います。（普通の人は、まずやらない。）

まとめ

HTTP/2の時代となった今は、基本、あまりCSSスプライトにこだわらなくて良いかと思います。すでにCSSスプライト作成の環境が整っている人や、読込速度にシビアさが求められる状況の時は、もちろんやってOKです。

ただまあ……

理屈はさておき、職場だったり、クライアントさんとの関係だったりで「やれ」と言われたらやるしかないんですけどね。。。

おまけ：Googleさんはどうしてる？

昔、Googleさんも検索のトップページなどでCSSスプライトを使っていたのですが、今は使っていない様子です。というか、そもそも画像でなく、SVGを使っている模様。うーん、トレンド。