無料のCDN CloudFlareでWordPressを高速化しよう

最近、話題になっている無料のCDNサービス CloudFlareをkudox.jpに導入してみました。CloudFlareは、画像・JS・CSSといった静的なコンテンツの一部をCloudFlareのサーバーにキャッシュすることで、負荷を分散してくれるCDNサービスの一種です。WordPressで使用した場合、どれくらいの高速化が見込めるのでしょうか?驚きの結果をご報告したいと思います。

CloudFlareの導入

アカウントの作成

CloudFlareの導入は驚くほど簡単です。まず、CloudFlareにアクセスして、「今すぐ登録!」ボタンをクリックしてアカウントを作成しましょう。アカウント作成画面で必要な情報を入力して、右下の「Create account now」ボタンをクリックします。

CloudFlareのアカウント作成画面

Webサイトの追加

次にCloudFlareを導入するWebサイトを追加します。Webサイトのドメイン名を入力したら、右下の「Webサイトを追加します」ボタンをクリックします。

CloudFlareのWebサイト追加画面

DNSレコードのスキャン

続いて、CloudFlareが自動でドメインのDNSレコードをスキャンしてくれるので、コーヒーでも飲みながら待ちます。ここら辺からサイトの日本語訳がおかしなことになってきますが、おおらかな気持ちで読み取りましょう。スキャンが終了したら、下に「継続」ボタンが表示されるので、クリックします。

CloudFlareのDNSレコードスキャン画面

DNSレコードの構成

すると、CloudFlareがスキャンしたDNSレコードの構成が表示されるので確認します。右側のボタンで編集することもできますが、基本的にはそのままで大丈夫です。問題なければ、右下のボタンをクリックして次に進みます。

CloudFlareのDNSレコード確認画面

初期設定の選択

続いて、初期設定の選択画面が表示されます。プラン・パフォーマンス・セキュリティを選択できます。私は遠慮なく無料プランを選択しました。選択したら右下のボタンをクリックします。

CloudFlareの初期設定画面

ネームサーバーの変更

すると、CloudFlareのネームサーバー情報が表示されるので、ドメインのネームサーバーをCloudFlareのネームサーバーに変更し、右下のボタンをクリックします。以上でCloudFlareの設定は完了です。

CloudFlareのネームサーバー情報

W3 Total CacheでCloudFlareを有効に

W3 Total Cacheを使用している場合は、CloudFlareを有効にしておきましょう。管理画面サイドメニューのPerformance > General Settingsにある「Network Performance & Security powered by CloudFlare」で設定を行います。API keyは、CloudFlareのアカウントページで取得できます。W3 Total Cacheで設定を行っておくとWordPress側からCloudFlare上のキャッシュをクリアできるようになります。

W3 Total CacheのCloudFlare設定項目

驚きの計測結果

下記がCloudFlare導入後のGTmetrixでの計測結果です。CloudFlare導入前と比べるとPage Speed Grade, YSlow Grade, Page load timeと軒並み高い数値となっていることがわかります。

CloudFlare導入後

CloudFlare導入後の計測結果

CloudFlare導入前

CloudFlare導入前の計測結果

終わりに

これまでWordPress高速化のために色々な策を試してきましたが、どの方法よりもCloudFlareが一番効果的でした。また、CloudFlareはサイトのセキュリティも強化してくれるため、導入後はスパムメールがまったく来なくなりました。WordPressに限らずWebサイトの高速化を計りたい方は、CloudFlareの導入を検討してみては如何でしょうか?