配信キャッシュ

CDN キャッシュヘッダープランナー

リソース種別を選び Cache-Control を提案します。ハッシュ付きファイルは長期 immutable、HTML と私有 API は再検証か共有キャッシュ禁止にします。

準備完了100/100

ルール6

immutable2

no-store1

問題0

リソース種別

ファイル名にハッシュがあれば1年 immutable が可能です。HTML と認証 API は不可です。

静的ファイル名HTML 方針

プランはこのブラウザに留まり、アップロードしません。

キャッシュ検査

HTML、ハッシュ付き静的ファイル、私有 API を分けます。上書きするファイルに immutable を付けないでください。

✓

immutable はハッシュ付きだけ合格

app.abc123.js は1年キャッシュできます。app.js を上書きすると CDN が古いコードを出し続けます。

✓

HTML を長期キャッシュしない合格

HTML は max-age=0、must-revalidate、またはごく短い s-maxage にして、デプロイ後すぐ新ページを出します。

✓

私有 API を CDN に入れない合格

セッション JSON とアカウント API は private, no-store が必要です。

–

service worker をキャッシュしないスキップ

sw.js は no-cache にし、デプロイ後に新しい worker を取れます。

✓

HTML と静的ファイルを分ける合格

サイト全体で一つの max-age にすると、HTML が古くなるかハッシュ付き資産のキャッシュが短すぎます。

推奨ヘッダー

Cache-Control を CDN やオリジンの対応パスに設定します。

種別	一致	Cache-Control
ハッシュ付き JS/CSS/画像	`/assets/.[hash].`	`public, max-age=31536000, immutable`
HTML 文書	`/`	`public, max-age=0, must-revalidate`
プライベート API	`/api/*`	`private, no-store`
フォント	`/fonts/*.[hash].woff2`	`public, max-age=31536000, immutable`
ハッシュなし画像	`/images/*`	`public, max-age=86400, stale-while-revalidate=604800`
Sitemap XML	`/sitemap*.xml`	`public, max-age=3600, stale-while-revalidate=86400`

Nginx

location /assets/*.[hash].* {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location / {
  add_header Cache-Control "public, max-age=0, must-revalidate";
}

location /api/* {
  add_header Cache-Control "private, no-store";
}

location /fonts/*.[hash].woff2 {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location /images/* {
  add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800";
}

location /sitemap*.xml {
  add_header Cache-Control "public, max-age=3600, stale-while-revalidate=86400";
}

Vercel

{
  "headers": [
    {
      "source": "/assets/:path*\\.[hash]\\.:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/api/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "private, no-store"
        }
      ]
    },
    {
      "source": "/fonts/:path*\\.[hash]\\.woff2",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/images/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=86400, stale-while-revalidate=604800"
        }
      ]
    },
    {
      "source": "/sitemap:path*\\.xml",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600, stale-while-revalidate=86400"
        }
      ]
    }
  ]
}

CDN キャッシュヘッダープランナー

リソース種別

推奨ヘッダー

Nginx

Vercel

必要な情報だけを確認

クイック手順

ヒント

次におすすめ

ブラウザキャッシュポリシー検査

HTTP ヘッダーチェック

アセット命名規則チェッカー

公開準備スコアカード

こちらもおすすめ

DNS 変更プランナー

CSP Header Generator

SSL 証明書チェック

DMARC レコード生成

Breadcrumb Trail Generator

行ソーター

JPGをSVGに変換

PDFページ番号