キャッシュヘッダーチェッカー
URLを入力するだけでHTTPキャッシュヘッダー7項目を解析し、ブラウザ/CDNキャッシュの設定状況をスコアリングします。
URLを入力するとHTTPキャッシュヘッダー7項目を解析し、ブラウザ/CDNキャッシュの設定状況を表示します
URLを入力してキャッシュ設定をチェックしましょう
Cache-Control・ETag・CDNステータスなど7項目を自動検査します
HTTPキャッシュヘッダーとは
HTTPキャッシュヘッダーは、Webサーバーがブラウザやプロキシ、CDNに対してリソースのキャッシュ方針を指示するためのHTTPレスポンスヘッダーです。 適切に設定することで、リピートアクセス時のページ表示速度を大幅に改善し、サーバーへの負荷を軽減できます。
GoogleのCore Web Vitals(特にLCP: Largest Contentful Paint)の改善にキャッシュ設定は直結します。 PageSpeed Insightsでも「効率的なキャッシュポリシーの使用」が監査項目に含まれており、SEOにも間接的に影響します。
検査対象の7つのキャッシュヘッダー
| ヘッダー名 | カテゴリ | 目的 |
|---|---|---|
| Cache-Control | ブラウザ | キャッシュの有効期限・動作を制御する最も重要なヘッダー |
| ETag | 検証 | コンテンツのバージョン識別子。条件付きリクエスト(304応答)に使用 |
| Last-Modified | 検証 | リソースの最終更新日時。If-Modified-Sinceによる条件付きリクエストに使用 |
| Expires | ブラウザ | キャッシュの有効期限(HTTP/1.0互換)。Cache-Controlが優先される |
| Age | CDN | CDNキャッシュ上のリソース経過時間(秒) |
| Vary | ブラウザ | コンテンツネゴシエーション用。キャッシュキーの一部になるヘッダーを指定 |
| CDN Cache Status | CDN | CDNキャッシュの状態(HIT/MISS)。Cloudflare・Vercel・Fastly等のステータスを検出 |
スコアの見方
各ヘッダーの設定状況を「設定済み」「要確認」「未設定」の3段階で判定し、100点満点のスコアを算出します。 また、ブラウザキャッシュとCDNキャッシュの状態を別々に判定します。
- 70点以上: キャッシュが適切に設定されています
- 40〜69点: 一部のキャッシュ設定が不足しています
- 39点以下: キャッシュ設定の見直しが必要です
Cache-Controlの主要ディレクティブ
| ディレクティブ | 説明 |
|---|---|
max-age=秒数 | ブラウザキャッシュの有効期間 |
s-maxage=秒数 | CDN/プロキシキャッシュの有効期間 |
public | CDN/プロキシにキャッシュを許可 |
private | ブラウザのみキャッシュを許可 |
no-cache | キャッシュ前にサーバーで再検証が必要 |
no-store | キャッシュを一切保存しない |
immutable | コンテンツが変更されないことを宣言 |
stale-while-revalidate | 期限切れキャッシュを返しつつバックグラウンドで再検証 |
キャッシュヘッダーの設定方法
- Next.js / Vercel:
next.config.tsのheaders()でCache-Controlを設定。静的アセットは自動的にimmutableが付与される - Apache:
.htaccessのmod_expiresまたはHeader set Cache-Controlで設定。.htaccessジェネレーターで生成可能 - Nginx:
expiresディレクティブまたはadd_header Cache-Controlで設定 - Cloudflare: ページルールまたはCache Rules で
Browser TTLとEdge TTLを設定 - WordPress: W3 Total CacheやWP Super Cacheプラグインでブラウザキャッシュを有効化
活用シーン
- PageSpeed Insights改善: 「効率的なキャッシュポリシーの使用」の監査対応。ページ速度チェッカーと併用して改善効果を確認
- CDN導入効果の確認: CDNキャッシュが正しくHITしているか検証する
- サーバー移行後の確認: インフラ変更後にキャッシュヘッダーが正しく引き継がれているか検証する。セキュリティヘッダーチェッカーも合わせてチェック
- 静的リソースの最適化: CSS/JS/画像に適切なmax-ageが設定されているか確認する
このツールの使い方
- チェックしたいWebサイトのURLを入力して「チェック」ボタンを押します
- HTTPレスポンスヘッダーが自動取得され、7項目のキャッシュヘッダーが検査されます
- ブラウザキャッシュ・CDNキャッシュの状態とスコアが表示されます
- 各ヘッダーの判定理由と現在の設定値を確認し、改善に活かします
ツールの仕様・制限事項
- 指定URLにHTTPリクエストを送り、レスポンスヘッダーを解析します
- リダイレクトは最大5回まで追従します
- レスポンスのタイムアウトは10秒です
- CDNキャッシュステータスはCloudflare(
CF-Cache-Status)、Vercel(X-Vercel-Cache)等を検出します - 入力されたURLの情報はサーバーに保存されません
関連記事
よくある質問
- Q. Cache-Controlが未設定だとどうなりますか?
- Cache-Controlが未設定の場合、ブラウザやCDNのキャッシュ動作がブラウザのヒューリスティック(推測)に依存します。意図しないキャッシュ期間が適用されたり、キャッシュが全く効かなかったりする可能性があるため、明示的な設定を推奨します。
- Q. CDNキャッシュステータスが「不明」と表示されます
- CDNを使用していない場合、またはCDNがキャッシュステータスヘッダー(CF-Cache-Status, X-Vercel-Cache等)を返さない設定の場合に「不明」と表示されます。CDNを利用している場合は、管理画面でレスポンスヘッダーの設定を確認してください。
- Q. ETagとLast-Modifiedの違いは何ですか?
- どちらもキャッシュの再検証(条件付きリクエスト)に使用されますが、ETagはコンテンツのハッシュ値に基づく正確なバージョン管理、Last-Modifiedは最終更新日時に基づく比較です。ETagの方が精度が高く、両方設定するのが理想的です。
関連ツール
開発者
Zeronova(ゼロノバ)
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。