WordPress高速化に『CloudFlare』は欠かせない存在だった

『CloudFlare』はプラグインではないのですが、W3 Total Cacheと連携することができるので効果的な高速化を図ることができます。導入したところ劇的な効果を発揮したので紹介します。

サイトを読み込む際にCDNサーバーである『CloudFlare』を介するので、結果的に表示速度の改善が見込める、という仕組みになっています。

この記事の要約

『CloudFlare』による高速化の仕組み

単純に言ってしまえば、直接ウェブサーバーにアクセスせずに、画像やCSSを複数のキャッシュサーバーを介してアクセスするので、結果的に負荷の軽減になるということです。

そのキャッシュサーバーが今回の『CloudFlare』というわけです。『CloudFlare』はCDN（コンテンツデリバリーネットワーク）サービスとも言われ、Web負荷分散システムとも言われています。

『CloudFlare』導入後の効果

前回に続いて今回も「GTmetlix」によって表示速度を測ります。因みに前回までのサイト表示速度は「4.01秒」でした。一番最初が12秒だったことを考えると感慨深くなります。

今回紹介する『CloudFlare』を導入した後に再度計測した結果がこちら！

なんと更にタイムを縮めて「2.52秒」を達成！Page Speed Gradeも初めてのA評価となりました。少し前のサイトが重くて悩んでいた状態からすると嘘のようです。

『CloudFlare』のインストール方法

海外のサイトですが、導入は比較的単純なのでご安心ください。

『CloudFlare』にアクセスします。ベージ下の「Sign up now!」から登録ができるのでクリック。

各種項目を入力していきます。

上から、

• Eメールアドレス
• Eメールアドレスの確認（上と同じものを記入）
• ユーザー名
• パスワード（7文字以上）
• パスワードの確認（上と同じものを記入）
• 規約の確認（チェックを入れる）

となっています。記入ができたら「Create account now」をクリック。

自分のウェブサイトのURLを記入します。「Add website」をクリックしたら、サイトのチェックが始まります。タイム表示が出るので終わるまで待ちましょう。

チェックが終わると、このような画面になっているはずです。一番下の「I’ve added all missing records, continue」をクリックして進みます。今回はキャプチャ用にFC2ブログで登録しているから表示が多いですが、独自ドメインの場合は三項目ぐらいのはず。

このような画面になりますが、これは有料プランを設定する時の項目。無料プランで充分な効果が期待できるので無視します。最下にある「Continue」をクリック。

「Update your name servers」というページになります。その下の項目の「Change　youe nameservers to」にネームサーバーのドメインが表示されています。これはこの後の設定で使用するのでコピペしておくようにしましょう。

ネームサーバーの設定

ここからは各種レンタルサーバーでの設定になります。自分がムームードメインをロリポップと連携して使用しているので、今回はそちらを解説します。

ムームードメインにログインしたら「コントロールパネル」のメニューから「ドメイン操作」→「ネームサーバ設定変更」へと進みます。

先ほど登録したドメインの「ネームサーバ設定変更」をクリック。

「 取得したドメインで使用する ※上級者向け」という欄があるので、そこの「ネームサーバ1」「ネームサーバ2」に先ほど『Cloud Flare』で取得したドメインを割り当てます。

最後に一番下の「ネームサーバ設定変更」をクリックして完了。

入力するドメインを忘れてしまった場合の確認方法

『Cloud Flare』にログインし、登録したドメインの欄の歯車マークから「DNS Settings」を開きます。

画面の右上の方に「Your Nameservers」とあるので、そちらを参照してください。

『Cloud Flare』を「W3 Total Cache」と連携させる

※W3 Total Cacheの導入が前提になっているので、設定方法等は下記の記事を参考にしてください。

WordPressの管理画面の「Performance」→「Extentions」から「Cloud Flare」を有効化します。

「General Settings」に「Network Performance & Security powered by CloudFlare」という項目が増えています。

「Enable」にチェックを入れ、その他の項目も入力しましょう。「API key」は（find it here）から確認可能です。その他はデフォルトで大丈夫です。

最後に「Save all settings」をクリックで連携の設定は終了です。

エラーメッセージがでた場合

「Unable to communicate with CloudFlare API: Setting: zone_settings Zone no longer exists..」というメッセージが表示されることがあります。

その場合は先ほど入力したAPI keyを一度完全に消して、再度入力することで改善されます。

置き換えるのではなく、空欄にしてから再度入力することに注意してください。

この状態から再度入力するようにしよう。

不具合が起こった場合

『CloudFlare』を導入すると、時々CSSに変更を加えてもサイトに反映されない時があります。

そういう時は『CloudFlare』のデバッグモードを使用してください。デバッグモードは『CloudFlare』を強制的に無効化し、三時間後に再度有効にしてくれるモードです。

デバッグモードはW3 Total Cacheもしくは公式サイトのデバッグモードをオンにすることで可能です。

W3 Total Cache上でのデバッグモード。

Cloud Flare上でのデバッグモード。

デバッグモードにした後にサイトをリロードすることで改善が見込めます。

 あとがき

『Cloud Flare』を導入することはサイト表示の高速化に劇的な効果を与えてくれます。無料でインストールも簡単なので試さない手は無いと思います。