HTTP/2対HTTP/1.1:Webパフォーマンスにどのように影響するのか?

HTTP/2を使用すると、開発者は優先順位付け、つまりWebアセットの読み込み順序をカスタマイズできます。HTTP/2は、ほかにもHTTP/1に対していくつかのパフォーマンスの改善も提供します。

Share facebook icon linkedin icon twitter icon email icon

HTTP/2 & HTTP/1.1

学習目的

この記事を読み終えると、以下のことができます。

  • HTTPとは何か、HTTPバージョンの違いを学ぶ
  • HTTP/2での優先順位付けの仕組みを理解する
  • HTTP/2がWebパフォーマンスを改善する方法を探る

HTTPとは? HTTP/2がHTTP/1.1より速い理由とは?

HTTPはハイパーテキスト転送プロトコルの略で、ほとんどすべてのWebアプリケーションの基盤です。より具体的には、HTTPは、コンピューターおよびサーバーが情報を要求および送信するために使用する方法です。たとえば、誰かがラップトップでcloudflare.comに移動すると、Webブラウザはページに表示されるコンテンツのHTTPリクエストをCloudflareサーバーに送信します。次に、Cloudflareサーバーは、ブラウザがユーザーに表示するテキスト、画像、およびフォーマットを含むHTTP応答を送信します。

HTTPの最初の使用可能なバージョンは1997年に作成されました。いくつかの開発段階を経たため、このHTTPの最初のバージョンはHTTP/1.1と呼ばれていました。このバージョンはまだWeb上で使用されています。 2015年に、HTTP/2と呼ばれるHTTPの新しいバージョンが作成されました。

HTTP/2は、HTTP/1.1の作成者が予期していなかったいくつかの問題を解決します。特に、HTTP/2はHTTP/1.1よりもはるかに高速で効率的です。HTTP/2が高速化を達成した方法の1つは、読み込みプロセス中にコンテンツの優先順位を決める方法です。

優先順位付けとは?

Webパフォーマンスの文脈では、優先順位付けはコンテンツの断片が読み込まれる順序を指します。ユーザーがニュースWebサイトを訪問し、記事に移動するとします。記事の上部にある写真を最初に読み込む必要がありますか?記事のテキストを最初に読み込む必要がありますか?バナー広告を最初に読み込む必要がありますか?

優先順位付けは、Webページの読み込み時間に影響します。たとえば、大きなJavaScriptファイルなどの特定のリソースは、最初に読み込む必要がある場合、ページの残りの部分の読み込みをブロックする場合があります。これらのレンダリングを阻害するリソースが最後に読み込みされる場合、より多くのページを一度に読み込みできます。

さらに、これらのページリソースの読み込み順序は、ユーザーがどのようにページ読み込み時間を認識するかに影響します。舞台裏のコンテンツ(CSSファイルなど)またはユーザーがすぐに見ることができないコンテンツ(ページ下部のバナー広告など)のみが最初に読み込まれる場合、ユーザーはページがまったく読み込まれていないと思います。ページの上部にある画像など、ユーザーにとって最も重要なコンテンツが最初に読み込まれる場合、ユーザーはページの読み込みが高速であると認識します。

HTTP/2の優先順位付けはパフォーマンスにどのように影響するのか?

HTTP/2では、開発者は優先順位付けを実践的かつ詳細に制御できます。これにより、HTTP/1.1では不可能だった程度まで、認識される、および実際の、ページ読み込み速度を最大化できます。

HTTP/2は、加重優先順位付けと呼ばれる機能を提供します。これにより、開発者は毎回最初に読み込むページリソースを決定できます。HTTP/2では、クライアントがWebページを要求すると、サーバーは順次データを送信するのではなく、一度に複数のデータストリームをクライアントに送信します。このデータ配信方法は、多重化と呼ばれます。開発者は、これらのデータストリームのそれぞれに異なる重み付け値を割り当てることができ、その値はクライアントに最初にレンダリングするデータストリームを指示します。

アリスが、友人のボブが書いた小説を読みたいとしましょう。アリスとボブの通信手段は郵便のみです。アリスはボブに手紙を送り、ボブに小説を送ってくれるように頼みます。ボブは小説をHTTP/1.1方式で送付することにします。一度に1章を送付し、アリスから前のチャプターを受け取ったことを確認する返信を受け取ってから、次の章を送付します。このコンテンツ配信方法を使用すると、アリスはボブの小説を読むのに何週間もかかります。

では、ボブがアリスに小説をHTTP/2方式で送付することに決めたとしましょう。この場合、彼は小説の各章を別々に(郵便サービスのサイズ制限内に収まるように)、ただし同時に、送付します。また、各章に番号を付けます。第1章、第2章など。さて、アリスは小説を一度に受け取り、自分の都合で正しい順序で組み立てることができます。いずれかの章が欠落している場合、彼女はその特定の章を送ってくれるように簡単な返信を送信できますが、そうでなければプロセスは完了し、アリスはわずか数日で小説を読むことができます。

HTTP/2では、ボブがアリスに複数の章を一度に送信するのと同じように、データは一度にすべて送信されます。また、ボブと同様に、開発者はHTTP/2の章に番号を付けます。Webページのテキスト、CSSファイル、JavaScript、またはその他ユーザー体験にとって最も重要だと思うものなど、何を最初に読み込むかを決定できます。

他のどのようなHTTP/2とHTTP/1.1の違いがパフォーマンスに影響するのか?

多重化:HTTP/1.1はリソースを順次読み込むため、1つのリソースが読み込みできない場合、その後にある他のすべてのリソースがブロックされます。反対に、HTTP/2は、単一のTCP接続を使用して複数のデータストリームを一度に送信するため、1つのリソースが他のリソースをブロックすることがありません。HTTP/2は、データをバイナリコードメッセージに分割し、これらのメッセージに番号を付けることでこれを行います。これにより、クライアントは各バイナリメッセージが属するストリームを認識します。

サーバープッシュ:通常、サーバーは、クライアントが要求した場合にのみクライアントデバイスにコンテンツを提供します。ただし、このアプローチは、クライアントが要求する必要のある個別リソースが数十にわたることが多い現代のWebページでは常に実用的ではありません。HTTP/2は、クライアントが要求する前にサーバーがクライアントにコンテンツを「プッシュ」できるようにすることで、この問題を解決します。サーバーは、ボブがすべてを送付する前にアリスに小説の目次を送付したように、どんなコンテンツがプッシュされたのかをクライアントに知らせるメッセージも送信します。

ヘッダー圧縮:小さなファイルは大きなファイルよりも速く読み込まれます。Webパフォーマンスを高速化するために、HTTP/1.1とHTTP/2は両方ともHTTPメッセージを圧縮して小さくします。ただし、HTTP/2は、HTTPヘッダーパケットの冗長な情報を排除するHPACKと呼ばれるより高度な圧縮方法を使用します。これにより、すべてのHTTPパケットで数バイトが削減されます。1つのWebページをとっても、読み込みに関与するHTTPパケットの量を考えると、これらのバイト数は積み重なり、読み込みのスピードアップにつながります。

HTTP/3とは?

HTTP/3は、HTTPプロトコルの次の提案バージョンです。HTTP/3はまだWebで広く採用されていませんが、使用が増えています。HTTP/3と以前のバージョンのプロトコルの主な違いは、HTTP/3がTCPではなくQUICで実行されることです。QUICは、現代のインターネットのニーズに合わせて設計された、より高速で安全なトランスポート層プロトコルです。

Cloudflareは、開発者がHTTP/2を実装してパフォーマンスを向上させるのにどのように貢献するのか?

Cloudflareは、HTTP/2のすべての機能をサポートしています。Cloudflare上のWebプロパティは、ワンクリックでHTTP/2を無料で利用開始できます。HTTP/2に加えて、Cloudflareは、HTTP/3をサポートします。