*

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

 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」の利用の不具合を頂いた事がありますが、
僕の方では今回問題ありませんでした。

スポンサーリンク

  • このエントリーをはてなブックマークに追加
follow us in feedly

※Google+限定投稿もしています

お問合せ

IMG_0815
僕が売れる文章力の為に買いまくった39冊のライティング本など

少しでも良いという評判を聞いたライティング系などの本はすぐに購入してし...

14324010468_7f14d79700_z
Amazonプライム(送料無料)加入で悩む方に1年利用してる3つのメリットの感想

Photo: undefined by ActuaLitté 4/6に...

employee-1118183_1280
10年ほど面接して人を雇い、育ててきて思う事。

人を統率するには3つ方法があります。 恐怖で従える 信頼で従える マニ...

IMG_0628
仕事のスピードを上げる~やりたい事が多すぎて何も進まない人に「400のプロジェクトを同時に進めるスピード仕事術」

最近やりたい事、やらなければならない事は多いのに全然進まない、捗らない...

medium_2271513941
センス抜群!便利すぎる人気のアイデアグッズまとめ

ネットで話題になった商品や自分で使って便利だったグッズを随時上書きで更...

medium_322458462
Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]

こんにちは。enjiです。 Web屋として7年程生き抜いているのですが...

medium_2546557644
仕事をする理由が無い〜日本人の目標は「楽をする事」なんじゃないか

昨日、たまたまつけていた番組が非常に良かった。加藤浩次さん司会の「全力...

medium_10575089545
人生で疲れたなぁと思ったら思い出したい当たり前の事

上手くいかない時、どうしようもない気分の時ってありますよね。 不安や恐...

medium_4175322330
面白いマンガ! 読んで損なし人気のおすすめ漫画を厳選紹介

photo credit: Stéfan via photopin c...

large_5668893519
アフィリエイトのやり方とは? 初心者が稼ぐ為の基本知識

いよいよ今年も終わりですね。今年、ENJILOGが注目された1つ理由で...