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

PR

 medium_3380560365

僕はずっとWordPressの表示を速くするためにずっと、
「CloudFlare」
を利用していました。

CloudFlareとは?
Webサーバー上のコンテンツの中でキャッシュが出来るファイル(画像,CSS等)をCloudFlare上のサーバーにキャッシュする事でWebサーバーのレスポンスを改善する、CDN(コンテンツデリバリネットワーク)サービスです。

凄くザックリ言うと、画像を軽く表示するよ!ってサービスですね。

http://jp.cloudflare.com/

つい先日、急にサイトが表示されない不具合に見舞われまして、

2013-11-15_230949

「うわ、参ったなぁ。」とアレコレしていると、
優しいフォロワーさんが「CloudFlareがエラーになってますよ。」と。

 

ああ、なるほど。。

ついつい、自分がCloudFlareを利用している事忘れてしまうんですよね。
「エックスサーバーついにやらかしたか?」なんてあらぬ疑いをかけてしまいました。

サイト自体は多分、1時間もしないうちに復旧したと思うのですが、
さてこれからどうするかと。無料サービスなんで文句はいえませんが知らない間にサイトが停止されるのは適わないなぁ。。と利用再開に二の足を踏んでいました。

しかし、僕のサイトは画像が多いので
非常に重い!

なんとかしないと・・・
そんな時に気になるツイートを発見。

 

なんてタイムリーなツイート。jetpackにそんなのあるのか・・・
これは良さそう。

photo credit: Viernest via photopin cc

WordPressの表示を速くするプラグイン

automattic社のJET PACKプラグイン

2013-11-23_173421
http://profiles.wordpress.org/automattic/

JetPackは、wordpress.comを運営しているautomattic社のプラグインなのでとても安心。で、その「Photon」はwordpress.comを利用したCloudFlareと同じCDNサービスなんですね。

利用には「wordpress.com」のアカウントがいるので先に取得しておきましょう。

2013-11-23_163841

2013-11-23_163850

「日本語」を選択すれば日本語に切り替わります。

プラグイン「jetpack」をインストール

2013-11-23_164317

登録を終えたら、次に「jetpack」プラグインをインストール。
管理画面から直接インストールしてもOK。

2013-11-23_163950

インストールしたら、有効化を。

2013-11-23_155008

「wordpress.comと連携」をクリック。

2013-11-23_155027

wordpress.comに予めログインしておくと認証画面になります。(してない場合はそのままログイン)
「jetpackの認証」を選択。

 2013-11-23_155050

これで、jetpackが使えるようになりました。

WordPressの表示を速くするPhotonを有効化

2013-11-23_155109

そのまま、管理画面にある、Photonを有効化。

2013-11-23_165221

以上で完了です。
CloudFlareよりも簡単ですね!

jetpackのPhotonでどれだけ表示が早くなるのか?

photo credit: Todo-Juanjo via photopin cc

photo credit: Todo-Juanjo via photopin cc

最近の記事で画像の多い、
あなたは課金の怖さを知らない。iPhoneゲーム「黒猫のウィズ」に、ついに課金して学んだ事」で試してみました。

まずは、「CloudFlare」は勿論、「jetpack」も無い、

まっさらな表示速度。

表示速度は環境やタイミングで変わる時もあるので
今回は3つの分析ツールを使用。

 Web担当者ページ速度分析ツール

2013-11-23_160812

10.559ミリ秒「すごい遅いですね」

悪かったよ・・・

 Pingdom

Website speed test - 2013a-11-23_16.08.44

 Load time 7.80s

GTmetrix

2013-11-23_160949

Page Speed Grade(googleの判定スピード) 「B」
YSlow Grade(Yahooの判定スピード)「D」

いやぁ・・・悪いっすね。

「Photon」を利用後の表示速度を調べてみる

ちなみに、利用すると画像のURL

 2013-11-23_161142

から、

2013-11-23_161250

と、「http://i2.wp.com/~」が付いたのがわかります。

Web担当者ページ速度分析ツール

2013-11-23_161928

10.559ミリ秒から3.584秒に!

約7秒速くなりました。

(元がひどすぎ。)

 Pingdom

 2013-11-23_162011

 Load time 7.80sが3.95sに。約4s速くなりました!

GTmetrix

2013-11-23_161557

Page Speed Grade 「B」→「A」
YSlow Grade「D」→変わらず。

というわけで、

かなりマシになりました!

正直、Cloudflareよりも効果を実感
CloudFlareの利用を悩んでいる方にはお勧めですよ。

ネームサーバを変更する必要もないので、不具合時にサイトが表示されないという事も無いでしょう。

まとめ

519oKV-8mLL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_

プロになるためのWebデザイン入門講座 実践で役立つ
Photoshop&Illustrator徹底ガイド

以前、Stingerでの「jetpack」の利用の不具合を頂いた事がありますが、
僕の方では今回問題ありませんでした。

-WordPress