ホームページやブログで情報を発信するうえで、わかりやすい、整然とした文章は非常に大事です。
そして写真やイラストなどもたくさん使いビジュアル的にもユーザーを惹きつけるようにすることも大切になります。

しかし、たくさんの画像を使いすぎると起こりうる問題もあります。
それが「読み込みスピードの低下」です。
せっかく良い内容が書いてあっても、表示されるまで時間がかかってしまってはユーザーにストレスがかかり、最悪離脱されてしまうかもしれません。

画像をたくさん使いたいけど、ページの読み込みスピードも落としたくない。
そんな悩みにお答えするプラグイン「Lazy Load」をご紹介いたします。

読み込みスピードが遅くなる原因

そもそも読み込みスピードが遅くなる原因はなんでしょう？
ブラウザがページを読み込んで表示する際、ページ内に配置されているテキストや画像ファイルなど、すべてを読み終わってから描写を始めます。
つまり読み込むべきファイルが多ければ多いほど、ページが表示されるまで時間がかかってしまいます。
大きくキレイな写真をたくさん使う場合、ページの読み込み速度に気を付けなければなりません。

読み込みスピードが遅いとSEOにも悪影響が…

ページの読み込み速度が遅いとユーザーのストレスになるのは予想できますが、同時に検索サイトの検索順位にも悪影響があるかもしれません。
Googleは2018年に「Speed Update」というアルゴリズムをサーチエンジンに更新し、読み込みスピードが遅いとペナルティを与える可能性があることを示唆しました。
逆に言えばサイトスピードの改善はSEO施策として有効ともいえます。

読み込みスピードの改善方法「遅延読み込み」

では読み込みスピードを速くするにはどうすれば良いでしょう。
読み込む画像やCSS,javascriptなどの外部ファイルを圧縮したり、サーバをチューニングし対応速度を速めるなどがあります。
そして今回ご紹介するプラグインは画像の「遅延読み込み」という方法で速度改善します。
「遅延読み込み」と聞くと逆に遅くなりそうな印象を受けますが、遅延させるのは「読み込むタイミング」です。
上記で述べた通り、通常ならページ内にある全ての画像ファイルを読み込んでからページを表示させますが、遅延読み込みは表示領域にない画像は最初に読み込まずスクロールされて表示領域に入って初めて画像を読み込みます。

ページ上部にある画像以外を読み込まずにページ描写が開始されるので、最初の描写までの時間短縮になります。

WordPressの遅延読み込みプラグイン「Lazy Load」のご紹介

そして上記の画像の遅延読み込みを設定できるプラグインが「Lazy Load」です。
導入することで、該当する画像ファイルなどを遅延読み込みをするように設定が可能となります。

「Lazy Load」のインストール方法

「Lazy Load」の設定方法

「Lazy Load」インストール後の効果

「Lazy Load」をインストールしたことによって本当にスピードが上がったのでしょうか？
表示時間は回線のスピードやデバイスの処理能力によって増減したりするので体感的にはわかりにくいかもしれません。
そこでGoogleが提供しているスピードチェックツール「PageSpeed Insights」を使いましょう。
対象のURLを入力すると読み込みスピードをスコア化してくれ、また改善すべき要素なども教えてくれます。
以下プラグインを導入前の結果と導入後の違いです

このように画像の遅延読み込みの効果によりスピードが上がっていることがわかります。
画像の遅延読み込みは大きな画像をたくさん使っているページほど効果があります。

まとめ

今回は画像の遅延読み込み設定を行うプラグイン「Lazy Load」をご紹介しました。

画像や動画などのリッチコンテンツを使うことでユーザーの目を惹きつけ、わかりやすい情報発信が可能になります。
しかしユーザのの閲覧環境やサーバーの設定によってページを表示するまで時間がかかってしまうことがあります。
ページの読み込み速度にも考慮したコンテンツ作りが大切になります。
サクサク動くホームページでたくさんのページを見てもらえるようにしましょう。

S&Eパートナーズではサイトの表示速度にも考慮したSEO施策をご提案しています。
もし運用されているホームページの読み込みスピードが気になる方はお気軽にお問い合わせくださいませ。

ご相談、お問合せはこちら