「オフスクリーン画像の遅延読み込み」とは？プラグインやライブラリによる対処法

PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」と提案された場合、何を示しているのか、具体的な対策を紹介します。

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

オフスクリーン画像の遅延読み込みとは、ページ内の画像を一気に読み込まず、ブラウザに表示されている画像だけ先に読み込む技術です。
これによってページの表示スピードが上がります。

オフスクリーン画像の遅延読み込みは、PageSpeed Insightsで提案された場合のみ実施すると良いでしょう。
むやみに全ページに取り入れると、かえって高速化を妨げるおそれがあります。

オフスクリーン画像の遅延読み込みの重要性

オフスクリーン画像の遅延読み込みは、表示スピード改善のための施策の1つです。
表示速度が遅いと「直帰率が上がる」「SEO順位が下がる」などのリスクがあるため、PageSpeed Insightsのスコアが低いページは早めに改善することをおすすめします。

「Page Speed Insightsを活用しきれているか不安」という方は、こちらのページもご覧ください。

Google Page Speed Insightsの使い方を解説！ページの表示スピードを上げよう

【WordPress】プラグインを使用した改善方法

ここからは、オフスクリーン画像の遅延読み込みの方法を紹介します。まずは、WordPressのプラグインを使った方法です。

オフスクリーン画像の遅延読み込みの設定ができるプラグインは、複数あります。
複数のプラグインでオフスクリーン画像の遅延読み込みの設定をすると、不具合が起こり得るため、設定が重複しないよう注意しましょう。

EWWW Image Optimizer

「EWWW Image Optimizer」は、アップロードされた画像を自動で圧縮するプラグイン。
オフスクリーン画像の遅延読み込みの設定もでき、画像の最適化に有効です。

設定方法は次の通りです。

1.インストール

WordPressのプラグイン追加画面からEWWW Image Optimizerをインストールし、有効化します。

2.遅延読み込みをチェック

「EWWW Image Optimizer」の設定画面で、「基本」タブ内の「遅延読み込み」にチェックを入れます。

Autoptimize

「Autoptimize」でも、オフスクリーン画像の遅延読み込みが設定できます。

ソースコードを最適化してサイズを軽減させるプラグインとして紹介されることが多く、導入することでPage Speed Insightsの「レンダリングを妨げるリソースの除外」の施策にもつながります。
設定方法は次の通りです。

1.インストール

WordPressのプラグイン追加画面からAutoptimizeをインストールし、有効化します。

2.Lazy-load imagesをチェック

「Autoptimize」の設定画面で、「image」タブ内の「Lazy-load images」にチェックを入れます。

【WordPress以外】jQueryライブラリの読み込み

WordPress以外のサイトでは、jQueryライブラリにある「lazyload.js」を実装することでオフスクリーン画像の遅延読み込みが設定できます。

設定方法は次の通りです。

1.imgタグの変更

対象画像のimgをdata-original属性に設定し、class属性を追加します。

<img data-original="sample.jpg" class="lazy">

2.ライブラリの読み込み

lazyloadを呼び出す下記のコードを追加します。

<!-- jQueryライブラリ読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<!-- lazyloadライブラリ読み込み -->
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js">
<!--Lazy Load起動 -->
<script>
$(function() {
     $("img.lazy").lazyload();
});
</script>

【WordPress以外】Intersection Observerの実装

上記のjQueryライブラリは簡単に実装できるものの、画像がインデックスされないというデメリットもあります。

そこでGoogleが推奨しているのが、JavaScriptの機能の1つであるIntersection Observerです。
設定方法は次の通りです。

1.ダミー画像を用意

オフスクリーン時に読み込ませるための、軽量なダミー画像を用意します。

2. imgタグの変更

imgのsrc属性にダミー画像を指定し、data-src属性に遅延読み込みさせる画像を指定します。
表示ズレを防ぐために、画像サイズの指定も必ず行いましょう。

<img src="picture/dummy.jpg" data-src="sample.jpg" class="imgdelay" width="" height="" alt="">

3. Javascriptの追加

下記のスクリプトを記述します。

<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.imgdelay"));

if ("IntersectionObserver" in window) {
     let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
          entries.forEach(function(entry) {
               if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    if (typeof lazyImage.dataset.srcset === "undefined") {
                    }else{
                         lazyImage.srcset = lazyImage.dataset.srcset;
                    }
                    lazyImage.classList.remove("imgdelay");
                    lazyImageObserver.unobserve(lazyImage);
               }
          });
     });
     lazyImages.forEach(function(lazyImage) {
     lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to a more compatible method here
}
});
</script>

4. polyfillライブラリの読み込み

古いブラウザでもオフスクリーン画像の遅延読み込みが機能するよう、polyfillというライブラリを読み込ませます。

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

まとめ

本記事では、PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」と提案された場合の対処法を紹介しました。

表示スピード改善のためには、PageSpeed Insightsで提案された施策を地道に実施していくことが大切です。

なかなか効果を感じられなければ、「デジタルアイデンティティ」へご相談ください。

>>表示速度改善のサービスページはこちら

数時間の作業を一瞬で！PageSpeed Insights最大100ページを一括診断！

PageSpeed Insightsを手動でチェックすると、3〜5分程度かかってしまいます。
一定規模、以上のWebサイトで全ページをチェックしようとすると、数時間以上のリソースが必要になります。

デジタルアイデンティティでは、「トップページ以外の速度状況がわからない」「ページ数が多くて管理しきれない」という企業様向けに、PageSpeed Insightsで最大100ページをまとめて計測する「サイトスピード一括診断ツール」を提供しています。

WebサイトのURLを入力するだけで、モバイル・PC両方のスコアやCore Web Vitals指標を全自動で取得。単なるスコアだけでなく、「どのページから直すべきか」がわかる修正優先度リストや、SEOリスクの可視化レポート（PDF・Excel）を無料で納品します。

こんなお悩み、ありませんか？

• 1ページずつPSIで計測するのが面倒で放置している…
• トップページは早いが、記事や商品ページの速度が不安…
• どのページが足を引っ張っているのか特定できない…
• 社内報告用にサイト全体のパフォーマンスを数値化したい…
• 改善インパクトの大きいページから効率よく対策したい…

「点」ではなく「面」でサイトの課題を把握し、ユーザー体験とSEO評価を底上げしましょう。
サービスリリース記念で今だけ無料で診断いたします！

【今だけ無料】一括診断に申し込む