NitroPackのPreload warmupはCloudflare Edgeのキャッシュを暖めるか？

2025年10月18日 2025年11月15日

nissy

Cloudflare APO無しで、NitroPackのPreload warmup（From UK）は、日本のCloudflare Edgeにキャッシュを載せる効果があるのか？各拡張子別にすべてキャッシュヒット状況を確認します。ページビューがほぼゼロなWebサイトで良かった（泣笑）

結論

NitroPackのPreload warmup（From United Kingdom）はCloudflare Edge（日本）のキャッシュを暖めない。

【前提】キャッシュ配置設計など

にしラボ環境

NitroPack Starterプラン
- javascriptとcssの最適化は、有効化済
画像
- NitroPack Lazy load imagesは、無効化済（LCP Image Preload を自作開発しているため、NitroCDNにキャッシュを載せず、Cloudflare Edgeにキャッシュを載せる基本設計）
オリジンサーバ内では、NitroPackによるメインドキュメント(html)の最適化済キャッシュを除き、一切キャッシュを取り扱わない設計。ただし、.htaccessで画像、js、css、フォント、ファビコンについてCache-Control "public, max-age=31536000, immutable としているため、メインドキュメントhtmlがブラウザでキャッシュされず、各アセットで?ver= が正しく機能してれば新バージョンが随時利用される。
Cloudflare Cache Rules
- デバイス別のキャッシュキーは有効。

計測前のキャッシュパージ手順

以下のようにキャッシュパージを行う。

NitroPackは、LatestのPreload warmup実行に対してオリジンの変化が無い場合、purgeのignoreが起きうるため、/wp-content/cache/xxxxxxx-nitropack/　内のキャッシュフォルダをまるごと手動で削除。
- NitroaPack > Cache Insights > Page optimization status >「Purge Cache」で実行する方法もあり、通常の運用ではこちらを使う。
  - この方法は、NitroPackのライトキャッシュパージであるため、NitroCDNの画像などが削除されないです。
Cloudflare > ゾーン（特定のドメイン）を選択 > Caching > 構成 > キャッシュをパージ >「すべてパージ」

NitroPack(全Cache purge/Optimization)とCloudflare Cache すべてパージの直後

想定：すべてキャッシュミス（Dynamic）

NitroCDNは、https://cdn-ileamdm.nitrocdn.com

Chromeブラウザ開発者ツール（シークレットウィンドウ）のNetworkタブにおける確認結果

ファイル拡張子種別	x-nitro-cache	x-nitro-cache-from	cf-cache-status	CF-RAY
モバイルメインドキュメントhtml（オリジンドメイン）	HIT	drop-in	MISS	XXXX-NRT
モバイルcss（オリジンドメイン）	-	-	-	-
モバイルjavascript（オリジンドメイン）	Blob URLあり	-	-	-
モバイル画像（オリジンドメイン）	無し	無し	MISS	XXXX-NRT/KIX
モバイルcss（NitroCDNドメイン）	既にNitroCDNに最適化かつ結合し分割された、min.cssが配置され、ステータス200を返している	-	MISS	XXXX-NRT
モバイルjavascript（NitroCDNドメイン）	既にNitroCDNに最適化済min.jsが配置され、ステータス200を返している	-	MISS	XXXX-NRT
モバイル画像（NitroCDNドメイン）	既にNitroCDNに最適化済画像が配置され、ステータス200を返している /wp-content/themes/のSVG	-	HIT	XXXX-NRT

Nitroによって最適化されたモバイルメインドキュメントhtmlはオリジンサーバでHIT、さらにアセットはこの段階で既にNitroCDN側に載っていました。モバイル画像（NitroCDNドメイン）のHITは、/wp-content/uploads/ではない/wp-content/themes/フォルダのsvg画像がHITしています。NitroPackライトキャッシュパージであれば、画像は消されずに古いキャッシュが残るため、この挙動であると考えられます。

メインドキュメント(html)はx-nitro-cacheに載って、Cloudflare Edgeには載っていない。NitroCDNにはcss,javascript,画像が載り、モバイルメインドキュメントhtml内のサブリンクがNitroCDNのURLに書き換えられている。

NitroPackとCloudflareで全パージしてNitroPack Preload warmupを1回だけ実施

Chromeブラウザ開発者ツール（シークレットウィンドウ）のNetworkタブにおける確認結果

ファイル拡張子種別	x-nitro-cache	x-nitro-cache-from	cf-cache-status	CF-RAY
モバイルメインドキュメントhtml（オリジンドメイン）	HIT	drop-in	MISS	XXXX-NRT
モバイルcss（オリジンドメイン）	-	-	-	-
モバイルjavascript（オリジンドメイン）	Blob URLあり	-	-	-
モバイル画像（オリジンドメイン）	無し	無し	MISS	XXXX-NRT/KIX
モバイルcss（NitroCDNドメイン）	NitroCDNに最適化かつ結合し分割された、min.cssが配置され、ステータス200を返している	-	MISS	XXXX-NRT
モバイルjavascript（NitroCDNドメイン）	既にNitroCDNに最適化済min.jsが配置され、ステータス200を返している	-	MISS	XXXX-NRT
モバイル画像（NitroCDNドメイン）	既にNitroCDNに最適化済画像が配置され、ステータス200を返している /wp-content/themes/のSVG	-	HIT	XXXX-NRT

NitroPack Preload warmupは、United Kingdomからのリクエストであるため、日本のCloudflare Edgeは暖まらない。

NitroPackとCloudflareで全パージ→NitroPack warmupを1回→手動でモバイルのページを1回だけ見た後

いわゆる訪問者によるwarmupです。

Chromeブラウザ開発者ツール（シークレットウィンドウ）のNetworkタブにおける確認結果

ファイル拡張子種別	x-nitro-cache	x-nitro-cache-from	cf-cache-status	CF-RAY
モバイルメインドキュメントhtml（オリジンドメイン）	HIT	drop-in	HIT	XXXX-KIX
モバイルcss（オリジンドメイン）	-	-	-	-
モバイルjavascript（オリジンドメイン）	Blob URLあり	-	-	-
モバイル画像（オリジンドメイン）	無し	無し	HIT	XXXX-KIX
モバイルcss（NitroCDNドメイン）	NitroCDNに最適化かつ結合し分割された、min.cssが配置され、ステータス200を返している	-	HIT	XXXX-NRT
モバイルjavascript（NitroCDNドメイン）	既にNitroCDNに最適化済min.jsが配置され、ステータス200を返している	-	HIT	XXXX-NRT
モバイル画像（NitroCDNドメイン）	既にNitroCDNに最適化済画像が配置され、ステータス200を返している /wp-content/themes/のSVG	-	HIT	XXXX-NRT

すべてCloudflare EdgeでHitしています。オリジンドメインのモバイルメインドキュメントhtmlとモバイル画像は、KIXに変化しているため、Cloudflare Edge 下位層 T2はKIX（大阪）、Cloudflare Edge 上位層 T1はNRT（東京）だとわかります。

まとめ

NitroPackのPreload （Cache）warmup　は体感がやや改善することもあり、NitroPack Preload warmup（From UK）は日本のCloudflare Edgeにキャッシュを乗せる効果は無いとなりました。

UKからWarmupを行っているから？という視点の場合、スマート階層型キャッシュトポロジーをCloudflareで有効にしているため、少なくともUK周辺のTier1が温まったり、Cache MIssの際に欧州のEdgeが表示されるはず。しかし、検証結果としてUK周辺のEdgeもあたたまらない。そもそもCloudflareのWAFで弾かれている可能性が高い。最も確実にWarmupするには、Cloudflare Workerでwarmup対象のURLに対してfetchすること。

Cloudflareキャッシュルールでデバイス別キャッシュキーを利用している以上、Preload Cache warmupは、モバイル/デスクトップ別などバリアントを意識してメインドキュメントhml/css/js(/画像)の一覧リストへのGETリクエストを自作する必要があります。訪問者が多いWEBサイトで許容できる場合、訪問者によるwarmupとすることになりそうです。

しかし、あくまでもwarmupだけの観点なので、CoreWebVitals用の最適化SaasとしてNitroPackのQualityは依然として高いです。Preload Cache warmupは、「パターンを網羅したGETリクエスト発信機が暴走しないように安全性重視で整える」比較的に面倒な機能です。

コンテンツ配置先	メインドキュメント (html)	javascript	css	画像
オリジンサーバ	「NitroPackキャッシュパージ/最適化」→最適化済が生成される	「NitroPackキャッシュパージ/最適化」→最適化済が生成される	「NitroPackキャッシュパージ/最適化」→最適化済が生成される	「NitroPackキャッシュパージ/最適化」→最適化済が生成される
オリジンサーバNitroPack領域 /wp-content/cache/****-nitropack/	「NitroPack Preload warmup」 →最適化済が配置される	対象外	対象外	対象外
NitroPack（NitroCDN）	対象外	「NitroPackキャッシュパージ/最適化」→ →最適化済が配置される	「NitroPackキャッシュパージ/最適化」→ →最適化済が配置される	「NitroPackキャッシュパージ/最適化」→ →最適化済が配置される
Cloudflare Edge(下位層)T2	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。
Cloudflare Edge(上位層)T1	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。	「NitroPack Preload warmup(From UK)」では、日本のCloudflare Edgeにキャッシュは載らない。

メインドキュメント(html)と配下のサブリンクアセット整合性の確保

NitroPackの最適化済リソース配置場所

メインドキュメント(html)
- オリジンサーバ内に最適化済キャッシュが配置される
  - サブリンクアセットのURLはNitroCDNに置換されている
- URLは変化無し。
javascript/css/画像(アセット)
- NitroCDNにに最適化済キャッシュが配置される
- URLがNitrCDNに変わる。
- JSについてはBlob URLが作られる。

メインドキュメント(html)とjavascript/css/画像(アセット)について、メインドキュメント(html)だけが先に最適化とキャッシュ配置されてしまうとサブリンクアセットを取得できない自体が発生してしまいますが、CoreWebVitalsの最適化Saas製品として非常に重要な機能ということもあり、NitroPackのキャッシュパージ/最適化ではこの不整合が起きた経験は皆無です。

Page optimization status画面で「Purge Cache」としているのは、おそらく上記の不整合を確実に防ぐための設計になっているためと考えられます。

【参考】Cache Hit確認コマンド

主にブラウザで開発者ツールのNetworkを利用して確認しましたが、モバイルのUser-Agent、キャッシュヒット確認を行うコマンドです。メインドキュメントhtml配下のサブリンクでNitroCDNのURL変遷を追うことが非常に煩雑であるため、コマンドによる確認は非推奨です。作業しながら気付きました。

モバイルメインドキュメントhtml Cache Hit 確認

ファイルパスは、環境に応じて変えてください。

curl -I "https://sample.com/" -H "User-Agent: Mozilla/5.0 (Linux; Android 15; GEC77) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"

モバイルメインドキュメントhtml内のサブリンクURLを取得する

ファイルパスは、環境に応じて変えてください。NitroCDNに載った各種アセットのURL取得を行うためのコマンドです。普通に<html><head></head><body></body></html>を取得します。

curl -s "https://sample.com/" -H "User-Agent: Mozilla/5.0 (Linux; Android 15; GEC77) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"

モバイルcss Cache Hit 確認

ファイルパスやx.x.xは、環境に応じて変えてください。

curl -I "https://sample.com/style.css?ver=x.x.x" -H "User-Agent: Mozilla/5.0 (Linux; Android 15; GEC77) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"

モバイルjavascript Cache Hit 確認

ファイルパスやx.x.xは、環境に応じて変えてください。

curl -I "https://sample.com/script.js?ver=x.x.x" -H "User-Agent: Mozilla/5.0 (Linux; Android 15; GEC77) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"

モバイル画像 Cache Hit 確認

ファイルパスは、環境に応じて変えてください。

curl -I "https://sample.com/sample_image.webp" -H "User-Agent: Mozilla/5.0 (Linux; Android 15; GEC77) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"