CDN「CloudFlare」は効果絶大！WordPressブログの表示を2.94秒短縮！

なんと、GTmetrixで「ＡＡ」が出ました！ブログ運営を始めてから1年弱経ちますが、初の快挙です。

こんにちは、TONELIKOです。

いきなり、何のことだかさっぱり分からない人もいますよね。GTmetrixとは、サイトの表示速度や、GoogleやYahooからの評価といった、サイトのパフォーマンスを測定するサービスです。

ページの表示速度が遅く、検索エンジンからの評価がよくないと、訪問ユーザーの満足度を下げてしまい、ページ離脱率が高くなってしまうと言われています。

「トネリコBLOG」を動かしているWordPressは、動的にページを生成するシステムのため、どうしても重くなりやすい傾向があります。おまけに、この「トネリコBLOG」は画像を多用するので、輪をかけて重いんですよね。

過去記事「速度92%短縮！WordPressの遅い表示を改善した、たった1つのプラグイン設定」の通り、一時期は、サイトの表示速度を3.33秒、Google判定A、Yahoo!判定Cまで、パフォーマンスを向上させることができたのですが、その後、テーマを変更したり、ウィジェットを追加したりしているうちに、またどんどん重くなってしまいました。

ついには、サイトの表示速度が5.33秒、Google判定B(84%)、Yahoo!判定D(65%)まで落ち込んでしまったのですが、今回、藁にもすがる思いで、スピードアップに効果があると評判の「CloudFlare」という無料サービスを利用してみました。

すると、なんと一気に2.94秒短縮（表示速度2.39秒）し、Google、Yahoo!共に「A」判定（GTmetrixで「ＡＡ」が出たとはこのことです）が出たではありませんか！ビックリです！まさか、これほどの効果があるとは思いもしませんでした。

ブログの画像やウィジェットの数を減らしたりせずに表示速度を上げたいのであれば、この「CloudFlare」を利用することが最も効果的だと思います。

今回は、その「CloudFlare」の導入方法に関して説明したいと思います。

CloudFlareとは？

「CloudFlare」とは、今話題の、無料で利用できるCDNサービスのことです。

CDNとは「コンテンツ・デリバリー・ネットワーク」の略で、コンテンツを複数地域の複数サーバーに配置し、ユーザーからのアクセスに対して最適なサーバーからコンテンツを配布する負荷分散サービスです。

このサービスを利用することで、サーバー上のキャッシュ可能なファイル（画像、CSS、JSファイル等）を「CloudFlare」の世界中の複数サーバーにキャッシュすることができ、レスポンスを大幅に改善することが可能となります。

CloudFlareの導入方法

「CloudFlare」は5分ほどで簡単に導入できます。無料サービスと有料サービスがありますが、無料サービスでも十分効果を得られるでしょう。

まず、「CloudFlare」にアクセスして、「今すぐ登録！」をクリックします。

メールアドレス、ユーザー名、パスワードを入力し、利用規約に同意してアカウントを作成します。

ブログのURLを入力（http://は不要）して、Webサイトを追加します。

「私たちはあなたのレコードスキャン間お待ちください。」と、片言ながらも丁寧な日本語で指示されますので、おとなしく待ちます。

スキャンが完了したら「継続」をクリックします。

「DNSレコードを構成します。」ページが表示されます。この画面はよく分からなければ何もいじらずに、一番下の「私はすべての不明のレコードを追加した、継続」という緑ボタンをクリックして構わないと思います。実は私もなんとなくしか分かりませんでした。

次は「初期設定を選択します」ページです。一番上の「プランを選択します。」で「無料-$0月」を選択する以外は、初期設定のままで「継続」をクリックします。

DNS（ドメインネームサーバー）情報を、上記のように「CloudFlare]に書き換えるよう指示がありますので、導入ドメインのレジストラの設定で変更します。

当ブログの場合はムームードメインでしたので、ログインした後、「コントロールパネル」＞「ドメイン管理」＞「ドメイン操作」＞「ネームサーバ設定変更」からDNS情報を変更しました。

「CloudFlare」に戻り、「続け、私は私のネームサーバを更新しました」という、ちょっとユーモラスな片言の日本語ボタンをクリックします。

これで「CloudFlare」の設定は完了です。なお、ネームサーバー切り替えが完全に反映するまでには24時間位かかります。

ロケットローダーで一気に爆速！

「CloudFlare」を導入した後、GTmetrixで測定した結果が上記画像です。GoogleはB(84%)→B(87%)へ、Yahoo!はD(65%)→D(66%)と、やや評価が上がりましたが、ページ速度は5.33秒→5.68秒と、むしろ遅くなってしまいました。

そこで、「CloudFlare」のロケットローダーを使います。

「CloudFlare」にログインした状態から、「ウェブサイト」を開き、該当ドメインの歯車マークをクリックして「CloudFlare settings」をクリックします。

「CloudFlare設定」画面で「パフォーマンスの設定」タブを選択します。

ロケットローダー（ウェブ最適化）を「自動」に変更します。すると・・・

ご覧のとおり、一気に「ＡＡ」評価が出ました！表示速度も2.39秒と、今まで見たことのない2秒台を叩き出しました！

自動縮小する（ウェブ最適化）も

同じ「パフォーマンスの設定」ページに「自動縮小する（ウェブ最適化）」の項目があります。JavaScriptやCSS、HTMLのコードから、空白や、改行、コメントなどを削除しファイルを縮小することで、速度向上を図る機能のようです。

ロケットローダーほどの劇的な効果はありませんが、やらないよりはやっておいた方が良いでしょう。右側の「JS」「CSS」「HTML」をすべてオンにしておきました。

WordPressプラグイン

ブログのユーザーは「CloudFlare」を通してサイトにアクセスしますので、コメントを投稿すると、書き込み元のIPがすべて「CloudFlare」のものになってしまうという不具合が発生するようです。

そこで、WordPressに「CloudFlare」公式プラグインを入れて有効化しておくと、コメントを投稿した人のIPが、実際の投稿者のIPになります。是非入れておきましょう。

「CloudFlare」プラグインの編集画面で、API KeyとAPI Emailを入力します。なお、Development Modeは通常はOffのままでよいでしょう。

API KeyとAPI Emailは、「CloudFlare」にログインし、「アカウント」＞「マイアカウント」画面から確認できます。

エックスサーバーで管理画面にアクセスできない！

「CloudFlare」導入後、しばらくしてからWordPress管理画面にアクセスできないというトラブルが発生しました。

これはエックスサーバーのセキュリティ対策により、国外IPアドレスからのアクセスを制限していることが原因のようです。

エックスサーバーのサーバーパネルにログインし、「WordPressセキュリティ設定」から「国外IPアクセス制限設定」をOFFに切り替えます。これで無事に、WordPress管理画面にアクセスできるようになりました。

なお、このままではセキュリティ面で不安ですので、FTP接続にIPアドレスによるアクセス制限をかけることにしました。先ほどと同じくサーバーパネルにログインし、「FTP制限設定」から使用中のIPアドレスを追加して、FTP利用環境に制限を加えます。

あとがき

多少トラブルもありましたが、「CloudFlare」の導入は、「トネリコBLOG」のパフォーマンス向上に大きな成果をもたらしてくれました。結果的にはやって良かったと思います。

WordPressはどうしても重くなりがちです。そんなWordPressでブログ運営するなら、「CloudFlare」は欠かせないサービスの一つと言えるかもしれません。

なお、当ブログでは今のところ無事に運用できているようですが、サーバー環境等によっては思わぬ不具合が発生する可能性もあります。

「CloudFlare」の導入に際して、いかなるトラブルが発生しても、当方は責任を取れませんので、導入にあたっては、あくまでも自己責任にてお願いします。

 
以上TONELIKOでした。
 

トネリコBLOGはエックスサーバーを使っています。安心感があっておすすめですよ。