長い HTTP ヘッダーの影響

Principal Solutions Architect, Fastly

2025年2月10日

Web ページの本文のサイズが大きいとページの読み込みが遅くなりますが、ヘッダーが長い場合はどうでしょうか?

HTTP ヘッダーには、ページ本文に関するメタデータを提供できるという利点があります。これらのヘッダーの中には、コンテンツの種類 (text/ html や image/jpeg など) を伝える Content-Type など、不可欠なものもあります。一般的にヘッダーはかなり短いですが、非常に長いヘッダーというのはどのようなものなのでしょうか。

Fastly の Andrew Betts は以前のブログ記事で、「望ましいヘッダー」と「望ましくないヘッダー」について解説し、以下のようにアドバイスしています。

「不要なヘッダーを排除するだけでなく、含めるヘッダーの値をできるだけ短くするようにしてください」

どうすれば「長いヘッダー」を見つけられるでしょうか？ HTTP Archive は毎月100万ページを超えるデータを追跡し、Google BigQuery を通じてデータにアクセスできるようにしています。同組織は最近、さらに使いやすくなったデータセットを新たにいくつか導入しました。そこで、実際に2024年10月1日のクロールのデータを取得するために DuckDB を使用して HTTP Archive に対してクエリを実行しました。

HTTP ヘッダー名

ヘッダーは名前と値で構成されます。まずは名前から見てみましょう。ほとんどのヘッダー名は非常に短く、最も一般的な長さは4文字または13文字です。

このように短いヘッダー名ではパフォーマンス上の問題は発生しません。

HTTP ヘッダー値

次に、ヘッダー値に注目してみましょう。すべての値を確認すると、半分は15文字未満ですが、1%の値は263文字を超えていることが分かります。

これらの長い値の中で最も興味深いのは、Set-Cookie と Content-Security-Policy ヘッダーの値です。

Set-Cookie ヘッダー値

Set-Cookie ヘッダーは、サーバーからブラウザに Cookie を送信し、ブラウザは後にその Cookie をサーバーに送信します。通常、このような Cookie は短い識別子ですが、キロバイトに及ぶものもあります。

これらの一部は不適切な設定であり、中にはブラウザに大量のステートデータをプッシュするものもあり、プロダクトのデータベース全体がプッシュされるケースもあります。Cookie のサイズを小さく抑えることをお勧めします。

Content-Security-Policy ヘッダー値

Content-Security-Policy ヘッダーは、リソースの取得、ドキュメントのステート、ナビゲーションの側面、レポートを制御するディレクティブを定義します。非常にシンプルなサイトの場合、ポリシーは短くて済むかもしれませんが、ほとんどのサイトではポリシーはかなり長くなります。

短い Content-Security-Policy

短いポリシーを見てみましょう。以下は https://www.w3.org/ のポリシーです。

Content-Security-Policy: default-src 'self'; script-src 'report-sample' 'self' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-EehWlTYp7Bqy57gDeQttaWKp0ukTTEUKGP44h8GVeik=' 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M='; script-src-elem 'report-sample' 'self' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-EehWlTYp7Bqy57gDeQttaWKp0ukTTEUKGP44h8GVeik=' 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';

セミコロンで区切られた2つのディレクティブ (frame-ancestors と upgrade-insecure-requests) があります。

frame-ancestors ディレクティブは、<frame>、<iframe>、<object>、<embed> を使用してページを埋め込むことができる URL を制限します。これにより、悪意がある可能性があるコンテキストに埋め込まれるリスクを回避できます。以下は frame-ancestors ディレクティブの値です。

'self' : 同じオリジンからのページに埋め込むことができます
https://cms.w3.org/ : コンテンツ管理システムによってページを埋め込むことができます
https://cms-dev.w3.org/ : 開発コンテンツ管理システムによってページを埋め込むことができます

upgrade-insecure-requests ディレクティブは、サイトが安全なリソースのみを読み込むことをサイト所有者が意図し、安全でない URL は同等の安全な URL に置き換えられたかのように扱われるべきであることをユーザーエージェントに主張します。

長い Content-Security-Policy

次に、長いポリシーを見てみましょう。以下は https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy のポリシーです。

非常にたくさんのディレクティブがあります！ここでは img-src ディレクティブを取り上げます。このディレクティブは、画像リソースの読み込み元の URL を制限します。この場合、インライン画像 (data:) などがオリジンサーバー自体から読み込まれたり、複数の URL からインライン画像が読み込まれたりする可能性があります。

'self'
*.githubusercontent.com
*.googleusercontent.com
*.gravatar.com
data:
firefoxusercontent.com
https://*.google-analytics.com
https://*.googletagmanager.com www.gstatic.com
https://mdn.dev/
https://mdn.github.io/shared-assets/
interactive-examples.mdn.allizom.net
interactive-examples.mdn.mozilla.net
mdn.dev
mozillausercontent.com
profile.accounts.firefox.com
profile.stage.mozaws.net
upload.wikimedia.org
wikipedia.org

例えば、CSS<image> の image-set() 関数を使用するリファレンスページは、ポリシーで許可されている mdn.github.io から https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg という画像を読み込みます。

最もよく使用されるディレクティブ

非常に長いポリシーの場合、以下が上位5のディレクティブです。

img-src : 画像を読み込む URL を制限します
connect-src ; EventSource、WebSocket、XMLHttpRequest を使用する URL を制限します
script-src : スクリプトを実行する URL を制限します
frame-src : <iframe> を使用する URL を制限します
default-src : 他のフェッチディレクティブのフォールバック先です

img-src ディレクティブで最もよく指定される値

最も一般的な img-src ディレクティブを見てみましょう。以下は、上位10のディレクティブです。

data:
blob:
https://*.google-analytics.com
android-webview-video-poster:
*.facebook.com
https://googleads.g.doubleclick.net
*.fbcdn.net
*.cdninstagram.com
https://*.fbsbx.com
*.giphy.com

分析と広告はほとんどの場合、サードパーティのものです。さらに興味深いのは「CDN」ドメインです。多くのサイトでは、画像アセット専用のドメインが存在します。

短いポリシー

短いポリシーを設定することをお勧めします。これらすべてのポリシーをセキュリティ例外として考えることができます。シンプルさは、セキュリティと Web パフォーマンスの問題を抑制する鍵を握ります。シンプルさがWebサイトの最優先事項である場合、すべてのアセットをWebサイト自体から取得する必要があります。しかし、ブラウザが多数の追加Webサイトに対して個別の HTTP 接続を作成すると、ページの読み込み速度が大幅に低下します。

Andrew はすでに、「単一オリジンのWebサイトでサードパーティを使いこなす」と題された記事で、このアドバイスについて詳細に解説しています。Fastly を介して他のドメインのトラフィックをプロキシし、メインドメインから迅速にサービスを提供できるようにすることができます。これにより、短くて厳格な Content-Security-Policy を維持し、Web パフォーマンスを最大化できます。

英語のみで利用可能