ページスピードインサイトの「オフスクリーン画像の遅延読み込み」の解決方法

ページスピードインサイトの改善できる項目に表示される「オフスクリーン画像の遅延読み込み」。具体的にどうすれば、改善できるか分からないとお悩みの方も多いでしょう。ここでは、「オフスクリーン画像の遅延読み込み」の具体的な改善方法をご紹介いたします。

「オフスクリーン画像の遅延読み込み」とは

ページスピードインサイトに表示される「オフスクリーン画像の遅延読み込み」とは、ファーストビューに表示されない画面外の画像（オフスクリーン画像）の読み込みを遅らせることを意味します。
言い換えると、ファーストビューに表示される画像は通常通り読み込ませて、画面外の画像はユーザーがスクロールする際に読み込み、表示させます。
オフスクリーン画像の遅延読み込みの処理を行えば、最初にサイトを読み込む時のファイル容量が減少するため、サイト表示速度を高速化することができます。

「オフスクリーン画像の遅延読み込み」の改善方法

オフスクリーン画像の遅延読み込みの解決方法は様々ですが、主に「プラグインを使用する方法」「jQueryライブラリを使用する方法」「jQueryに依存しないライブラリを使用する方法」などあります。

プラグインを使用する方法【WordPressで構築されたサイトのみ】

WordPressで構築されたサイトのみになりますが、WordPressのプラグインの中から遅延読み込みを行うプラグインをインストールすることで改善することができます。
代表的なプラグインは以下の通りです。

・Gravatarや動画など細かく遅延読み込みを設定したい場合は、「a3 Lazy Load」
・早急にオフスクリーン画像の遅延読み込みを行いたい人は「Lazy Load」
・画像の圧縮も同時に行いたい場合は「EWWW Image Optimizer」

Webサイトに動画を掲載していない場合は、「Lazy Load」「EWWW Image Optimizer」のどちらかを選ぶと良いでしょう。
ただし、プラグインをインストールする際はphpのバージョンを確認してからにしましょう。数年以上前にWordPressでサイトを作った場合、phpのバージョンが古いということが大いにあります。phpが古いままプラグインをインストールするとサイトが表示されなくなることがありますので、プラグインの導入は慎重に進めましょう。

jQueryライブラリを使用する方法

WordPressを使用していないWebサイト、ECサイトはjQueryライブラリを使用してオフスクリーン画像の遅延読み込みを行うことがあります。手順としては以下の通りです。

①はじめにjquery.lazyload.jsをダウンロードします。
https://github.com/tuupola/lazyload

②次にjQuery とlazyloadを読み込むために、bodyの終了タグ直前に下記のscriptタグを配置します。
$(function () {
$(‘img.lazyload’).lazyload()
})

③scriptタグの配置をしたら、imgタグを下記のように書き換えます。
< img class=”lazyload” data-src=”img/○○.jpg” />

やってみれば簡単なことなのですが、非技術者が実施する場合は余計なタグを消してしまい、元の状態に戻せなくなるなんてことも起こりえます。時間もかかるため、技術者に依頼して、対応してもらうのが一番ベストだと思います。

jQueryライブラリを使用する方法の注意点としては、ページ内の画像点数が多すぎると、ライブラリの読み込み、関数を何度も呼び起さなければならないため、結局表示速度が遅くなってしまう可能性があります。
※気にすることはほとんどないですが、頭の片隅にとどめておきましょう。

jQueryに依存しないライブラリを使用する方法

「jQueryに依存しないライブラリを使用する方法」というのは要するに、jQueryよりも軽快に動く、lazysizes.js、lozad.js、echo.jsなどを使う方法です。

■lazysizes.js
拡張機能が豊富。画像以外にもiframeやウィジェットなどの遅延読み込みに対応。

■lozad.js
記述が少なくプログラミングに慣れていない方でも実装しやすいライブラリ。

■echo.js
ファイル自体が軽量でより表示速度を早くしたいサイト向けのライブラリ。

「オフスクリーン画像の遅延読み込み」のよくある間違い

「オフスクリーン画像の遅延読み込み」実装時によくある間違いが、ファーストビュー画像も遅延読み込みの設定を行ってしまうです。
これは、プログラミングやコーディングの知識や経験があっても、SEOの知識がない人がよくやってしまう間違いです。
間違わないようにするために、オフスクリーン画像の遅延読み込みはファーストビュー以外の画像を遅延読み込みすると認識しておけば大丈夫です。

まとめ

「オフスクリーン画像の遅延読み込み」は要するに、ファーストビューに表示されていない画面外の画像の読み込みを遅延させるサイト表示速度改善策のひとつです。経験的にですが、「オフスクリーン画像の遅延読み込み」を実施するとスピードインサイトの点数は大幅に改善することが多いです。
実施の難易度も高くはないので、表示速度改善したい方はぜひ実施してみましょう。

株式会社PULL-NET

HP・ECサイト制作及びWeb集客を得意領域とするWeb制作会社。1,000件以上の実績と創業16年間の経験から得たノウハウを基に、多くの企業様をサポートしております。制作及び集客の各工程のプロが社内に在籍している点が強み。