データを移行させてみて、従来使っていたさくらのレンタルサーバよりも速いとわかったカラフルボックス
のBOX2プラン。
それにより、完全にこっちへ引っ越してしまうことを決めたので、ここからさらにどれだけ高速化が図れるか色々と試してみました。
LiteSpeed Cacheの導入
まず何はなくとも欠かせないのがLiteSpeed Cacheプラグインの導入です。
これはカラフルボックスで採用されている、LiteSpeed Webサーバ専用のキャッシュプラグインで、開発元がサーバソフトと同じところだけに相性の良さと効果の高さに定評があります。もっさり動作のWordPressにキャッシュプラグインは効果大ですから、トラブルが起きないならこれを使わない手はありません。一方、インストール済みだった古いキャッシュプラグイン(ただしトラブルのために停止状態)は、これに伴い完全削除。
LiteSpeed Cacheには画像最適化機能があるので、機能的に被るEWWW Image Optimizerというプラグインも削除します。この画像最適化によって、裏で自動的にファイルサイズが削減されるようになります。効果の度合いはメディアライブラリに表示されます。
設定をざっと見ていって、「CSS圧縮化」「JS圧縮化」「HTML圧縮化」については、WordPressテーマのCocoonにも同様の機能があり、むしろそちらに任せておいた方が親和性が高かろうということですべてオフ。
HTTP/2プロトコルの恩恵を受けるための「CSS HTTP/2 プッシュ」「JS HTTP/2 プッシュ」はオン。
メディア設定で画像の遅延読み込みをオンにしたところ、いったんレイアウトを固めてからじゃないと画像のロードが始まらないようになってしまい、逆に印象として遅くなったのでこれはオフ。これもWordPressテーマのCocoonの側に同様の機能があるので、そちらのLazy Loadをオンにしておきます。
その逆に、ブラウザキャッシュについては.htaccessの内容をLiteSpeed Cacheの管理下に置いておきたいので、Cocoon側はオフにしてLiteSpeed Cacheの方をオンにします。
ここまでの時点で、はっきりわかるレベルで速くなりました。キャッシュプラグインによってページが崩れるような悪影響も出ていません。かなりいい感じです。
Chromeのデベロッパーツールでさらに無駄な点をチェック
ここからは、Chromeのデベロッパーツールを使って、さらに無駄な点を削減して詰めることにしました。デベロッパーツールというのは、以前こちらの記事でふれたChromeの検証機能で出てくるやつです。
使うのは主にNetworkタブ。これを開いた状態でページを読み込ませると、読み込み開始から終了に至るまで、どんなリソースをどのプロトコルによってどれだけの時間をかけて読み込んだのかすべてチェックすることができます。
これによるとどうもGoogle Adsenseの広告は、その広告ごとにHTTP/2だったりHTTP/1.1だったりと、プロトコルが統一されてない様子。なーんかページを読み込む度に、スピードにバラつきを感じてたんですが、このせいかもしれません。
LiteSpeed Cacheのメディア設定にiframesの遅延読み込みがあるので、これをオンにして影響を最低限にとどめましょう。
他に読み込み時間を食っているリソースがないか確認すると、まずPinterestのシェアボタンが複数回60ms～90ms食っていました。1msのリソースが並ぶ中でこれはかなり目立ちます。
特に必要なボタンとも思えないのでCocoonの設定を変えて表示項目から外しました。
あと時間食ってるものといえば…Web連載の更新チェック用としてサイドバーに置いてある連載の一覧出力用スクリプトだなあ。これははてなアンテナからデータを引っ張ってきて表示しているので、そこのレスポンスがもろに影響してしまうのです。
といって、これは旧ブログからこっちに移行してきた時に「前も重宝してたからここにも欲しい」という声をいくつか受けて設置したものなので、消すというわけにもいきません。試しに非同期読み込みにしてみたら表示用の領域確保からちゃんとやらんと駄目っぽかった。何も表示されなくなっちゃった。
これはとりあえず保留かな。
最後に、Cocoonが生成するサムネイルのサイズを下記の記事を参考にしてちょっと変更。
Cocoonは、Ratinaディスプレイ対応のスマホでも画面がぼやけないように、高解像度画像を出力するよう指定することができます。それはいいんですけど、うちのサイトだと「よく読まれている記事」カルーセルに使われるサムネイル画像がどうもめったやたらと大きい。ここまで大きくなくていいだろうというほど大きい。
そこで、想定される表示サイズのほぼ倍寸となるように、サムネイル画像をサイズ指定してやりました。枚数が嵩むところなだけに、かなりリソースの読み込み負荷は軽くなるはず。
どこまで速くなったかチェックしてみる
ひとつずつ設定を変えながら効果のありなしを判定していたので、その都度速度チェックはしてたんですけど、総合してどれだけスコアが上がったのかを最後に載せたいと思います。
こうなりました。
さくらのレンタルサーバ時代からの向上度合いをまとめると次のようになったわけです。
| さくらの レンタルサーバ | カラフルボックス 引っ越し直後 | 今回の設定後 | |
|---|---|---|---|
| PageSpeed Score | 48% | 49% | 83% |
| YSlow Score | 69% | 64% | 75% |
| Fully Loaded Time | 7.4s | 5.5s | 3.0s |
フロントページのPageSpeed Scoreが48%から83%にアップ。読み込みにかかる秒数に至っては7.4秒から3.0秒と倍以上に速くなりました。
この後さらにLiteSpeed Cacheの設定を見直してオブジェクトキャッシュをオンにしたら、PageSpeed Scoreがもう一段伸びて88%にまで上がりました。インスタントクリックというのもオンにしてみたら読み込みがこれにも増してめちゃくちゃ速くなったんだけど、ところどころページの読み込みに失敗するケースが出てきたのでオフに逆戻り。効果は高そうなので、なんとか安定してこのオプションをオンにできないものか…。
あとはCDN(色んなサイトにコピーを置いて読み込みリクエストに近いサーバから配信するよう分散化するシステム)をオンにできると90%も狙えそうです。でもそのためにはCDNサービス側にDNSの設定をお任せする必要があり、でもムームーメールを使ってる自分はその設定をムームードメインから動かせない。
今度めんどくさくない時に、ムームーメール解約してメールデータの移行から全部やっちゃおう…。
ちなみにさくらサーバーで稼働していたデータは、今もこちらのURLでアクセスすると確認することができます。
どうしてもサーバから最初の反応が返ってくるまでの待ち時間が避けられないんですよね。
アクセスは皆無になってるわけだし、表示にどうしても必要なプラグイン以外はすべて外した状態で置いてあるので、以前よりは随分速くなっているはずです。それでも今の方が圧倒的に速い。引っ越して良かったです。
