【WordPressプラグイン】無料CDNで転送量激減！高速化でSEO効果あり！【Jetpack Photon】
2016/02/15
先日、さくらインターネットのレンタルサーバーに引っ越しして、試用期間中の転送量制限にかかって503エラーと格闘していました。
いや、まだ解決してないので格闘中です(；・∀・)
前回、画像の最適化と圧縮によって、転送量をがっつりと削減することに成功しました。
【WordPressプラグイン】画像の圧縮・最適化で転送量激減！SEO効果あり！【EWWW Image Optimizer】
これによってサーバーエラーの503が無くなっていれば一安心だったのですが、「リソースブースト」を適用していてもまだまだ頻発していたんです。
やっぱり根本から解決するには画像のサイズを小さくするだけじゃなく、外部のサーバーに配置してそれを取得してもらうしかない！
そう思って色々と無料の画像サーバーとして扱えるサービスが無いかなーと探しました。
- wordpressの全画像をGoogleフォトから配信させるようにした | やわなべ.net
- [WordPress] ブログに貼る画像のアップロード先は、サーバー・Flickr・Picasa のどれにします？ – rakuishi.com
- 直リンクできるオンラインストレージ | みさきる！
あるにはあったわけですが、どれも画像をアップロードしてパスの頭部分(https://hapisupu.com/wp/wp-content/uploads/)だけを書き換えるだけで完了といったものがないわけです。
あまりにも移行作業が大変過ぎるので、早急に対応しないといけない現状では使えない！
そして気づいたのが、画像だけにとらわれて考える必要ないよね。ということ。「html、js、css」みたいな静的ファイルも全部置いてもらえるにこしたことはない。
そう言えば、そういうのを効率よく配信してくれるサービスがあったなぁ…。確かコンテンツデリバリーネットワーク。いわゆるCDNというやつが。
もしかすると無料で提供してくれてたりしないかなーと探してみる。良さそうなのが2つあった！！
「CloudFlare」の方はWordPress関係なくどんなWebサイトでも使えるもので、「Photon」の方はWordPressでしか使えないWordPress.comが提供してくれているサービス。
WordPress.comが提供とかかなり熱いじゃん！と、ほぼ「Photon」を使う気満々！
でもやっぱり良い方を使いたいので、両者比較して「良いな！」と思った理由と「Photon」の導入手順や効果のほどを紹介したいと思います！
スポンサーリンク
CloudFlareの特徴
まずは今回採用を見送った「CloudFlare」から。
- 一般のWebサイトで使えるので利用者が多く情報も豊富
- スピード的には「Photon」より早い（らしい）
- サーバーが落ちて見れなくなることがたまにある（らしい）
- DNS情報を書き換えないといけない
- キャッシュは後から消すことが可能
- html, css, js, png, jpg等の静的コンテンツに対応
- 複数のjsファイルをまとめることが可能
- 各種静的コンテンツの最適化・圧縮するか選択可能
とりあえずサーバーが落ちて見れなくなるというのは辛い…。とは言っても拾った情報が2013年のもので古いので、最近は安定稼働しているかもしれません。
CloudFlareよサヨナラ！ WordPressの表示速度が改善するプラグイン「Photon」
ただ、DNSを「CloudFlare」に向けることになるので、もし何かあった時に自分のサーバーに向け直したとしても、1～3日対応が遅れることになるので色々と辛い(´・ω・`)
そして何より、DNSを「お名前.comの旧サーバー」から「さくら」に切り替えたばかりで、2サーバーで並行運用中なので、これ以上余計なことしたくないｗ
「Photon」より早いというのはたぶん本当だと思います。うまく使えば「CloudFlare」の方がパフォーマンス出せそうです。余裕のある時期にまた検証します！
Photonの特徴
Photon — Jetpack for WordPress
- WordPress.comを運営するAutomattic社が提供しているプラグイン「Jetpack」の一機能
- 導入は「Jetpack」をインストールして有効化するだけ
- WordPressで「Jetpack」を有効にしていないサイトで使ってはいけない
- 「jpg, png, gif」の画像にのみ対応
- 「js, css」等は非対応
- 自動でCDNとして適用されるのはメディアに登録されている画像ファイルのみ
- キャッシュされた画像は削除も更新もできない
- 画像の最適化は強制的にされる
- アニメーションgifは壊れる可能性が高い
- APIによって画像の加工を行なって返すことが可能
画像にしか対応していないということと、メディアに登録した画像しか自動では対応してくれないということ以外は、私的には特に問題無さそう。
何より導入が楽だし、何かあったとしてもプラグインを無効にしたらいいだけなので気軽に試せる！
というわけで、時間もなかったのでお手軽ですぐに効果を出せそうな「Photon」を導入することに決めました。
Photon（Jetpack）のインストールと設定
「プラグイン」の「新規追加」画面に行くと、検索するまでもなく表示されていると思いますｗ もしいなければ「Jetpack」で検索して「今すぐインストール」です。
インストールが終わったら「Jetpack」を有効化しておきましょう。
WordPress.comアカウントとの関連付け
「Jetpack」の機能を使うためには「WordPress.com」のアカウントとの関連付けを行う必要があります。「WordPress.com」はアメーバブログや、はてなブログみたいなブログサービスのWordPress版のようなものです。
ブログサービスを利用する必要はないですが、アカウントは必要なので取得して関連付けます。
「Jetpack」を有効化すると「Connect to WordPress.com」と出てくるので、クリックします。
「Connect Jetpack」をクリックします。
JetpackがWordPress.comアカウントに連携しようとしています。と出てくるので、もしアカウントを持っているのであればログインして承認します。無いようであれば「アカウントが必要ですか？」をクリックしてアカウントを作成します。
メールアドレス、ユーザー名、パスワードを入力して「アカウントを作成」します。
仮登録が完了してログインした状態になります。入力したメールアドレスに認証用のメールが届いているので確認します。
メールにある「メールアドレスを確認」ボタンをクリックしてアカウントを有効化させます。
アカウントが有効になると、先ほどの確認ダイアログの状態が更新されるので「承認する」をクリックしましょう。
これでWordPress.comアカウント関連付けは完了です。
Jetpackの設定
関連付けが完了したら画面が更新されるので「Jump Start」でJetpackの利用を開始します。
初めは色々な機能が有効になっているので、「Photon」以外全て停止します。必要だと思うものがあれば、有効のままにしておいても良いですが、ソーシャルボタンや関連記事など外観に影響を与えるものも含まれているので、気をつけて下さい。
この画面から無効にできる項目は限られているので、下で説明する「設定」の画面で無効にして下さい。
「Jetpack」のサブメニュー「設定」の画面で、一括で全ての機能にチェックを入れて、「Photon」のみチェックを外します。その後「停止」を選択して「適用」をクリックします。
これで「Photon」の機能だけを利用する設定は完了です。
PhotonのCDNが適用されているか確認する
「ページのソースを表示」や「検証」などから、メディアから引っ張ってきている画像のパスを確認してみて下さい。
通常は画像パスが「https://hapisupu.com/～」となる所が、「http://i0.wp.com/hapisupu.com/～」の様に、間にCDNのドメインが挟まります。
ちなみにCDNのサブドメインには3種類「i0, i1, i2」用意されていてランダムで適用されます。
特にこのファイルだから、このサブドメインでないといけない。というものではありません。
自動で適用されない画像もCDNの対象にする
テーマやプラグインなどで使う画像は自動でCDNの対象になりません。そういった画像もCDNの対象とする場合、CDNのドメイン「｛ i0, i1, i2 ｝.wp.com/」のどれかをパスに追記することで、CDNの対象とさせることが可能です。
WordPressでPhotonを入れているかどうかは関係なく、CDNのドメインを追記することで動作はしますが、禁止されているので止めましょう。
Photon導入による効果
レンタルサーバーの転送量が激減
まだPhotonを有効化しただけの状態なので、テーマ内の画像やその他で直接読み込んでいる画像は適用されていません。
画像最適化を行なったのが1/30の17時頃。Photonを適用したのが1/31の2時半頃です。
1/31のPV数下がってるからそれに合わせて転送量も下がってるように見えてますが、実際のPV数（下のAnalytics）はCPU使用時間の推移とほぼ同じ感じでした。恐らく画像ファイルの一部がPVの数として数えられているのだと思います。
ちなみに1/30の1時半頃から「リソースブースト」をかけていたので、2/1までは転送量制限が緩和されていました。1/30にかなりのエラーが出ていたので、あまり効果ないのかもと思っていましたが、1/31からは転送量が下がったこともありますが、ほぼほぼエラーが出なくなりました。
すぐに「Photon」導入してなかったら、PVが普段の倍近くまで伸びてたのでえらいことになってたと思います(ﾟＡﾟ;)恐ろしや。
画像の転送速度が向上
さくらのレンタルサーバーよりも、PhotonのCDNを利用した方が転送速度が早いので、ページの表示速度も上がる。
青い四角で囲った部分がPhotonのCDNが働いている部分。同じ色で塗っているのは同じファイルでCDNが働いていない部分。
計測には「GTmetrix」を使用。測った日も時間も違うのでトータルのスピードは落ちてますが、雰囲気が伝わればと…！
GTmetrix | Website Speed and Performance Optimization
こういう速度測るツールってやり直す度に、かなりの幅でスコア変動するので劇的に変わらない限り信じていいか分からないよね。
それとA8.netのバナーがここ数日、えらく重い時があってそういう時にやると酷い時はトータル1分超えとかになる(´・ω・`)自分でサイト見ててもサイドバーがブロッキングされて表示がだいぶ遅れたりしてたので外すか場所変えるかしようかな…。
A8.net見てた時サーバーエラーになってたし、何かやってるのかな。なるべく、ベンチ取る時は広告とかランダムな要素は外した状態でやりたいので、そういうオプション何か用意しておこう。
Googleからの評価を高められる（SEOで有利に働く）
Googleのサービス「PageSpeed Insights」で指摘を受けていた部分が改善します。
CDNから画像を転送した場合、Cache-Controlが付いた状態で送られるので、ブラウザに画像が保存されて一定期間は同じ画像を送ることがなくなります。
これは「修正が必要」で「ブラウザのキャッシュを活用する」と指摘されていた部分だったので、1ポイント程上昇しました！
自分のサーバーにおいていて対応できていないのは数ファイルのみになった。
終わりに
何とか「Photon」のおかげで503地獄は回避できました！とは言え、「リソースブースト」が切れてからは若干のエラーが出ているので、次の対策を講じます！
それにしても、こんなありがたいサービスを無料で提供してくれるのは本当にありがたいですね。
WordPressを使っていて無料でお手軽にCDNを使いたいなら「Photon」がオススメです。
ただ、現在は画像のみしか対応していないので、「CloudFlare」もうまく併用して使えるようになれば、更なる高速化や転送量減に繋げられると思います。
メインのドメインを移してしまうのは怖いので、「cdn.hapisupu.com」みたいなサブドメインを作って、障害時にはすぐ対応できるような仕組みで構築する予定です。
でも他に試したい対策があるので、まずは「mod_deflateによる圧縮」と「mod_expiresによるキャッシュの活用」を試してみます。
また効果の程を共有したいと思います！
それでは。
2016/2/15追記：次の対策を書きました！凄い効果です( ･`д･´)
mod_deflateで圧縮転送！mod_expiresでキャッシュ活用！高速化でSEO効果あり！