画像読込を遅延させ表示速度をUPさせるプラグイン「Lazy Load」

通常Webページは、画像の読込みが終了してからページが表示されます。これをページを表示してから画像を読み込むようにすることで、表示速度が大幅に短縮することができます。
「Lazy Load」というプラグインは、画面のスクロールに応じて、画像を遅延して読み込んでくれるので、ページ表示速度の大幅な時間短縮が行えます。他のプラグイン「Unveil Lazy Load」や、「JavaScript to Footer」を試してみましたが、「PageSpeed Insights」と、「Gtmetrix」での評価が変わらなかった為、2つのプラグインの更新が、いづれも2年前ということで、「Lazy Load」を利用しています。
[JavaScript to Footer]
CSSは、複数同時におこなわれ、読み込み途中でも他のファイルを読み込ことができますが、JavaScriptは、読み込みが始まると完了するまで、次の読込がおこなわれません。つまり、JavaScriptの読み込みのタイミングによって、ブログの表示時間に大きな影響を及ぼします。そこで、JavaScriptの読み込みをFooterに移動することで、表示速度を向上させるのが、「JavaScript to Footer」というプラグインです。
[Unveil Lazy Load]
WordPressでは、プラグインのLazy LoadやBJ Lazy Loadが有名ですが、作者のまるぽんさんによれば、画像遅延読込を実現するためのjQueryプラグインとして、より軽量なUnveil.jsを採用したとの事で、より表示速度に向上させるとのことでした。が、私の環境では結果が変わりなかった為、プラグインの更新頻度から「Lazy Load」を利用することとしました。
[現在の表示速度改善の為収録プラグイン]

  • WP Fastest Cache
  • EWWWImageOptimizer
  • WP-Optimize
  • LazyLoad
スポンサーリンク
投稿本文(h2)

プラグインのインストール

プラグインの検索

検索バーに「Lazy Load」と入力して検索、「いますぐインストール」をクリックします。
ll-install1
ll-install1

有効化

有効化をクリックします。
ll-install2
ll-install2

プラグインの設定

lazy-load.jsの修正

デフォルトの画像読み込みのタイミングでは、速くスクロールすると画像のチラツキが発生する為、調整を行います。
ll-setting2
ll-setting2

Googlebot対策

Lazy Loadを導入すると、Googlebot上では画面下部の画像を認識できないという記事あり、その対策を見つけましたので、記載しておきます。(googlebotからアクセスがあった時は、Lazy Loadを動かなくさせることで、画像を認識させます。)
ll-setting3
ll-setting3

モバイル対策

モバイルに適用すると、画像が表示されない為、適用除外した。(モバイルには適用しない様に、変更)
ll-setting4
ll-setting4
スポンサーリンク
投稿本文(h2)
投稿本文(h2)

フォローする