2026年5月20日

WP RocketとCDNを連携してサイトを高速化する方法

プラグイン関連

はじめに

WP RocketはWordPress向け高速化プラグインの定番です。CDN連携機能を使うとCloudflare・BunnyCDN・KeyCDNなどの配信網に静的ファイルを乗せ、世界中のユーザーに高速配信できます。

症状・原因

WP RocketでCDNを設定したい
CloudflareとWP Rocketを同時に使いたい
CDN URLへのリソース書き換えが正しく動かない
キャッシュのクリアをWP-CLIで自動化したい

解決手順

ステップ1：WP RocketをインストールしてCDNを有効化する

WP Rocket → 設定 → CDN タブ:
→「CDN を有効化する」: ON
→「CDN URL」: https://cdn.example.com
  （BunnyCDN・KeyCDN・CloudFront等のCNAMEドメイン）
→「CDN を適用するファイル」:
  ☑ CSS
  ☑ JavaScript
  ☑ 画像と iframe
→「変更を保存してキャッシュをクリア」

ステップ2：CloudflareをWP Rocketと連携する

WP Rocket → 設定 → Cloudflare タブ:
→「Cloudflare を有効にする」: ON
→ グローバル API キー: Cloudflareダッシュボード → プロファイル → APIトークン
→ Cloudflareのメールアドレス: アカウントのメールアドレス
→ ゾーン ID: ドメイン → 概要 → ゾーンID
→「変更を保存」

Cloudflare推奨設定（ダッシュボード）:
→ キャッシュレベル: 標準
→ ブラウザキャッシュ TTL: 4時間
→ Always Online: ON
→ Rocket Loader: OFF（WP Rocketと競合するため）

ステップ3：キャッシュプリロードを設定する

WP Rocket → 設定 → プリロード タブ:
→「キャッシュのプリロードを有効にする」: ON
→「サイトマップベースのキャッシュプリロード」: ON
  → サイトマップURL: https://example.com/sitemap.xml
→「リンクのプリロード」: ON（ホバー時に先読み）

→「変更を保存」

ステップ4：ファイルの最適化を設定する

WP Rocket → 設定 → ファイル最適化 タブ:

CSS:
→「CSS ファイルの結合」: OFF（HTTP/2環境では不要）
→「CSS の縮小化」: ON
→「クリティカル CSS の生成」: ON

JavaScript:
→「JavaScript ファイルの結合」: OFF
→「JavaScript の縮小化」: ON
→「JavaScript の遅延実行」: ON（パフォーマンス改善）

→「変更を保存してキャッシュをクリア」

ステップ5：WP-CLIでキャッシュを管理する

# キャッシュをすべてクリア
wp rocket clean --confirm

# プリロードを手動実行
wp rocket preload

# WP Rocketのオプション設定を確認
wp option get wp_rocket_settings --format=json | python -m json.tool

# CDN設定の確認
wp eval "
\$options = get_option('wp_rocket_settings', []);
echo 'CDN enabled: ' . (\$options['cdn'] ?? '0') . PHP_EOL;
echo 'CDN URL: ' . (\$options['cdn_cnames'][0] ?? 'none') . PHP_EOL;
"

# Cloudflareキャッシュをパージ（WP Rocketで設定済みの場合）
wp rocket purge-cloudflare-cache

ステップ6：CDNが正しく動作しているか確認する

# レスポンスヘッダーでCDNを確認
curl -I https://example.com/wp-content/themes/mytheme/style.css

# 期待するレスポンスヘッダー:
# CF-Cache-Status: HIT  (Cloudflare)
# X-Cache: HIT          (CloudFront/BunnyCDN)
# Via: 1.1 cdn...       (汎用CDN)

# ページソースのリソースURLを確認
curl -s https://example.com/ | grep -o 'https://cdn\.[^"]*' | head -5

ステップ7：除外URLを設定する

WP Rocket → 設定 → 詳細設定 タブ:

キャッシュから除外するURL:
→ /checkout/
→ /cart/
→ /my-account/

CDNから除外するファイル:
→ /wp-content/uploads/private/(.*)

→「変更を保存してキャッシュをクリア」

注意事項

WooCommerceなどの決済ページはキャッシュから除外してください
Cloudflare Rocket Loaderはオフにしてください（JS遅延が競合します）
CDN URLを変更した場合はキャッシュをフルクリアしてください

まとめ

WP RocketのCDN設定はCDN URLを入力するだけで静的ファイルの配信先を切り替えられます。CloudflareとのAPI連携でキャッシュ一括パージも可能です。wp rocket clean でWP-CLIからキャッシュ管理を自動化できます。

Post Views: 7