HTTP/2と応答可能な画像

Question

私は現在、http/2とサーバープッシュルールを試しています。 jsやcssファイルのプッシュルールを実装するのは簡単ですが、ピクチャタグやsrcset属性などのレスポンシブなイメージでプッシュ機能を効果的に使用する方法はないようです。 もちろん、すべてのバージョンのイメージをクライアントにプッシュすることはできますが、トラフィックが犠牲になるのは、特にトラフィックが限られているモバイルデバイスの場合です。

私が知る限り、ブラウザは各ファイルプッシュの約束を得ています。この約束は、ファイルが既にキャッシュされているときにそのプッシュを中断するために使用されます。私はこの声明が正しいことを願っています。

ブラウザに画像を表示する方法はありますか？画像は特殊な画面サイズまたはピクセル比率にすぎませんか？もちろん

Answer 1

、私はクライアントへの画像のすべてのバージョンをプッシュすることができますが、 特に 限られたトラフィック搭載の携帯端末で、交通災害であろうと。

はい（これは主に帯域幅の節約として行われる）異なるバージョンの使用の点では妥協します。

私が知る限り、ブラウザは各ファイルのプッシュについて約束を得ています。ファイルがすでに にキャッシュされている場合、 promiseがそのプッシュを中断するために使用されます。私はこの声明が正しいことを願っています。

はい、しかし、あなたは、あなたがキャンセル要求を取り消すことができると考えているなら、1）ブラウザは通常、キャッシュ内に既に存在する要求に対してこれを行い、 2）キャンセルには時間がかかります。その時点までに、プッシュされたリソースの一部（またはおそらくすべて）が不必要にダウンロードされた可能性があります。

ブラウザに、画像が の特殊な画面サイズまたはピクセル比率であることを伝える方法はありますか？

イメージを画面にプッシュせず、ブラウザのキャッシュにプッシュします。プッシュされたリソースは、ページに応じて適切な場合のみ使用されます（正しいsrcset値など）。しかし、上記のように、あなたはそれらが不必要にプッシュされたり、帯域幅が無駄にならないようにしたくありません。

Server Pushを正常に使用するための鍵は、リソースが必要であることを合理的に確かめることです。実際にはパフォーマンスのボトルネックが発生します。正直言って、すべてを押すのではなく、クリティカルな、レンダリング・ブロック、リソース（CSS、JavaScript）がほとんど確実に必要となるだけです。イメージは通常、ブロッキングをレンダリングしないので、通常はそれらをプッシュする必要はありません。

これはCookieで処理できます。クッキーが設定されていない場合は、新鮮なセッションである可能性があるので、クリティカルなCSSファイルをプッシュして、「cssLoaded」クッキーを設定します。ページが要求され、そのCookieが設定されている場合は、CSSファイルをプッシュしないでください。私はここでApacheの簡単な実装についてブログ：https://www.tunetheweb.com/performance/http2/http2-push/。クライアントがクッキーを許可していない場合、これは過度のプッシュにつながる可能性がありますが、ほとんどのユーザーにとっては問題ありません。

これをさらに拡張すると、JavaScriptが画面サイズのCookieを設定し、その後のページ読み込み時にサーバーはそのCookieを読み込み、画面サイズを知り、適切なサイズの画像をプッシュできます。これは最初のページの読み込みには役立ちませんが、訪問者が同じセッションでサイトの複数のページにアクセスすると、他のページの読み込みに役立ちます。しかし、正直言って、それは過度のように聞こえ、私はイメージをプッシュしません。