GitHub Pagesツール

無料 Cache-Control ヘッダービルダー

静的アセット、HTMLページ、機密コンテンツ向けのCache-Control HTTPヘッダーを作成します。

ツールを読み込み中...

Cache-Control ヘッダービルダーとは

Cache-Control HTTPヘッダーはブラウザやCDNがリソースを保持してから新しいコピーを取得するまでの期間を指示します。正しく設定することで再訪問者のページ速度が向上し不必要なリクエストが削減されます。キャッシュヘッダーがない場合や過度に積極的な設定はデプロイ後にユーザーが古いコンテンツを見る一般的な原因です。

クイックアンサー

Cache-Control HTTPヘッダーを使用してブラウザとCDNがリソースを再検証する前に保持する期間を指示します。静的サイトの場合：フィンガープリント付きCSS/JSにはpublic, max-age=31536000, immutable、HTMLにはpublic, max-age=0, must-revalidate、機密ページにはno-storeを使用します。

Last updated: 2026-05-28

制限事項

GitHub PagesはカスタムCache-Controlヘッダーをサポートしていません。ETagとLast-Modifiedのみが自動的に提供されます。カスタムキャッシュルールには前段にCloudflareまたは別のCDNを使用してください。
immutableディレクティブは公式のRFC標準ではありませんが最新のブラウザとCDNで広くサポートされています。非常に古いHTTP/1.1プロキシはこれを無視する可能性があります。
Cache-Controlがno-storeを指定していてもブラウザはオフライン時やバックフォワードキャッシュ時にコンテンツをキャッシュする場合があります。Cache-Controlはヒントであり保証ではありません。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

コンテンツに一致するリソースタイプを選択します。静的HTML、フィンガープリント付きCSS/JS、画像、フィード、プライベートページ、no-storeです。
必要に応じてホスティングプラットフォームを選択して具体的なデプロイのヒントを表示します。
Cache-Controlヘッダー値をコピーしてサーバー設定、CDNルール、またはホスティングプラットフォームのヘッダーファイルに追加します。

主な用途

コンテンツハッシュファイル名を持つフィンガープリント付きCSSおよびJSファイルに積極的なキャッシュを設定します。
認証ページ、チェックアウトフロー、機密ユーザーデータのキャッシュを防止します。
フィードとサイトマップの鮮度を設定し過剰なリクエストなしでクローラーが最新のコンテンツを取得できるようにします。

用途

使用例

例

Netlify上のフィンガープリント付きアセット

静的サイトがmain.a3f8b2.jsのようなハッシュ化ファイル名を使用しています。Netlifyの_headersファイルでCache-Controlヘッダーをpublic, max-age=31536000, immutableに設定し再訪問者がキャッシュから即座に読み込めるようにします。

例

機密性の高いチェックアウトページ

ECサイトでCDNやブラウザによって決してキャッシュされてはならないチェックアウトページを配信します。Cache-Control: no-storeを設定してすべてのリクエストがオリジンから新しいコピーを取得するようにします。

よくあるミス

頻繁に変更されるHTMLページに長いmax-ageを設定するとデプロイ後にユーザーが古いコンテンツを表示します。
すべてのページにno-storeを使用する代わりに対象を絞ったno-cacheやmax-age=0を使用しないとパフォーマンスが低下します。
GitHub PagesはカスタムCache-Controlヘッダーを無視することを忘れがちです。ETagとLast-Modifiedのみが自動的に設定されます。

検証

ブラウザのDevToolsのNetworkタブでCache-Controlヘッダーを確認します。特定のリソースのレスポンスヘッダーを探します。
curl -I https://yoursite.com/pathを使用してコマンドラインからヘッダーを確認します。CDNがオリジンヘッダーを正しく通過させていることを確認します。

FAQ

Cache-Control ヘッダービルダーのFAQ

no-cacheとno-storeの違いは何ですか？

no-cacheはブラウザがキャッシュされたコピーを使用する前にサーバーで再検証する必要があることを意味します。レスポンスはキャッシュ可能ですが新鮮であることが確認される必要があります。no-storeはメモリ内も含めて一切キャッシュしてはならないことを意味します。ほとんどの更新重視のページにはmust-revalidate付きのno-cacheを使用し支払いページなどの機密データにのみno-storeを使用してください。

GitHub PagesでCache-Controlを設定するにはどうすればよいですか？

GitHub PagesはHTMLにはCache-Control: max-age=600（10分）バージョン管理されたアセットにはmax-age=31536000（1年）を自動的に設定します。これらの値を上書きすることはできません。カスタムキャッシュヘッダーが必要な場合はGitHub Pagesの前段にCloudflareをPage Rulesとともに配置するかカスタム_headersファイルをサポートするNetlifyやVercelに切り替えてください。

Cache-Controlのimmutableとは何ですか？

immutable拡張はユーザーが更新ボタンを押した場合でもブラウザに再検証をスキップするよう指示します。コンテンツハッシュファイル名（app.a3f8b2.jsなど）を持つバージョン管理されたリソースにのみ使用してください。コンテンツが変更されるとファイル名も変わるためキャッシュされたバージョンは定義上決して古くなりません。バージョン管理されていないURLにはimmutableを決して使用しないでください。

静的サイトの画像はどのくらいキャッシュすべきですか？

バージョン管理されていないファイル名の画像の場合max-age=86400（24時間）が安全なデフォルトです。画像はめったに変更されませんが更新は1日以内に反映されるようにしたいところです。フィンガープリント付き画像（logo.v2.png）の場合はmax-age=31536000をimmutableとともに使用します。毎日変更される画像（日次チャートなど）の場合はmax-age=3600またはmust-revalidate付きのmax-age=0を使用します。