WordPressの表示速度を高速化させるプラグインを紹介します。ブログやサイトの表示順位を高める上で、表示速度はもっとも重要な要素の一つです。
コンテンツがどんなにすばらしいブログでも、表示速度が平均よりも下回っている場合、直帰率は高いです。直帰率とは、ブログのユーザーが次のページを開かずに離脱してしまう確率のことになります。
Googleは表示順位を決める上で、表示速度を重視しています。ですので、もしも速度が遅いということならば、この機に改善していきましょう。
とはいうものの、表示速度を高速化するプラグインはいくつもありますよね。
Photo by Marc-Olivier Jodoin on Unsplash
今回はその中で上から順に画像を表示させて表示速度を高速化させるブラグインのBJ Lazy Loadを紹介します。
このページの目次
サイトの速度を測定する
BJ Lazy Loadをインストールして有効化する前に、ブログの速度を測定してしていきましょう。実際にどれだけの効果になるのかわからないので、こういったプラグインを導入するときには、比較対象を作っておきます。
ブログのスピードを測定するには、PageSpeed Insightsが便利です。そこでさっそく、このブログの速度を測定してみます。
すると、モバイルでは91/100で「Good」
パソコンでは82/100で「Good」の結果でした。
このスコアは常に一定ということではなく、つねに変化します。なので、ときどき確認してみて下さい。ただ、これだけでは分かりにくいですから、画面にあるクエリ（origin:https://www.buzzclub.site）をクリックします。
すると、モバイルではFCPが1.3s、DCLは1.7s
パソコンでは、FCPが1.1s、DCLは1.4sとなりました。
ちなみにFCPはFirst Contentful Paintの略で、ユーザーが見ることができるまでにかかった時間です。この時間が短い程、すぐに表示されるサイトということになります。
それからDCLはDOM Content Loadedのことで、HTMLドキュメントが読み込まれて解析されるまでの時間です。
数字だけを比較するとパソコンの方が速いですが、パソコン環境の場合は全体的に高速ですから、こういった結果になっています。
現在の速度を確認したところで、BJ Lazy Loadをインストールして有効化していきます。
BJ Lazy Loadの導入手順
まずはBJ Lazy Loadを導入するまでの手順を説明します。
- BJ Lazy Loadをインストールする
- BJ Lazy Loadを有効化する
- 初期設定をする
BJ Lazy Loadをインストールする
管理画面のプラグインから新規追加をクリックします。
キーワードにBJ Lazy Loadと入力すると表示されるので「今すぐインストール」をクリックします。
BJ Lazy Loadを有効化する
「有効化」をクリックします。
これでBJ LAZY Loadの有効化は完了です。
BJ LAZY Loadの初期設定
有効化が完了すると「設定」に「BJ LAZY Load」が表示されるのでクリックすると初期設定では以下のようになっています。
設定の仕方は人によってそれぞれ異なるかと思います。ただ、「Lazy Load images」の項目は必ず「YES」を選択しておきましょう。画像はテキストに比べてサイズが大きいので、表示させるまで時間がかかります。
ここを「YES」にすることが、このプラグインを使用する最大のポイントです。
Placeholder Image URLでは、画像を読み込んでいる間に表示させる画像を指定することができます。通常、空欄でO.K.です。
Skip images with classesでは、上で指定した中で除外したいクラスを指定することができます。ここも空欄でO.K.です。
Thresholdは、画像にどれだけ近くまでスクロールされたら読み込ませるかの設定になります。デフォルトでは200pixelsですが、このままで問題はないと思います。
ここは確認したところ、200pixelsでは時間がかかり過ぎるように感じます。なので、400pixelsくらいにしたほうがよいのかもしれません。目で確認しながら調整してみてください。
Use low-res preview imageは実際の画像をロードする前に品質の低いプレビューを表示するかどうかの選択になります。ここも「NO」で問題はないと思います。
最後に「変更を保存」をクリックすれば、BJ Lazy Load初期設定の完了です。
BJ Lazy Loadの効果をテストする
初期設定が完了したら、BJ Lazy Loadを有効化することで表示速度が高速化されたかどうか確認します。テーマや利用しているプラグインによって、不具合が生じたり、効果が出ないこともあります。
それでは、PegeSpeed Insightsに戻って、もういちど速度を測定してみます。
すると、モバイルでは79/100
パソコンでは87/100
先ほどの測定ではモバイルのスコアは91、パソコンのスコアは82でしたので、このブログでは使用しないほうが良いのかもしれません。
もう少し詳しく見てみます。
モバイルの速度はFCPが1.3s、DCLが1.7s
パソコンの速度はFCPが1.1s、DCLが1.4sなので、有効化する前と比べて変化が見られないという結果になりました。
テーマや使用しているプラグインとの相性などによって、使用しても有益にならないこともあります。高速化が見られない場合は、あえて導入する必要はないので、削除して下さい。
ただ、数日後に変化が見られるということもあるので、日にちをおいて再度テストをおすすめします。そのほうが効果があるのかどうか確実に判断できます。
このブログではプラグインの効果をみることが出来ませんでしたが、設定が簡単なので試してみても良いかと思います。高速化されるなら、使わない手はないはずです。
（注）このブログでは、Autoptimizeというプラグインを使用しています。BJ Lazy LoadとAutoptimizeの相性は、あまり良くないようです。BJ Lazy Loadを導入した後に、画像が消滅するという不具合が発生しました。
ですので、使用するときは注意して下さいね。