オフスクリーン画像の遅延読み込みとは?機能や改善方法を詳しく解説
サイト表示スピードの改善を行うために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年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。
おすすめの関連記事
─ 記事カテゴリから探す ─
WEBサイトの問題点・改善案を無料診断
人気記事ランキング
-
2024.05.30
キーワードマーケティングのやり方とは?SEOの効果が見込める手順を徹底解説
-
2024.05.27
SEOにおけるURL設計のベストプラクティス
-
2024.04.25
ページネーションのSEOにおけるベストプラクティス
-
2024.04.22
E-E-A-Tとは?Googleが評価するコンテンツの基準や対策を解説
-
2021.12.06
レスポンシブデザインの最適ブレイクポイントとは?メディアクエリの書き方も解説
-
2021.07.09
Webコンテンツにおける正しい引用の書き方をマスターしよう!
-
2021.12.22
【徹底比較】さくらのクラウドとAWSの特徴・機能・料金の違いを解説
-
2022.02.21
「note」のユーザー数や年齢層を徹底分析!【2022年版】
-
2022.03.10
Googleインデックスの登録・確認方法を解説!サーチコンソールを使ってクロールリクエストしよう