たまに更新するくらいで基本放置気味のこのブログ（WordPress）ですが、ちょこちょこ来訪される方もおられるので少しパフォーマンスを気にしてみたけども今一つ。そこでプラグインを入れたらかなり改善したので記録を残しておこうと思います。

今一つのサイトパフォーマスとその計測結果

ちょろちょろとサイトの来訪者が増えていたので、もう少しパフォーマンス改善したらもっと人がきてくれるかも、と思ってまずは自分のパフォーマンスを計測することにしました。

使用したのは Google の Page Speed Insights です。URL を入れるだけでサクッとページの読み込み速度などのパフォーマンスを測ってくれます。おまけに改善する方法まで提案してくれるナイスなヤツです。

さて、では手持ちのこのブログ（WordPress で運用）を測ってみましょう。

モバイルが 81pt と悪くは無いけどももう少し頑張りたいスコアになってます。ちなみに PC だと 91pt と良いスコアになっていますが、世の中はすっかりモバイルファーストです。モバイルでもグリーンスコアを叩き出したいところ。しかもあまり苦労せずに……。もう少し減点内容のところを詳しくみてみます。

こうみると「レンダリングを妨げるリソースの除外」が割と支配的な感じです。さらに詳しくみてみます。

特に CSS で顕著ですが、JS もファイルサイズが少し大きくなっており、その読み込みに時間がかかるような感じです。ここで「WordPress のプラグインを導入してみたら？」という優しい問いかけが Google 先生からあったので今回はそれに従ってみます。

Autoptimize プラグインの導入

リンクを辿ってみるといくつか速度向上に繋がりそうな WordPress プラグインが列挙されてます。今回はその中でも Autoptimize をチョイスしてみました。名前からして楽に最適化してくれそうで期待が持てます。

Autoptimize

サイトは基本英語ですが、設定画面はそれほど難しく無いのでご安心を。

設定方法

※注意※ 自分はこれで最適化されて問題なくページが表示されていますが、プラグイン導入によってページが見えなくなるケースもあるかもしれませんのでその場合はプラグインを無効化してください

プラグインのインストール後は WordPress の管理画面のメニューの【設定】にAutoptimizeが追加されていると思うので、そちらを選択します。

すると設定項目が表示されるので、まずはメインとなる【JS、CSS＆HTML】のタブを開きます。

まず、JavaScript のコードを最適化するかのチェックボックスが OFF になっているかと思うので、こちらをチェックします。これだけで読み込まれる JavaScript のコードが最適化されます。

次にその下の項目にある CSS/HTML についても最適化を行うようにチェックを入れておきます。基本はこれだけでOKでした。

ついでに画像の読み込みについても改善してみます。画像の最適化と WebP 対応、Lazy-load にチェックを入れてみました。

簡単に速くなったよ！

さて、設定が完了したので再び PageSpeed Insights で計測してみます。

プラグインを入れて設定変えただけでこの改善！素晴らしい！先ほど問題になっていた「レンダリングを妨げるリソースの除外」をみてみると……。

何と！項目から消えています。この項目については改善するべきポイントは無くなったということでしょう。「サーバー応答時間の短縮」については、テーマ変えるとかか、サーバーの強化が必要なのでちょっとすぐに手を出せなさそうな感じがしたので、本日はここまで。モバイルユーザがさらにきてくれることを願い……。