Twitterにも書いていましたがこちらのblogに関してプラグインやらを入れ替えることでデザインを修正していたのですが、どうもそれのためにいつの間にかページを表示するまでの速度がかなり遅くなってしまったことに気がついてしばらくの間速度を上げるために四苦八苦していた、という話です。基本的にはWordPressの設定が多いのですが、Apacheの設定やnginxの設定もいろいろと変更していました。

変更前の成績と変更後の成績は？

まずはPageSpeed Insightsで測定をしてみた結果です。変更前はこちら。

両方ともかなり悪い成績です。特にパソコンのブラウザでの閲覧では66/100となっていて、赤で修正が必要な項目が出ています。変更後はこちら。

モバイルの成績はほとんど変わっていませんが、パソコンのブラウザでの閲覧だと81/100と大幅に改善しました。特にパソコン側で見たときの修正が必要な項目について赤修正項目がなくなり最低ラインをクリアすることに成功しました。

WordPressの高速化のためには？

こちらについてはいろいろなサイトで紹介されていますので端的に言いますと

• キャッシュプラグインなどを導入してスクリプトやデータベースの動作が必要なタイミングを少なくする
• 不要なプラグインを無効もしくは削除することでWordPressそのものを軽量化する
• デザインの中にある不必要なブログパーツを削除する(プラグイン含む)

というものがあります。ちなみにここ数日間のデザインがおかしくなった理由はキャッシュプラグインなどを導入する段階で現在のデザインやブログパーツと相性が悪いものがかなりあり、それを引き当ててしまうことにありました。しかもちょっと私用で日中操作ができなくなったときなんかはデザインは直っていたのですがキャッシュの設定ミスでアクセスログが一切とられない期間があったようで…。苦労しました。

今回新規に導入したプラグインは

というと、以下の二つになります。

• WP Fastest Cache (キャッシュプラグイン)
• EWWW Image Optimizer (画像最適化プラグイン)

そのほかにもW3 Total CacheやらHead Cleanerやら試したのですがこのblogの場合特にCSSに関する最適化やインライン化の設定を行うとデザインが壊れてしまうらしくそのあたりの設定がうまくできないプラグインは対象外となりました。またページキャッシュについてはパーマリンク設定がデフォルトになっていたためキャッシュできない、という状態だったので設定変更およびこのblogにある記事すべてに対してリンクをDB上から直接置換することで対応しました。ついでに絶対URLでリンクしていた部分も修正したり。そのためSearchConsoleに強制的にサイトマップを読み直しさせるなど苦労しました。はじめからキャッシュ設定はちゃんとしておけばよかった…、と思っています。

不必要なプラグインも削除しよう

これも重要なことです。機能をいろいろと試しているうちに不必要なプラグインが有効化されたまま放置される、ということが多々あるのではないでしょうか。プラグインのリストの中で使っていないプラグインは削除しましょう。今回はとあるブログパーツを削除したことでそれに関連するプラグインを使わなくなったため削除対象にしてあります。

外部のブログパーツもPageSpeed Insightsの成績を下げる要因なので注意

ブログパーツはblogに人を呼び込むには「初期には」有効であることは多いのですが検索での流入が大多数を占める場合はページ閲覧に時間がかかるなど成績が悪くなる原因となりますので削除した方がよいことが多いです。下手をするとただの賑やかしにしかならない、ということにもなりかねません。このblogの場合は今回だとZenbackが削除対象としました。もしかするとサイドバーにあるブログパーツも削除するかもしれません。リンク元を見ていますがブログパーツによる流入の増加が一切ないようなので…。

モバイル側の得点が上がらない理由は？

これについてはモバイル側を担当しているプラグインであるWPtouchの影響が大きいと思われます。本来ならレスポンシブデザインにすれば問題はないのかもしれませんがちょっとカスタムが大変になりそう、ということでWPtouchを使っています。これが速度を落とす要因で、おそらくこれの場合キャッシュが効かない、という状態になっているのだと思います。WP Fastest Cacheにはモバイル側のページを別にキャッシュする、という機能があるようですがこの機能はプレミアムの機能、つまり有料部分なので今のところは使っていません。これを使うことで改善する、かつそれなりの収益が生まれるのであればしたいところです。

ブラウザのキャッシュを使うための設定をしよう

WordPressだけでは解決しづらいのがこれです。各種ファイルについて有効期間を設定することで通信量を下げる、というのがPageSpeed Insightsの得点を向上させる方法なのですが…。WordPressからだと.htaccessから各MIMEタイプに対して設定を行う、という方法があるようですがどうせVPSなのでそのあたりはすべて制御可能ということでApacheに直接書き加えてみました。今回書き加えたのはこちら。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 minutes"
    ExpiresByType text/html "access plus 1 days"
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

レンタルサーバーによっては.htaccessに書き加えれば通るものもあるとは思いますがうまくいかない方が多いと思いますのでこちらはVPSなど自前で設定できる場合、としておきましょう。こちらが成功すればブラウザのキャッシュ利用の大半がうまくいくはずです。

そしてこのblog特有の問題がTex表記に関するものです。数式表示で使っているTex表示で、引数が同じであれば表示されるべき数式は同じですのでキャッシュをかなり長くしても問題はないですが、元々がCGIスクリプトであるためキャッシュ期間がApache上では2時間と設定されているらしく、変更するのがかなり面倒、というのがあります。そのためTexの表示に限りリバースプロキシであるnginx側でキャッシュの時間を延長することで対応しました。nginx側から見ればCGIの引数まで含めた場合は静的コンテンツ扱いでも問題ないからですね。なお、nginx側だけでJPEGやPNGといった画像データおよびJavaScriptやCSSといったデザイン要素のキャッシュ期間を延ばそうとするとキャッシュの状態が誤ってしまうらしくデザインが盛大に壊れてしまったためその部分をApacheで対応している、という事情もあったりします。

PageSpeed Insightsの得点向上はユーザーの体感向上と同時にSEO対策にもなる

当たり前ですがページの表示速度が遅くなるとユーザーは離れていってしまいますのでその部分を改良するのは当然のことです。今回の場合パソコンでのアクセスだとblogのトップページの記事を読み込むだけで2.8秒かかっていたところを0.4秒まで下げることに成功しています。nginx側のキャッシュ効果も含めればかなりよくなっているといえると思います。それに加えてこれによってページのランキングを向上させることができればまさに一石二鳥ですね。あとはモバイル側がよくなれば完璧、なのですが…。

はてなダイアリー側を削除しようか検討中…

こちらに移転したときに一度考えたことですがまたもやこれを考えることになってしまいました。特に記事が重複している期間があるためその部分のランクが悪くなることや、それ以上に全体に響いてしまうと今だとかなり問題だな～と感じていることにあります。また、両者のアクセスログを見る限り基本的に記事を見てくれる人は検索によって来ている人がほとんどでブログパーツ経由の人もほぼいないですし、片方のblogの記事を見た後で検索にあったためにもう片方も見に来てしまう、という現象が発生していることも影響しています。はてさて、どうしましょうかね…。ちなみにはてなダイアリー側のデザインも少し変更してZenbackを削除したりカレンダーのウィジェットを削除したりしていますよ。