オフスクリーン画像の遅延読み込みとは？機能や改善方法を詳しく解説

サイト表示スピードの改善を行うためにPageSpeed Insightsを使用していると、「オフスクリーン画像の遅延読み込み」という項目が表示されることがあります。

オフスクリーン画像の遅延読み込みを行うと、Webページの表示速度を上げることができ、UXの向上につながるため、SEOにも好影響を与えます。

本記事では、オフスクリーン画像の遅延読み込みの機能や改善方法を解説します。

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

PageSpeed Insightsで表示される「オフスクリーン画像の遅延読み込み」とは、簡単に説明すると、開いているWebページの中で、表示されている画面内の画像だけを先に読み込むことです。

何も対策しない状態では、Webページに貼りつけられている画像の全てが一気に読み込まれることになりますが、画像が多かったり画像サイズが大きかったりすると、Webページの表示に時間がかかる原因になり、ユーザーの離脱につながってしまいます。

オフスクリーン画像の遅延読み込みを行うと、ユーザーのスクロールに合わせて、見えている画面上の画像だけを読み込んでいくので、Webページの表示速度を上げることができます。
結果、ユーザーが快適にWebページを見ることができるようになり、UXが向上し、SEOにも好影響を与えます。

オフスクリーン画像の遅延読み込みを改善する方法

PageSpeed Insightsでの「オフスクリーン画像の遅延読み込み」を改善するには、いくつか方法があります。

WordPressを使用したWebサイトの場合は、プラグインをインストール後、有効化することで比較的簡単にオフスクリーン画像の遅延読み込みの改善ができます。

WordPressを使っていないWebサイトではjQueryライブラリを使用する方法や、jQueryを使わず別のライブラリを使用する方法、ライブラリを利用せずJavaScriptのIntersection Observerを使う方法などがあります。ページの読み込みスピードをより向上させたい方向けにはjQueryに頼らない方法がおすすめです。

それぞれの方法を実際の設定方法と合わせて解説します。

プラグインを使用する【WordPressの場合】

WordPressで使用できるプラグインは複数あります。オフスクリーン画像の遅延読み込みを行いたい画像の種類や、設定の難易度に合ったものを選びましょう。

Gravatarや動画など細かく遅延読み込みを設定したい場合はa3 Lazy Loadが向いています。Gravatarとは、WordPressのプロフィール登録機能で、こちらでは吹き出しやプロフィール欄で使用されている画像を指します。

早急に改善したい場合は、プラグインをインストールし有効化するだけで、オフスクリーン画像の遅延読み込みが最適化されるLazy Loadを選ぶと良いでしょう。

Webページで使用する画像の圧縮と、オフスクリーン画像遅延読み込みの両方を改善したい方に最適なプラグインはEWWW Image Optimizerです。

注意が必要な点は、Lazy LoadではGravatarのオフスクリーン画像遅延読み込みは改善されないことです。また、EWWW Image Optimizerでは、Webサイトの内部リンクなどで使用するブログカードが表示されないことにも注意しましょう。

設定方法は簡単です。それぞれのプラグインをインストール後、プラグインの有効化を行い、インストールしたプラグインの設定画面より設定を行います。

jQueryライブラリ（jquery.lazyload.js）を使用する

WordPressを使用していないWebサイトで、なるべく簡単にオフスクリーン画像遅延読み込みの改善を行いたい場合は、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” />

これで設定は完了です。
URL）https://gatch.site/offscreen-lazyload/よりコードを引用

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

上記でご紹介したjquery.lazyload.jsは、jqueryを追加しなければ使用することができません。結果、何度も関数を呼び出す必要があるため、画像の表示速度が遅くなりメモリを消費してしまいます。

より軽快にオフスクリーン画像の遅延読み込みを行いたい場合は、lazysizes.js、lozad.js、echo.jsなどのjQueryに依存しないライブラリを使用します。

それぞれのライブラリの違いとして、lazysizes.jsはGitHubで一番人気のライブラリで、拡張機能が豊富です。画像以外にもiframeやウィジェットなどの遅延読み込みに対応しています。
lozad.jsはシンプルなライブラリで、記述が少なく慣れていない方でも実装しやすいライブラリです。
echo.jsはファイル自体が軽量でより表示速度を早くしたいサイト向けのライブラリです。

ライブラリを利用せずIntersection Observerを使って実装する

Intersection ObserverとはJavaScriptの機能のひとつです。

Intersection Observerを使って遅延読み込みを実装する方法は、jQueryやライブラリを使用せず、より細かくオフスクリーン画像の遅延読み込み設定を行いたい、不要な機能を省きWebサイトを軽量化したい方に向いています。

例えばオフスクリーン画像の遅延読み込みの他に、アニメーションやYoutubeの自動再生、コンテンツの追加読み込みなどの設定を行うことができます。注意したい点は、対応ブラウザが限られているということです。IEなどが非対応で対応させるにはpolyfillという機能の拡張が必要です。

Intersection Observerを使った手順を簡単に解説すると、軽量な画像を用意しWebサイトのimgタグにlazyクラスを加え、本来の画像を表示させるためのscriptを追加します。

Webページを開いた段階で軽量な画像を先に読み込ませ、画面表示の段階で本来の見せたい画像を表示させることで、Webページの表示を高速化させる、という流れになっています。

まとめ

PageSpeed Insightsでオフスクリーン画像の遅延読み込みとはどういうことなのか、またオフスクリーン画像の遅延読み込みの改善方法を、WordPressサイトの場合とWordPress以外のサイトの場合に分けて解説しました。

Webページを開き、ページの読み込みが速く画像がサクサクと表示されることで、ユーザーも気持ちよくコンテンツを読み進めることできます。読者が快適にWebサイトを閲覧できるよう、WebサイトのSEOに役立てていただければ幸いです。

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。