CDN等でWordPressの表示処理を高速化

当WordPressブログのメンテとして、ページ表示の高速化作業を行った。その結果、ある程度の成果が上がったと思われるので、WordPressでブログを書いている方のためにシェアしておきたい。

まず、なぜページ表示を高速に行いたいか。それは、検索順位に影響があるからである。

もちろん、ページがサクサク表示されるだけで検索順位が自動的にバンバン上がるといった単純な話では無いが、Googleの検索エンジンは表示の早いページを評価して優先的に上位表示する傾向があると言われている。

あと、検索結果でクリックされて閲覧されるときにも、表示が早いと閲覧する読者の満足度が上がり、離脱率が下がるとか、より長い時間ブログを見てもらえるとか、そういった副次的な効果も期待できそうだからである。

総合的には、やはりブログの表示の速さが検索順位やコンテンツとしての評価に繋がると考えている。

そんな訳で、高速化にも取り組んだので主にどのような事を行ったかを以下に記す。

1. サーバ側の仕様・設定を変更
2. 高速化プラグインの導入
3. コンテンツ配信ネットワーク（CDN）サービスの導入

「ロリポップ」のサーバをモジュール版PHPが使える「スタンダード」に変更

まず、一番土台となっている、ブログをホスティングしているサーバのスペックを見直した。

当ブログは、現在GMOペパポの「ロリポップ」というレンタルサーバを使用している。
当初は、そのロリポップでも安上がりな「ライト」プランだった。最安ではないが、WordPressの設置が出来るプランでは一番価格の安いものだった。

ただ、これだとやはり共用していることもありサーバの応答などがあまり良くない感じなので、一つ上の「スタンダード」に乗り換えた。サーバのハード側スペックはライトと同じだが、モジュール版PHPという、一般的なCGIのPHPより高速なPHPが使えるようになったため、ある程度の高速化が達成できたようだ。

これについては、残念ながら変更前と後の比較を厳密に行っていないのだが、GMOペパポによるとモジュール版PHPはCGI版PHPの37倍高速だという。筆者の感じとして、30倍まで高速化したかは何とも言えないが、いずれにしろサーバの処理が多少早くなったように思う。

高速化プラグインの導入：キャッシュや画像の圧縮、JavaScriptやCSSの最適化など

次に、高速化プラグインの導入である。
これについては、WordPress高速化では定番となっているものがいくつかあるので、それをご紹介しよう：

• キャッシュ系プラグイン： WP Super Cache、W3 Total Cache、など
• 画像の圧縮・最適化： EWWW Image Optimizer、WP Smush、など
• JavaScript読み込み非同期化: Asynchronous Javascript
• JavaScript/CSS最適化: Autoptimize

本ブログでは、キャッシュ系プラグインとして「W3 Total Cache」、画像の最適化プラグインとして「EWWW Image Optimizer」、それに「Asynchronous Javascript」と「Autoptimize」も入れている。

WordPressのテーマによっては相性が良くないプラグインがあるので注意が必要だが、一応このような組合せでも問題は無さそうなので、現状はそれらをオンにしている。

無料のコンテンツ・デリバリー・ネットワーク（CDN）「Cloudflare」導入で高速化表示にトドメ

サーバスペックの変更や高速化プラグイン導入などでもある程度の高速化ができたが、もう一つ今回のメンテ作業でさらに劇的な高速化を実現できたのが、コンテンツ・デリバリー・ネットワーク（CDN）だった。

CDNをネットで検索すると様々なサービスがあるのだが、今回は無料で使えWordPressのユーザにも利用者が多くいるとみられる「Cloudflare」を採用した。これが、無料とは思えないほど高速化の効果がある。

設定の詳細はここでは割愛するが、キモとなるのはサーバ側のネームサーバの指定と、Cloudflare側の設定である。

Cloudflareの「Speed」設定では、まず「Auto Minify」のJavaScript、CSS、HTMLのチェックボックスに全部チェックを入れる。

次に、Speed設定の少し下にある「Rocket Loader」では「Automatic」にチェックを入れておいた：

ネームサーバの設定画像は割愛するが、サーバのプロバイダのネームサーバはホスティングサービスで自動的に割り振られているものをCloudflareが提供するネームサーバに変更する。これは、初めてだったがやってみると別にそれほど難しくはなかった。

だが、サーバやシステム管理の知識が多少ないと、最悪の場合、ブログが表示されなくなったりする恐れがあるので、分からない人は自分でやらずに分かる人に頼むか、CDNの利用は当面見送るかということになると思う。

ただ、筆者の実感として、ブログの表示を高速化したいのであれば、やはりこれは使わない手は無いかなと思う。それくらい強力だからだ。月20ドルの有料プランに入っても良いかなとさえ思ってしまう。

論より証拠、どれ位パフォーマンスが上がったかをご覧頂こう。

まず、CDN導入前の表示パフォーマンスは以下の様な感じ：

高速化プラグインは既に導入済みでページスピードはある程度出ているが、YSLowというスコアが良くない。また全体的にページが全部表示されるまでに相当の時間がかかっていた。

これが、CDN導入後は、次のようにGTMetrixでの計測では大体1～2秒以内での表示、つまり数倍から10倍の高速化が達成できた。

実はグーグルの「PageSpeed Insights」では、改善しろとまだ言われるのだが、実際に自分のブラウザで表示させていても高速に表示されるようになったことが体感できるので、まぁ良しとしている。

（本ブログの読者の方も、もしかするとこれまでよりブログの表示が早くなったことに気が付かれたかもしれないが、どうだろうか。）

いずれにしろ、高速化のための高速化ではなく、検索順位の改善やユーザエクスペリエンスの向上が目的なので、グーグル先生のいう事だけを鵜呑みにしなくても良いと思うからだ。

ともかく、検索エンジン最適化やWordPressブログの高速化などには終わりが無いので、今後も継続的に改善を行っていきたいと考えている。

【追記: 5/20】
Cloudflareの設定を行ったのち、夜が明けて朝、当ブログが表示されず”522 エラー”が頻発する事態となった。
調べた所、どうもロリポップではCloudflareでこの問題が発生するようだ。残念ながら、これでは使いものにならないので、いったんCloudflareのネームサーバからロリポップの元のネームサーバへと設定を戻した。

【追記: 5/29】
プラグインなどを整理し、サーバの負荷を減らしてから、再度ネームサーバをCloudflareの設定にしてみたところ、今のところは522 Errorなどを含めて特に問題はなく稼働している模様。当面、これで様子を見ながら運用してみたい。（ただ、サーバが格安だと応答速度の点で限界があるので、いずれにしてもより高速なサーバへの引っ越しを検討中。）