PSIのCore Web Vitalsチューニングにおけるキャッシュ削除と再生成の順番【Cloudflare×NitroPack】

2025年8月7日 2025年10月31日

nissy

PageSpeed Insights（PSI）対応のパフォーマンスチューニング作業中、RUM計測へCore Web Vitalsスコアを正しく反映させるには、キャッシュ削除の順番を守る必要があります。

Warning

前提として、ブラウザにおけるPSI測定はシークレット/プライベートWindowを毎回ブラウザ丸ごと閉じて開く動作を基本として行い、ブラウザ残キャッシュで測定してしまうリスクを最小化する必要があります。

NitropackはCloud Saas製品であり、世界中の利用者のCache Purge、Optimization、Pre-cache warmupを行っています。サーバーの混雑時間帯では、同時処理が多くなり、レート制限や順番待ちが発生することは容易に想像出来ます。

PurgeはNitroPackとCloudflareで行い、Pre-cacheはNitroPackに依存せず、xmlサイトマップに記載されたURLに対し、curlコマンドで自動化して行うことが理想です。

Information

▶NitroPack利用者によるキャッシュパージ＆最適化のお勧め時間帯

この記事では、キャッシュ削除とキャッシュ再生成(Pre-cache warmup)順序とやり方について解説します。

🔍 PSIに反映されない「よくある落とし穴」

PageSpeed Insightsへの対応でCSSやHTMLを改善したのに、以下のような状況が起きたことはありませんか？

「効率的なキャッシュ保存期間」などの指摘が何度も出る（設計で織り込み済みである場合を除く）
HTMLの変更が反映されていない
Uncaught ReferenceError のようなJSエラーが消えない

「古いキャッシュが残っている」ことが原因である可能性があります。せっかく実装したのに、RUM計測に反映しないというのは、もったいないを越えてRUMの誤計測です。

✅ キャッシュ削除からPreload Cache済までの正しい順番（①→②→③→④→⑤→⑥）

特に③を忘れやすく、この工程を逃すとユーザーによる初回アクセス時のパフォーマンス悪化に直結します。

順番	操作	操作による影響先	内容
①	NitroPack Purge cache	オリジンサーバ内の/wp-content/cache/XXXXXXX-nitropack	左記フォルダの既存キャッシュが削除される。 ※手動で左記/XXXXXXX-nitropack/フォルダを丸ごと削除してもOKですが、フルキャッシュパージにはならない。
②	Cloudflare パージ	Cloudflare (エッジ)データセンター	オリジンサーバのNitroPackキャッシュの削除が完了した後にCloudflareでパージ。
③	NitroPack Cache warmup （preload cache）	キャッシュパージ後の初回リクエストにより、オリジンサーバ内に、NitroPackで最適化されたhtmlキャッシュが生成される	NitroPackのPurge cacheとCache warmupは連動してないため、キャッシュ削除後、別でwarmupを行う必要あり。
④	NitroPackキャッシュのHit確認（URLをいくつか抽出して確認） HEAD確認curl `curl -I https://sample.com` 期待値 `x-nitro-cache: HIT`	-	このとき、NitroPackで除外登録していない最適化対象のjavascript、画像、cssはNitroCDNのURLでオリジンサーバ内のレスポンス用htmlファイルに変更記載される。
⑤	CloudFlareエッジにキャッシュを載せる。 Warmup対象URL全てに対し、UA別でWarmupのGETリクエストを行う。さらに、.htmlファイル内でNitro最適化除外しているサブリソースのcss、javascript、画像ファイルに対するGETのcurlも必要。 ※1	CloudflareエッジPoPに、NitroPackによって生成された最適化済オリジンサーバ内のhtmlが載る。NitroPack最適化除外しているオリジンサーバのjavascript,css,画像ファイルなども載る。 ※NitroCDN（cdn-ileamdm.nitrocdn.com）に載っているcss、javascript、画像ファイルは、ドメインが既に異なるため、CloudflareエッジPoPには載らない。	CLoudflareのCache Rulesでhtmlは「Cache Everything」、「Origin Cache-Controlを無視」、「Edge TTL2時間以上」「デバイスタイプ別キャッシュキー」が設定されていることが前提。デバイス別キャッシュキー、NitroPack除外登録されている画像、css、javascript、文字フォント、ファビコンなどは、直リクエストでCloudflareに載せる必要あり。.html向けcurlは内部サブリソースまで取得しないため。
⑥	CloudflareエッジPoPキャッシュ存在確認	-	HTML→「`cf-cache-status: HIT` かつ `Age: >0`、`x-nitro-cache: HIT`」 CSS/js/画像など→NitroPackもしくはCloudflareでHIT

Warning

※1. NitroPackのWarmupは主にHTML（とNitroCDN）をオリジンサーバ側で温める動作で、Cloudflareエッジは温まらないです。

NitroPackクローラは、ブラウザのように依存リソースを網羅取得せず、取得してもnitrocdn.com配信が中心です。

NitroPackでWarmupを実行しても、都合よくCloudflareのエッジPoPまで全網羅されたWarmupにはならないです。Cloudflareの全エッジ(PoP)に対し、モバイルやデスクトップなどのユーザーエージェントを別けてpreload-cache warmupを行うことが必要です。

Preload-cache作業の自動化（自身の作業環境だけ）

自身の作業PCが使うCloudflareエッジだけ、curlでCache warmup作業する方法となります。Cloudflareのグローバルな全エッジへのpre-cache warmupではないので気をつけてください。全エッジ対象に行う場合、GEO分散curlを実施する必要があります。

条件

端末別UAなし（Vary: user-agent）
画像のVary: Accept未対応（AVIF/WebPなど）
リダイレクト未追従（-Lなし）
エッジ載り確認なし（cf-cache-status未取得）
サブリソース未取得（CSS/JS/画像は温まらない）
直列実行（並列なし）

シェルスクリプト

#!/bin/bash

# ホスト名とサイトマップパスを変数化（適宜書き換えてください）
host="https://example.com"
sitemap_path="/wp-sitemap.xml"

# タイムスタンプ生成（例：20250922_1602）
timestamp=$(date +"%Y%m%d_%H%M")

# Step 1: sitemap_pathから分岐先のインデックスURLリスト抽出
sitemap_index_file="sitemap_index_$timestamp.txt"
curl -s "$host$sitemap_path" | grep -oP '(?<=<loc>).*?(?=</loc>)' > "$sitemap_index_file"

# Step 2: 各インデックスURLリストからページURLを抽出、第2階層xmlサイトマップ名でhistoryファイル作成（sedの後のwp-sitemap-も適宜書き換えてください）
while read sitemap_url; do
  # 例: https://example.com/wp-sitemap-posts-post-1.xml → posts-post-1
  sitemap_name=$(basename "$sitemap_url" .xml | sed 's/wp-sitemap-//')

  # ファイル名定義
  urls_file="urls_${sitemap_name}_$timestamp.txt"

  echo "Fetching URLs from: $sitemap_url → $urls_file"
  curl -s "$sitemap_url" | grep -oP '(?<=<loc>).*?(?=</loc>)' > temp_urls.txt

  # Warmup curl実行＋ステータスコード記録
  > "$urls_file"
  while read url; do
    status=$(curl -s -o /dev/null -w "%{http_code}" "$url")
    echo "$url → HTTP $status"
    echo "$url → HTTP $status" >> "$urls_file"
  done < temp_urls.txt

  # 一時ファイル削除
  rm -f temp_urls.txt

done < "$sitemap_index_file"

🔁 キャッシュパージ手順

上記に記載したように、網羅できるわけではありませんが、Preload Cache Warmupのツールを作らずに出来る範囲のキャッシュ削除からPreload cache warmupまでの手順となります。

✅ 1. NitroPackキャッシュ削除

ライトキャッシュパージ

NitroPackダッシュボード > Cache Insights > Page optimization status > Purge Cache（必要に応じて個別ページ単位で削除）

HTMLキャッシュなどのキャッシュページを削除し、画像を含むNitroCDNのリソースは削除されない。キャッシュ再構築時間を短縮できる方法。

Cache Insights の Page optimization statusでパージ対象ページのOptimization status が Complete になるまで待つ。

フルキャッシュパージ

NitroPackダッシュボード > Cache Settings > Cache > Cache reset > Start cache reset

キャッシュの再構築に時間がかかる。

✅ 2. Cloudflareキャッシュ削除

Cloudflare管理画面 → Caching → Configuration → 「すべてパージ」

※必要に応じて個別ページ単位で削除してください。

✅ 3. NitroPackでキャッシュ生成(Pre-cache)

NitroPack Cache Warmupを実行。

Success

NitroPack で Cache Warmupを既に有効化していても、「無効化→XMLサイトマップ登録→有効化」を行う。常に、都度、Pre-cache命令をNitroPackに伝えるため、毎回、同じ作業を行ってください。

✅ PSIで測定

https://pagespeed.web.dev/ にアクセスし、計測したいページを再測定

💡 なぜこの順番が大事なのか？

キャッシュには「内側から外側」に向かう階層構造の有名なベストプラクティスがあります。

[ブラウザ]
   ↑
[Cloudflare]
   ↑
[NitroCDN]
   ↑
[オリジンサーバ(メインドキュメント(html)最適化)]

オリジンサーバ → NitroCDN → Cloudflare → ブラウザ の順でhttp(s)レスポンス用のコンテンツが渡っていくため、コンテンツ生成源となるオリジン側からキャッシュを削除していくようにしてください。

※メインドキュメント(html)は、NitroCDNには載せられないです。おそらくURL（独自ドメイン）を維持するため。

📌 補足：ファイル種類別、キャッシュ保存場所

設計にもよるため、参考となります。

キャッシュ場所	キャッシュされるファイル	補足	削除方法
オリジンサーバ	NitroPackで最適化されたメインドキュメント(html) NitroPackで最適化除外したcss/js/画像など。	NitroPack Preload Cache Warmup後	NitroPackライトキャッシュパージ
NitroPack CDN	最適化済みCSS/JS/画像	NitroPack Preload Cache Warmup後	NitroPackフルキャッシュパージ
Cloudflare CDN	NitroPack最適化済HTML（Cache対象時）。NitroPackで最適化除外したcss/js/画像など。	2段階目のWarmupリクエスト	Cloudflare パージ
ブラウザ	普遍的なファイルを長期TTLで、再訪の最適化対策として適宜設定。	-	オリジンサーバで制御する場合、ファイル名にハッシュを付けて差し替える。

カテゴリー: CoreWebVitals

タグ: CDN CloudFlare NitroPack PageSpeed Insights Preload Cache パフォーマンスチューニング