WordPress

Lazy LoadでWordPressを高速化!スクロールで画像を遅延読み込みさせるプラグイン

LazyLoad_WordPress高速化

この記事では画像のレイジーロード(遅延読み込み)することでWordPressを高速化する方法について書きます。

これを実施することで以下のメリットを得ることが出来ます。

  • 無駄な転送量の削減
  • ページの表示速度向上

今回、私がご紹介するプラグインはLazyLoadです。

LazyLoad

※2019/01/07 追記

Googlebotに画像が認識されないという情報を入手したので、私のブログでは一旦当該プラグインを停止しています。

レイジーロード(遅延読み込み)とは

WEBサイトに掲載されている画像を一度にすべて読み込むのではなく、ユーザー(読者)がスクロールして当該画像が表示されるタイミングで読み込みを行う方法です。

冒頭にも記載しましたが、これを実施することで以下2点のメリットを得ることが出来ます。

  • 無駄な転送量の削減
  • ページの表示速度向上

私の場合は転送量の削減というよりは、ページの表示速度向上が目的でこの作業を実施しました。

無駄な転送量の削減

私たちは無数にあるWEBサイトの中からサーチエンジンでの検索やSNSからのリンクを経て目的のページを開きます。

ページを開いた瞬間に「これじゃない!」と思って、すぐにブラウザバックされた経験ありませんか?

例えば、デザインや文章が読みにくかったり、欲しい情報がなかったり。

こんな場合でもレイジーロードを導入していないと、当該ページを開いたタイミングで全ての画像を読み込みます。

画像数が少なかったり容量が小さい場合は特に問題がないと思いますが、画像が多かったり容量が大きい場合はWEBサイトの運営側・ユーザー側にも負担が掛かります。

  • 運営側  :サーバーに負担が掛かる
  • ユーザー側:データ通信量が掛かる(通信制限の原因)

レイジーロードを実装するとこれら運営側・ユーザー側の課題を解決することが出来ます。

ページの表示速度向上

ユーザーがWEBサイトを開いた瞬間にすべての画像読み込みがはじまると、上記で記載したようにサーバーに負担が掛かります。

サーバーに負担が掛かると処理能力が落ちてしまい、ページの表示速度が遅くなってしまいます。

ページの速度が遅くなるとユーザーはそのページから離れてしまいます。

とらとらべ
とらとらべ
世の中にはたくさんのWEBサイトがあるので、「別のサイト見ればいいや。」と思ってしまいますよね。私がユーザーの立場なら読み込みが遅いサイトは敬遠します。

Lazy Loadの利用法

LazyLoad_インストール画面

WordPressのプラグイン>新規追加から「Lazy Load」を検索語に、今すぐインストール>有効化を実施するだけです。

これだけで自動的にレイジーロードが可能となります。

遅延読み込みされた画像はGooglebotに認識されない?

これは私もLazy Loadを導入したあとに知ったのですが、遅延読み込みされた画像はGooglebotには認識されないそうです。

というのも、Lazy Loadは人のスクロールに合わせて画像を表示していますが、GooglebotはスクロールしてWEBサイトを確認することはありません。

Googlebotとは?

Googlebotとは以下に記載されているように、新規作成ページや更新ページを見つけて検索結果に登録してくれる仕組みのことです。

Googlebot とは、Google のウェブクロール用の bot です(「スパイダー」と呼ばれる場合もあります)。 クロールは、Googlebot が Google のインデックスに追加する、新しいページや更新されたページを検出するプロセスです。

引用元:Googlebot – Search Console ヘルプ – Google Support

GooglebotにWEBサイトを認識してもらうためには

GooglebotからWEBサイトにアクセスがあった際にLazy Loadを停止させることが出来ればこの問題は解決します。

・・・が、今設定を変更すると速度低下の問題の切り分けが出来なくなるので一旦このプラグインを停止させています。

最後に

他の方のブログを拝見すると、LazyLoadを利用して表示速度を改善された方が大勢いらっしゃいます。

私が当該設定を実施後に改めてこの記事を更新したいと思います。

スポンサーリンク