ブログの記事数や訪問者数がある程度増え始めると、サイトの表示速度についても改善しなければなりません。
私も記事数と内容を増やすことで精一杯だったので、サイトの表示速度については後回しにしていました。
久しぶりにPageSpeed Insightsを見たところ、私のサイトは表示速度が非常に遅いことに気付き驚きました。特にモバイル表示が遅く、５０点前後しかありません。
この記事では私のブログにおいて、サイト表示高速化のために行った対策を紹介します。
特にWordPressのプラグイン、AutoptimizeとWP Super Cacheの導入は簡単で、かなりの効果がありました。
パソコン表示に関しては６０点前後から９０点前後に急上昇しましたので、表示速度改善に興味のある方はぜひ最後まで御覧ください。
ブログ初心者で、サイト表示速度の改善に興味がある方
サイト表示速度改善のためインストールしたワードプレスのプラグイン
| インストールしたプラグイン | 用途 |
| EWWW Image Optimizer | 主に画像サイズの圧縮 |
| Autoptimize | 主にCSSやJS、HTMLなどのコードを軽量・最適化。今回は画像の遅延読み込みにも使用 |
| WP Super Cache | 主にキャッシュの活用 |
ネット上の様々な解説サイトを参考にした結果、これら３つのプラグインが比較的安全かつ設定が簡単で、効果がありそうでした。
私が使用している有料テーマ「JIN」のマニュアルで、EWWW Image OptimizerとAutoptimizeは推奨プラグインとされていましたが、WP Super Cacheは扱いに注意するよう記述がありました。
EWWW Image Optimizerはすでに使用していましたが、アップロードする前に画像を圧縮していなかったのが表示速度に大きく影響しているようです。
今後はアップロードする写真のサイズに気を付けなければなりません。
サイト表示速度改善のため設定した主な内容
Autoptimizeで画像の読み込みを「遅延読み込み」にする
最もネックになっているのが画像サイズの問題らしいとわかったのですが、写真中心の記事を多く書いていたため、今からアップロードし直すのは現実的ではありません。
PageSpeed Insightsで指摘された項目の内、すぐに対処できそうなことは、オフスクリーン画像を遅延読み込みさせることでした。
この点はAutoptimizeを設定するだけですぐに改善されたことが、PageSpeed Insightsで確認できました。
同時にCSSやJS、HTMLなどのコード内容等も最適化しましたが、効果についてははっきりと確認できませんでした。
ただしAutoptimize導入後PageSpeed Insightsのポイントははっきり良くなった印象があります。
Autoptimizeの細かい設定に関しては、詳しい方の記事がネット上にたくさんありますので省略させていただきます。
WP Super Cacheでキャッシュを活用する
もう一つすぐに対処できそうなことはキャッシュを利用することでした。
キャッシュ系のプラグインは、他のキャッシュ系プラグインと一緒に使うと不具合が生じる恐れがあるなど、良くわからないまま使うのは怖い印象があったのでインストールしていませんでした。
今回色々調べるうちに、WP Super Cacheは「WordPress.com」を運営しているAutomatic社が提供していることを知り、導入することにしました。
私のサイトでは、WP Super CacheのONとOFFで、PageSpeed Insightsの点数がすぐに５～１０ポイントほど変わりました。
WP Super Cacheの細かい設定も、より詳しい方の記事がたくさんありますので省略します。
キーリクエストのプリロード
キーリクエストのプリロードとは、重要なリクエスト（キーリクエスト）を先に読み込むことのようです。
これはプラグインを使用せず、キーリクエストをプリロードするためのコードをブログのHEAD内に貼り付けて対処しました。
ネット上で紹介されていた何種類かのコードを試した結果、以下の例でやっと解決できました。
対象となるURLによってコードの書き方が異なるようなので、慎重にためしてみてください。
<link rel=”preload” href=”対象URL” as=”font” type=”font/woff2″ crossorigin>
私の場合上の対象URLの部分に、PageSpeed Insightsで指摘されていたURLを挿入して、ブログのHEAD内に貼り付けました。
私が使用しているWordPressテーマの「JIN」は、HEAD内に簡単にコードを貼り付けることができるので助かりました。
直接コードを修正しなければならなかったら、あきらめていたかもしれません。
もしも初心者の方がコードを直接修正する場合は、バックアップを取るなどくれぐれも注意してください。
これでキーリクエストのプリロードについては解決できました。
まとめ
様々なプラグイン解説ブログ記事を参考にしましたが、おすすめ設定がそれぞれ微妙に異なっているためかなり悩みました。
私のブログに合うように設定したつもりですが、これが最適解かどうかはまだわかりません。
ただ今回の対策により、PageSpeed Insightsの点数はモバイル・パソコン共に平均スコアが少なくとも５ポイント以上は良くなったようです。（曜日・時間によって大きく異るため、はっきりとはわかりません。）
特にパソコンの方は対策前が７０点前後だったものが、９０点前後まで大幅に改善されたので大成功です。
今のところ特に不具合も見られないので、とりあえず良かったです。
サイトの状況によって効果には差があると思いますので、あくまでも参考程度にお読みいただければと思います。
今回も最後までご覧いただきありがとうございました。
