Cloudflare WorkersでWordPressの重い処理をエッジにオフロードする
WordPressが遅い本当の理由
WordPress のパフォーマンス問題は「プラグインが多すぎる」「サーバーが非力」と語られがちだが、根本的な原因は別にある。
すべてのリクエストがオリジンサーバーを経由していること。
東京のサーバーでWordPressを動かしているとき、大阪からのアクセスは数十ms で届くが、海外からは 200〜500ms かかる。PHPが動いてDBを叩いてHTMLを生成して返す——この処理がすべてオリジンで発生するかぎり、サーバーから物理的に遠い訪問者ほど遅い体験をする。
Cloudflare Workers を使うと、この「オリジンに届く前の処理」をエッジ(Cloudflareの世界300拠点以上のサーバー)に移せる。WordPressが担っていた静的コンテンツの配信・リダイレクト処理・ヘッダー付与を、オリジンを一切叩かずに完結させる。
全体像:APO + Workers の組み合わせ
| 手法 | 効果 | 難易度 |
|---|---|---|
| APO(Automatic Platform Optimization) | ページHTML全体をエッジキャッシュ。最大70〜300%高速化 | ★☆☆ |
| キャッシュルール | wp-admin / ログイン除外・静的ページの積極キャッシュ | ★☆☆ |
| Workers(ヘッダー注入) | セキュリティヘッダーをエッジで付与。オリジン変更不要 | ★★☆ |
| Workers(リダイレクト) | 301リダイレクトをエッジで処理。PHPを叩かない | ★★☆ |
| Workers(A/Bテスト) | クッキーベースで訪問者を振り分け。オリジン変更ゼロ | ★★★ |
まず APO で土台を作り、Workers で細かい最適化を乗せるのが正しい順序。
Step 1: APO を有効化する(最優先・効果最大)
APO(Automatic Platform Optimization)は Cloudflare Workers KV を使って WordPress の静的HTMLページをエッジにキャッシュする公式機能。Cloudflareが「WordPress専用に作った Workers アプリ」と理解してよい。
料金:
- Free プラン: +$5/月
- Pro / Business / Enterprise: 無料で含まれる
有効化手順:
① WordPress プラグインをインストール
公式 Cloudflare プラグインをインストール → 有効化 → プラグイン設定からCloudflareアカウントと連携(APIトークンまたはメールアドレス+グローバルAPIキー)。
② Cloudflare Dashboard で APO を ON
Cloudflare Dashboard → 対象ドメイン → Speed → Optimization → スクロールして「Automatic Platform Optimization for WordPress」をON。
③ 除外設定(必須)
ログインユーザー・WooCommerceカートはキャッシュされないよう APO が自動で除外する。WordPress プラグイン側で「Cache by device type」「Automatic Cache Purge」が有効になっていることを確認する。
効果の目安:
Kinstaによるベンチマーク(参照)では APO 有効化後にページロードタイムが70〜300%改善。特にサーバーから遠い地域からのアクセスで効果が顕著。
Step 2: キャッシュルールを設定する
APO を入れても、/wp-admin/ と /wp-login.php がキャッシュされると管理画面が壊れる。明示的に除外ルールを作る。
Cloudflare Dashboard → Caching → Cache Rules → Create rule
ルール1: WordPress管理画面をキャッシュ対象外にする
(http.request.uri.path contains "/wp-admin") or
(http.request.uri.path eq "/wp-login.php") or
(http.request.uri.path contains "/wp-json/")
アクション: Bypass cache
ルール2: ログイン済みユーザーをキャッシュ対象外にする
(http.cookie contains "wordpress_logged_in") or
(http.cookie contains "woocommerce_cart_hash")
アクション: Bypass cache
WooCommerce を使っていない場合は2つ目の条件は不要。
Step 3: Workers でセキュリティヘッダーをエッジに付与する
セキュリティヘッダー(X-Frame-Options、Strict-Transport-Security等)は本来 WordPress 側(nginx.conf または PHP)で設定する。しかし Workers を使えばオリジンを一切触らずにエッジで付与できる。
Cloudflare Dashboard → Workers & Pages → Create application → Create Worker
export default {
async fetch(request) {
const response = await fetch(request);
// レスポンスヘッダーは immutable なので新しく作る
const newHeaders = new Headers(response.headers);
newHeaders.set("X-Frame-Options", "SAMEORIGIN");
newHeaders.set("X-Content-Type-Options", "nosniff");
newHeaders.set("Referrer-Policy", "strict-origin-when-cross-origin");
newHeaders.set(
"Strict-Transport-Security",
"max-age=31536000; includeSubDomains; preload"
);
newHeaders.set("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
});
},
};
デプロイ後、Workers & Pages → 該当Worker → Settings → Triggers でカスタムドメイン(example.com/*)を割り当てる。
確認:
curl -sI https://example.com/ | grep -E "x-frame|x-content|strict-transport"
Step 4: Workers でリダイレクトをオリジンから切り離す
旧URLから新URLへの301リダイレクトを .htaccess や nginx.conf で管理している場合、Workersに移すとオリジンサーバーを経由しなくなる。特にリダイレクト数が多いサイトで有効。
const REDIRECTS = {
"/old-page": "https://example.com/new-page",
"/blog/2024/old-post": "https://example.com/new-post",
"/contact-us": "https://example.com/contact",
};
export default {
async fetch(request) {
const url = new URL(request.url);
const destination = REDIRECTS[url.pathname];
if (destination) {
return Response.redirect(destination, 301);
}
return fetch(request);
},
};
REDIRECTS オブジェクトに旧パス → 新URLを追加するだけで管理できる。.htaccess の複雑な正規表現を廃止できる。
Workers の無料枠と料金
| プラン | リクエスト数 | CPU時間 | 月額 |
|---|---|---|---|
| Free | 100,000/日 | 10ms/リクエスト | 無料 |
| Workers Paid | 無制限(超過分$0.30/百万) | 30s/リクエスト | $5/月 |
一般的なWordPressサイトのリダイレクト・ヘッダー付与程度であれば Free枠で十分。
まとめ
| 優先順位 | 施策 | 期待効果 |
|---|---|---|
| 1 | APO 有効化 | ページ全体 70〜300% 高速化 |
| 2 | キャッシュルール(wp-admin除外) | 管理画面の誤キャッシュ防止 |
| 3 | Workers セキュリティヘッダー | オリジン変更なしでヘッダー付与 |
| 4 | Workers リダイレクト | .htaccess 廃止・オリジン負荷削減 |
APO だけで体感できるほど速くなる。Workers はその後に乗せる追加最適化として理解するのがよい。
会員限定:Workers A/Bテストスクリプト + Wrangler CLIデプロイ手順
クッキーで訪問者を50/50に振り分けてLP2パターンを同時テストする Workers スクリプト(TypeScript)と、Wrangler CLIを使ったローカル開発→デプロイの一連のコマンドを会員限定で公開している。
この続きはメンバー限定です
メールアドレスを登録すると、本記事の設定ファイル・コードと全 10 本の実践記事が読めます。無料・いつでも解除可。