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

※当ページのリンクには広告が含まれています。

CLOUDFLARE WordPress(ワードプレス)
スポンサーリンク

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

こんにちは、TONELIKOです。

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

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

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

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

GTmetrix10/24

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

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

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

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

 

スポンサーリンク

CloudFlareとは?

CLOUDFLARE サーバーネットワーク

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

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

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

 

CloudFlareの導入方法

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

CLOUFLARE 今すぐ登録!

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

CLOUDFLARE アカウントを作成

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

Webサイトを追加します

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

CLOUDFLARE あなたのレコードスキャン間お待ちください。

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

CLOUDFLARE スキャン完了 継続

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

DNSレコードを構成します。

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

CLOUDFLARE 設定を選択

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

CLOUDFLARE ネームサーバー情報

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

ムームードメイン DNS情報書き換え

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

DNS更新しました

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

CLOUDFLARE 設定完了

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

 

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

GTmetrix CLOUDFLARE導入の結果

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

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

CLOUDFLARE ウェブサイト

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

CloudFlare設定 パフォーマンスの設定

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

CloudFlare ロケットローダー 自動へ

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

ロケットローダー自動に変更後のGTmetrix

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

 

自動縮小する(ウェブ最適化)も

CLOUDFLARE 自動縮小する

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

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

 

WordPressプラグイン

WordPressプラグイン CloudFlare

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

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

WordPressプラグイン CloudFLARE設定

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

CloudFlare マイ・アカウント

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

 

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

エックスサーバー WordPress管理画面へのアクセスが拒否されました

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

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

WordPressセキュリティ設定

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

FTP制限設定

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

 

あとがき

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

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

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

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

 
以上TONELIKOでした。
 

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


コメント

  1. CloudFlareを導入しました。 | 甲乙人生珍道中 より:

    […] CDN「CloudFlare」は効果絶大!WordPressブログの表示を2.94秒短縮! この記事を参考に導入しました。 これでブログの表示が高速になった、筈。 […]

  2. […] cloudFlare の導入方法はさまざまな方が紹介していますのでこのページでは割愛します。例えばこちらのサイトには画像付きで詳しく紹介されています。 CDN「CloudFlare」は効果絶大!WordPressブログの表示を2.94秒短縮! | トネリコBL… […]

  3. WP高速化:CloudFlare導入 | kitchen・家具設計|k-design より:

    […] ②トネリコBLOG 様のページ「CloudFlare」で無料で簡単にWordPressをさらに高速化する方法! […]

タイトルとURLをコピーしました