環境情報

Webサーバー: VPS（Ubuntu 22.04 / Nginx 1.24）
CMS: WordPress（画像多めのブログ + 個人開発サービスLP）
ドメイン: 独自ドメイン（Route53から移行）
導入プラン: Cloudflare Free
導入前: TTFB平均 800ms / LCP 3.2s / PageSpeed Insights モバイル 54
導入後: TTFB平均 120ms / LCP 1.4s / PageSpeed Insights モバイル 91

「サイトの表示速度が遅いな」と感じたまま放置していませんか。実は私も、自分のサイトが海外からのアクセスで明らかに遅い状態を数ヶ月放置していました。先日、初めてCloudflareを導入してCDNを設定したところ、体感で分かるレベルで速くなりました。

本記事では、Cloudflareの無料プランでCDNを導入する手順、速度改善の実測データ、エンジニア視点のハマりポイントをまとめます。

なぜCDNが必要なのか

CDNはコンテンツをエッジサーバーにキャッシュし、ユーザーに近い場所から配信します。特に以下のサイトでは効果が顕著です。

画像やCSS/JSなど静的ファイルが多いサイト
日本以外にもアクセスが分散しているサイト
動的コンテンツでもTTFBが大きな割合を占めるサイト
オリジンサーバーのスペックが低い、またはレンタルサーバーで共有CPUのサイト

Cloudflare無料プランでは、DNS管理、CDN、SSL/TLS証明書、Bot対策、Zero Trust Access（無料枠あり）をまとめて利用できます。有料プランに比べるとWAFルール数など制限はありますが、個人開発規模なら無料プランで十分です。

Cloudflare導入手順

1. Cloudflareにアカウント登録する

https://dash.cloudflare.com/sign-up から登録します。メールアドレスとパスワードだけでOKです。

2. サイト（Zone）を追加する

ダッシュボードの「Add a site」からドメイン名を入力します。プラン選択画面では必ず「Free」を選びます。

3. DNSレコードを確認する

Cloudflareが既存のDNSレコードを自動で取り込みます。AレコードやCNAMEレコードが正しく入っているか確認してください。自分で追加する場合は以下が基本です。

example.com.  A     192.0.2.10
www           CNAME example.com.

このとき「Proxied」になっていることが重要です。オレンジの雲アイコンが有効だとCDN適用、グレーだとDNSのみです。

4. ネームサーバーを変更する

Cloudflareから2つのネームサーバーが発行されるので、お使いのドメインレジストラでNSレコードを変更します。

aaa.ns.cloudflare.com
bbb.ns.cloudflare.com

DNSの反映は通常数時間程度、遅い場合は最大48時間かかります。この間にHTTPSが不安定になっても焦らず待つのがベターです。

5. SSL/TLSモードを設定する

SSL/TLSの設定は「Overview」から変更します。オリジンサーバーに自己署名証明書でも何らかのSSL証明書がある場合は「Full (strict)」を選びましょう。

「Flexible」を選ぶと、Cloudflareとオリジンの間が平文HTTPになります。また、オリジン側で強制的にHTTPSへリダイレクトしている場合、Flexibleにするとリダイレクトループが発生することがあるため注意が必要です。

6. キャッシュ設定と確認

Cloudflareダッシュボードの「Caching」で、キャッシュ期間やキャッシュレベルを設定します。WordPressなら「Caching」→「Cache Level」→「Standard」で動作します。

設定後に以下のコマンドでキャッシュヒットを確認してみましょう。

curl -sI https://example.com | grep -i -E '^HTTP|server|cf-cache-status|age'

実際の出力例は以下の通りです。

HTTP/2 200
server: cloudflare
cf-cache-status: HIT
age: 234

cf-cache-status: HIT が返ってくれば、エッジキャッシュが働いています。MISS の場合は初回アクセス、DYNAMIC の場合はキャッシュ対象外（HTML動的コンテンツなど）です。

導入前後の速度比較

実際に測定した結果が以下です。測定にはPageSpeed Insightsと、CloudflareのHTTPヘッダー計測ツールを使用しました。

指標	導入前	導入後
TTFB（東京から）	800ms	120ms
LCP	3.2s	1.4s
画像のレスポンスヘッダー	オリジン直接配信	`cf-cache-status: HIT`
PageSpeed Insights モバイルスコア	54	91

特に画像ファイルはほぼ全てエッジキャッシュに乗ったため、リクエストが速くなっただけでなく、オリジンサーバーの負荷も大きく下がりました。

ハマりポイント

リダイレクトループ

CloudflareのSSL/TLSモードを「Flexible」に設定し、Nginx側で「HTTP→HTTPS」へのリダイレクトを有効にしていると、リダイレクトループになることがあります。原因はCloudflareとオリジン間がHTTPのままで、そこへHTTPSリダイレクトがかかるためです。

解決策は、オリジンに証明書を配置して「Full (strict)」にすることです。Let's Encryptで無料の証明書が取得できます。

開発中にキャッシュが残る

Cloudflare有効化中は、HTMLや画像がエッジにキャッシュされるため、開発中の変更が反映されないことがあります。Cloudflareダッシュボードの「Caching」→「Development Mode」を有効にすると、一時的にキャッシュを無視できます。

アクセスログのIPアドレスが変わる

Cloudflare経由になると、オリジンサーバーのNginxアクセスログにはCloudflareのIPアドレスが記録されます。アクセス元のIPアドレスで分析している場合は、CF-Connecting-IP ヘッダーを使う必要があります。Nginxで利用する場合の例です。

map $http_cf_connecting_ip $client_ip {
    default $http_cf_connecting_ip;
}
log_format main '$client_ip - $remote_user [$time_local] "$request" '
                '$status $body_bytes_sent "$http_referer" '
                '"$http_user_agent"';

http_cf_connecting_ip が空の場合は、Cloudflareを経由していないアクセスか、信頼できないリクエストです。必要に応じてCloudflareのIPレンジリストを参照してallow/denyを設定することも可能です。

無料プランの制限

無料プランには以下があります。

Page Rulesは3件まで
WAFカスタムルールは3件、または5件（時期により変動）
キャッシュ領域は無制限ではない
動画ストリーミング配信など、特定機能は有料限定

個人サイトのCMS配信なら十分ですが、本番ミッションクリティカルなサービスでは有料プランも検討してください。

ゼロトラスト環境とBot対策

Cloudflare Freeでは「Cloudflare Zero Trust」も利用できます。無料枠では最大50ユーザーまで、1日に50回の認証ログインがサポートされています。管理画面だけを認証付きで公開したい場合に便利です。

Zero Trustダッシュボードにアクセス
Access → Applications → Add an application
Self-hostedを選択し、保護対象URLを設定
AccessポリシーでメールアドレスやIPアドレスを許可

また、Security → Botsから「Bot Fight Mode」を有効化すると、明らかなボットトラフィックを自動判定してブロックできます。アクセス元の国で絞り込みたい場合は、WAFカスタムルールかFirewall Rulesで対応可能です。

FAQ

Q. ネームサーバー変更が怖いです

A. DNSのTTLを事前に短くしておくと、切り替え時の反映が速いです。Cloudflare導入時はネームサーバー変更後、DNSの浸透が完了するまで一時的に全球規模で表示が不安定になる可能性があります。個人サイトなら深夜帯やアクセスが少ない時間帯に実施するのがおすすめです。

Q. すでにLet's EncryptのSSL証明書を入れています

A. その場合はSSL/TLSモードを「Full (strict)」にしてください。証明書が正しく設定されていれば、Cloudflareとオリジン間も暗号化されます。

Q. 日本のアクセスしかないサイトでも効果ありますか

A. 効果はあります。TTFBが短くなるだけでなく、TCP接続やTLSハンドシェイクの負荷もエッジにオフロードされます。実際、日本国内からのアクセスでもLCPが1秒以上改善した事例があります。

Q. WordPressのキャッシュプラグインと併用できますか

A. 可能です。Cloudflare側はCSS/JS/画像のキャッシュ、WordPress側はHTML/ページキャッシュを担当させるのが一般的です。プラグインが生成するHTMLをエッジキャッシュする場合は、キャッシュコントロール設定に注意してください。

まとめ

Cloudflare無料プランでCDNを導入し、SSL証明書、Bot対策、Zero Trustアクセス制御までを無料で使える環境を作れました。設定にかかった時間は初回で30分程度、DNSの反映待ちを含めても1日あれば体感できる速度改善が得られます。

表示速度はユーザー体験だけでなく、SEOのランキング要因にもなります。PageSpeed Insightsのスコア改善も確認できたため、テクニカルSEOの一環としても有効です。

「まだCDNを導入していない」という方は、Cloudflareの無料プランから試してみてください。やらない理由がないレベルでコストパフォーマンスが高いです。

この記事を書いた人

BENTEN Web Works — 業務自動化・システム開発のフリーランスエンジニアです。

GAS / Python / RPA を使った業務自動化や、Web制作・システム開発のご相談を承っています。
「こんなこと自動化できる？」というご質問だけでもお気軽にどうぞ。

👉 BENTEN Web Works — 詳細・お問い合わせはこちら
🐦 X（旧Twitter） — 日々の知見を発信中