CloudFlareより読み込みが速い！？CDNサービス「Photon」を検証。

CDNとは？

CDNとは「Contents Delivery Network」の略で、ウェブコンテンツを配信するために最適化されたネットワークのことを意味する。
ウェブサイトにある画像や動画などの高容量コンテンツをウェブサービスが提供されているサーバーとは別のサーバーにキャッシュし、代わりに配信して負荷分 散するという仕組み。ここでいう「別のサーバー」というのがCDNサーバーである。画像を多く掲載している ブログなどは無料で使えて確実な高速かが期待できるシステム。

いつもWordPressやSEO対策の勉強のために色々なブログをサーフィンさせて頂いているのですが、その中でも特に勉強になるENJILOGさんのブログで興味深い記事が投稿されていました。

CloudFlareよサヨナラ！ WordPressの表示速度が改善するプラグイン「Photon」

こちらの記事、大変興味深い！確かにCloudFlareを導入している時はCSSの更新をしても実際反映されるまで時間がかかっていました。そのたびに「あ、CloudFlareのサイトでDevelopment Modeにするの忘れてた。」なんて思う事も多々ありました。いちいちCloudFlareのサイトに飛んで設定して、反映出来たら設定戻して…ってやるのは面倒です。なので出来れば違うCDNサービスは無いのかな？なんて思っていました。そこで自分のブログも本当に速くなるか試したくなり挑戦してみる事にしました。今回、管理ブログの「夢はアイアンマン！初心者トライアスリートの挑戦！」の方で実験してみます。

GTmetrixにてCloudFlareを使った状態で計測。（キャッシュ系プラグインは全部オフ。）

CloudFlareとキャッシュ系プラグインをオフにした状態での読み込みスピードはこちら。
GTmetrixの結果(Test Server Region: Vencouver Canada)

読み込みに３秒ちょっとかかっていますね。まだまだ改善の余地はありそう！

それではPhotonのインストール開始！

まずはプラグインの新規追加からjetpackを検索。jetpackはWordPress.comを運営するAutomattic社が提供している安心のプラグインです。そしてjetpackプラグインをインストール。インストールしたら有効化をして、右下の「WordPress.comと連携」ボタンをクリック！

するとこんな画面になるので、アカウントが無い人はここで「アカウントが必要ですか？」から作ってください。そしてアカウント名とパスワードを入れたら「Jetpackの認証」ボタンをクリック。

問題なくインストールが済んでいれば右上に小さく書かれた場所に「WordPress.comと連携済み」と出てきます。そしてこのページの下の方へスクロールするとPhotonのボックスが半透明で現れるので「有効化」をクリックしてください。

これで設定はOK、CloudFlareの導入時よりはかなり簡単に出来ました。さて早速読み込みスピードを検証してみましょう。

jetpackのphotonの読み込みスピードは？(キャッシュ系プラグインは全部オフ。）

GTmetrixの結果(Test Server Region: Vencouver Canada)

そしてこちらは、DB Cache Reloaded Fix,MO Cache,W3 Total Cacheをオンにした場合。

GTmetrixの結果(Test Server Region: Vencouver Canada)

ん？CloudFlareの方が大分速い結果ですが、これは自分のやり方が何か間違っていたのでしょうか？でも、実は今回管理ブログのdmtriathlon.infoで試す前にこのブログ dmgadget.infoの方でもやってみたのですが、結果は今回と同じでした。この検証が終わってもう一度CloudFlareに戻したんですが、その結果も…GTmetrixの結果(Test Server Region: Vencouver Canada)

PageLoadTime 0.78s!!!やはりCloudFlareの方が速い結果となりました。

やっぱりそうなのかとネットでAbukawa Labさん（現在ブログは繋がりません）でも、同様の結果で遅くなったみたいですね。それぞれの状況に応じて対策しないと人それぞれ速くなる人ならない人といらっしゃるみたいです。あとどうやらアメリカかどっかのサーバーから読み込みしてる影響で遅くなってるみたいです。CloudFlareのサーバーもアメリカじゃないの？？と思ったんですが、どうなんでしょうか？

CloudFlareだとCSS編集したときはDevelopment modeにしたりと多少面倒ですが、もうしばらくCloudFlareを使ってみたいと思います。挑戦した方、ご意見ご感想などありましたら是非お聞かせください！