前回の記事で書きましたが、このブログの読み込み速度が著しく遅く、(そのせいかどうかは100%さだかではないですが)急にアクセス数が激減する事態を受けて、読み込み速度の改善のためにアレコレとやってみました。

前回の記事:4月18日のGoogle検索アルゴリズム変更からPV数が2/3に激減。アクセスが戻ってくるまでに検討した原因5つ

アクセスが急に減ってから、久々に自分で自分のブログにアクセスしてみたところ、何ともモッサリ…特にスマホからのアクセスは異常に時間がかかるときがあります。

「Mixhostサーバは速いと聞いていたのにいったいどういうことだ!??」とふてくされつつも、今回の作業で最終的にはトップページの読み込みが5秒弱*にまで短縮され、PageSpeed ScoreはA判定になりました。

今回はそれまでの経緯をまとめています。Mixhostを使っている方は参考になれば嬉しいです。

*5秒とみると「遅いじゃん?」と思うかもしれませんが、これはGTmetrixがFully load time、つまりすべての読み込みが完了するまでの時間を計測しているためです。GTmetrixでは平均の読み込み時間が8.5秒なので、平均よりもいいスコアをだしています。試しにSEOチェキでも測ってみましたが、0.464秒という読み込み時間でした。

sponsored link

 

Mixhostをスタンダードプランに変更

まずはここから。もっとも重要な高速化とは適切なサーバースペックを選ぶことだと今回よく分かりました。

さくらレンタルサーバーからMixhostに移転した話を以前の記事に書きましたが、当時は一番安いエコノミープランを申し込んでいました。

当ブログのアクセス数から考えれば十分エコノミーでさばけると思っていたのですが、以前の記事でも「(さくらサーバから移転して)体感的にはもちろん早くなったんですが、なんとなく「ムラがある」のかなぁ…と思ったり。」と書いている通り、表示スピードは期待していたほどの効果がなかったんです。

 

で、今回、Mixhostを使ってブログを運営している人たちの感想とか見てみたんですが、大抵はスタンダードプランを使っているっぽいということに気づきました。「エコノミーじゃやっぱり力不足だったのかも?」ということで、ここは潔くスタンダードプランにアップグレードすることに。

 

Mixhostはこういうアップグレードがすぐにできるのがありがたいですね。申込完了して30分後にはスタンダードプランのスペックになってました。

平均応答時間は、このおかげで即短縮されました。体感的にも早くなりましたし、スマホからアクセスしてみてもずいぶん早くなったなと。

サーバーの応答時間

 

しかしGTmetrixやGoogle Insightsでチェックすると、まだ改善点がありそうな感じ。サーバースペックはこれでOKでも、表示スピードの改善にはもう少しチューニングが必要でした。

 

キャッシュプラグインはLiteSpeed Cacheに

エコノミープランのときに一旦使い始めて、結局W3TotalCacheにしていたものの、スタンダードプランではこのプラグインもきっと大いに力を発揮するだろうということで、キャッシュプラグインはLiteSpeed Cacheに。

LiteSpeed Cacheとは、LiteSpeed Webサーバーで利用できるキャッシュ機能です。
非常に高速かつ高性能で、キャッシュを有効にする事により、導入前と比較して数十倍〜数百倍程度、圧倒的に高速化する事が可能です。
また、サーバーの負荷が低くなる為、アクセス集中時にも安定してご利用いただけるようになります。
LiteSpeed Cacheを利用するには、WordPressプラグインを導入するだけで簡単にご利用いただけます。

 

で、このプラグインの効果ですが、

 

……

あんまり良く分からない…

 

でした(汗)。インストールして有効化するだけでいいので楽なんですが、W3Total Cacheを使っていたときのほうが幅広く色々できたのと、CloudFlareを一緒に使っていたのがよかったのか、体感的なスピードはあまり改善されなかったです。GTmetrixでも幾つかの項目の評価が下がっていました。

 

とはいえ、LiteSpeed Cacheを使えるのに使わないっていうのも何だかもったいない気もするので、キャッシュ系プラグインはこのままで、一旦解除したCloudFlareを再度使うことにしました。

 

CDNとしてCloud Flareを使用

W3TotalCacheを使う場合はそのプラグイン内で設定ができますが、CloudFlare公式のWordpressプラグインというのも実はあります。今回はそれを使うことにしました。

Cloud Flare WordPressプラグイン

 

Cloud Flareを使ったことがない場合は、アカウントの開設、ネームサーバーの変更が必要になります。ここでは割愛しますが、バズ部さんの記事が参考になります。

すぐできる!CloudFlare の設定方法

 

Javascript, CSS, HTMLの圧縮とJavascriptの読み込み高速化

Cloud Flareには、Javascript, CSS, HTMLの圧縮や、Javascriptの読み込みを高速化するRocket Loaderという機能があり、これらもページの表示速度アップに大いに役立ってくれます。

Javascript, CSS, HTMLの圧縮には、Cloud Flareのアカウントの「Speed」メニューから、Auto Minifyの欄でそれぞれチェックを入れておきます。

Cloud Flare Auto Minify

 

Rocket Loaderはまだベータ版のようですが、これを使うとかなりサクサク動く感じがするのでオンにしています。Rocket Loaderがやってくれることは以下の通り。

  • サードパーティによって提供されるJavascriptファイルも含め、ページが読み込むJavascriptファイルをまとめることによってリクエスト回数を減らし、ページのレンダリングが遅れることを防ぐ
  • 非同期でスクリプトを読み込むことにより、ページのロードが遅延するのを防ぐ
  • ほとんどのブラウザやスマートフォンで利用可能なローカルストレージを利用してスクリプトをローカルにキャッシュする

Cloud Flare Rocket Loader

Automaticに設定するとすべてのJavascriptファイルが最適化の対象になりますが、特定のJavascriptファイルを対象から外す設定もできますし、逆に一部のJavascriptだけ最適化してほしい場合はManualで設定することも可能です。詳しくはCloud Flareのアカウント内、「Rocket Loader」欄のHelpからご覧ください。

 

画像の圧縮

Gtmetrix、Google insightsでページをチェックすると、画像に圧縮の余地があると言われてしまうので圧縮プラグインを使って過去に追加したメディアファイルを圧縮しました。

オススメは、WP Smushというプラグインです。

WP Smushプラグイン→ Smush Image Compression and Optimization

インストール後、すでにメディアに存在する画像を一括最適化したい場合は、プラグインの設定画面から、BULK SMUSH NOWボタンをクリックします。フリー版だと50イメージを圧縮するごとに、このボタンをクリックしないといけないのですが、逆にクリックするという手間だけで圧縮してくれるのでこのプラグインが一番いいと思います。このプラグインを使って圧縮したら、GTmetrixでの画像圧縮の項目の評価も高くなりました。

 

有名なEWWW Image Optimizerを以前使っていましたが、WP SMUSHのほうがより圧縮される感じがします。
(有料版の場合はフリー版に比べてさらに2倍圧縮率が高くなるらしいです。)

その他の圧縮プラグインとしては ShortPixel Image Optimizer もよさそうです。ただ、フリー版は月当たりに圧縮できる画像の数がかなり限られているので、既に画像がたくさんアップロードされている場合は、一括圧縮するのに有料版を使う必要がでてきます。

 

SSL化にはプラグインを使わない

Mixhostの目玉といえば、SSL化が超簡単に低コスト(というか追加料金なし)でできることですが、WordpressサイトをSSL化するときはプラグインを使わないほうが、やはりパフォーマンスはよくなります。

MixHostのヘルプで推奨されているプラグインReally Simple SSLは、インストールするだけで強制的にサイト内のURLをhttps://~から始まるように修正してくれるので楽と言えば楽ですが、以下の方法で完全にHTTPS対応させた方がスッキリしますし、余計なプラグインを使わずに済むのでパフォーマンスの面でもベターです。

面倒なのは一回だけ、それも小1時間あればできる作業です。

 

プラグインを使わないSSL化の手順

  1. WordPress管理画面の「設定」>「一般」で、WordPress アドレス とサイトアドレスのURLをhttps:// ~始まるように変更
  2. SearchRegexでコンテンツ内の内部リンクのURLをhttp://からhttps://に変更する
    詳しくは寝ログさんの記事を参考にしてください(見出し5の「内部リンクをSearch Regexで全て置換する」のところです。→  WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
  3. ブラウザ(ChromeやFirefox)のデベロッパーツールでエラーが出ているところを見ながら修整をしていく
    → 特に、ウィジェット内、header.php、footer.php、function.php、などでhttpから始まっているURLが残っている可能性があるので、チェック&修整します。

 

PHPはバージョン7以降にすることも忘れずに

これは前から設定済みでしたが、備忘録として念のため。PHPバージョン7以降では表示スピードが改善されているので、まだバージョン5.xを使っている場合は今すぐ7以降にすることをお勧めします。cPanelから変更できます。やり方は以下の公式ガイドを参考に。

→ PHPのバージョン変更(PHP7のご利用方法)

 

高速化チューニングの結果は…

トップページは綺麗にAA判定が出るようになっています。いやぁ何だか気持ちがいいですね。

個々の投稿ページは、そのページのボリュームや表示される広告によって読み込み時間に差が出ますが、それでも以前のモッサリ感はなく、日本から9000kmほど離れたこのセルビアからアクセスしてもそこそこのスピードで表示されるのでまずまずといったところでしょうか。

 

ブログは書いて放置、ではなく、自分でアクセスして使い勝手をチェックしたほうがいいですね。今回のことを教訓に、時々ブログ訪問者の視点で見てみるのを忘れないようにしたいと思った次第です。

 

以上、最後までお読みくださりありがとうございました!