HTTP/2 サーバープッシュ

Fastly は、オリジンサーバーが送信したプレロードキーワードを持つ link ヘッダーを認識し、指定されたリソースをクライアントにプッシュします。例えば、この link レスポンスヘッダーは HTTP/2 プッシュをトリガーします。

1
link: </assets/jquery.js>; rel=preload; as=script

1つの link ヘッダーで、複数の link ヘッダーと複数のアセットをサポートしています。

1
link: </assets/jquery.js>; rel=preload; as=script, </assets/base.css>; rel=preload; as=style

link ヘッダーで使用される属性は、サーバーのプッシュやヘッダー自体の処理方法を左右することができます。追加の属性を含まない場合、link ヘッダーはサーバープッシュをトリガーし、クライアントに転送されます。

1
link: </assets/jquery.js>; rel=preload; as=script

nopush ディレクティブと併せて使われた場合、ヘッダーはプッシュを_トリガーせず_、クライアントにそのままに渡されます。

1
link: </assets/jquery.js>; rel=preload; as=script; nopush

x-http2-push-only ディレクティブと併せて使われた場合、ヘッダーはサーバープッシュをトリガーしますが、その後削除され、クライアントには転送されません。

1
link: </assets/jquery.js>; rel=preload; as=script; x-http2-push-only

属性は必要に応じて組み合わせることができます。

1
link: </assets/jquery.js>; rel=preload; as=script, </assets/base.css>; rel=preload; as=style; nopush, </assets/main.css>; rel=preload; as=style; x-http2-push-only

リンクヘッダーと Amazon S3 バケット

Amazon Simple Storage サービス (S3) バケットをオリジンサーバーとして使用している場合、以下のようなキャッシュ設定条件を適用して link ヘッダーを使用することができます。

set beresp.http.Link = beresp.http.x-amz-meta-Link

h2.push() 機能でサーバープッシュ

サーバープッシュを h2.push() VCL 機能でトリガーすることができます。プッシュされるアセットは、パラメーターとして関数に渡されます。例:

1
2
3
4
5
6
7
8
sub vcl_recv {
#FASTLY recv

  if (fastly_info.is_h2 && req.url ~ "^/index.html")
  {
    h2.push("/assets/jquery.js");
  }
}

この h2.push() 関数は、呼び出されるとすぐにサーバープッシュをトリガーするため、サーバーレスポンスに link ヘッダーを付ける必要がなくなります。つまり、プッシュのトリガーとなったリクエストのレスポンスをサーバーから受け取る前に、アセットをクライアントにプッシュすることができるということであり、配信も加速されます。

Back to Top