「オフスクリーン画像の遅延読み込み」とは？対策方法を紹介

Webサイトの表示速度に悩んでいませんか？PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」という項目が表示されたけれど、具体的にどう対策すればいいのかわからない…そんな方も多いのではないでしょうか。

実は、オフスクリーン画像の遅延読み込みは、サイトの表示速度を劇的に改善できる、非常に効果的な施策なんです。しかも、正しく実装すれば、ユーザー体験の向上とSEO評価の改善を同時に実現できます。

本記事では、オフスクリーン画像の遅延読み込みについて、基本的な仕組みから具体的な実装方法まで、初心者の方でも理解しやすいよう詳しく解説していきます。

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

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

オフスクリーン画像の遅延読み込み（Lazy Loading）とは、ページ内の画像を一度に全て読み込むのではなく、ユーザーが実際に見ている画面に表示される画像だけを先に読み込む技術です。

もっと具体的に説明すると、Webページを開いた時に、画面に表示されている「ファーストビュー」の画像だけを先に読み込み、スクロールして画面外にある画像が見えるようになった時点で、その画像を読み込む仕組みです。

オフスクリーン画像とは

「オフスクリーン画像」という言葉を分解してみると、より理解しやすくなります。

オフスクリーン：画面外、スクリーンに表示されていない状態
画像：Webページ内の画像ファイル

つまり、オフスクリーン画像とは、ユーザーが現在見ている画面外に配置されている画像のことです。

例えば、スマートフォンでWebページを開いた時、画面に表示されている画像以外にも、上下にスクロールすることで見える画像がありますよね。これらの画像がオフスクリーン画像になります。

PageSpeed Insightsとの関係

この「オフスクリーン画像の遅延読み込み」は、PageSpeed InsightsというGoogleが提供する無料のサイト分析ツールで表示される改善項目の一つです。

PageSpeed Insightsは、Webサイトのパフォーマンスを100点満点で評価し、表示速度を改善するための具体的な提案を行ってくれます。その中で、「オフスクリーン画像の遅延読み込み」が提案された場合、それはサイトの表示速度改善に大きな効果が期待できるということなんです。

遅延読み込みの仕組み

通常の画像読み込みでは、ページが開かれると同時にページ内の全ての画像が一気に読み込まれます。画像が多いページや、画像ファイルサイズが大きいページでは、この一気読み込みがページ表示速度を大幅に遅くしてしまいます。

一方、遅延読み込みでは以下のような流れで画像が読み込まれます：

ページ開封時：ファーストビューの画像のみ読み込み
スクロール時：画面に表示される直前に該当する画像を読み込み
必要に応じて：ユーザーがスクロールするタイミングで順次読み込み

この仕組みにより、初回のページ読み込み時間を大幅に短縮できるのです。

実際の効果とメリット

オフスクリーン画像の遅延読み込みを適切に実装することで、以下のようなメリットが得られます：

表示速度の改善

初回ページ読み込み時間の短縮
ユーザーが実際に見る画像の表示速度向上

ユーザー体験の向上

ページの応答性向上
直帰率の減少
ユーザー満足度の向上

SEO効果

Core Web Vitals指標の改善
検索エンジンからの評価向上
検索順位の向上

リソース効率

データ通信量の削減
サーバー負荷の軽減
不要な画像読み込みの回避

ただし、実装には注意点もあります。例えば、必要以上に遅延読み込みを適用すると、逆に表示速度が遅くなってしまうケースもあるんです。そのため、PageSpeed Insightsで実際に提案された場合にのみ実装することが重要です。

オフスクリーン画像の遅延読み込みの対策

実装前の準備と確認事項

オフスクリーン画像の遅延読み込みを実装する前に、いくつか確認しておくべき点があります。

現状の分析 まず、PageSpeed Insightsでサイトの現在の状況を確認しましょう。本当に「オフスクリーン画像の遅延読み込み」が改善項目として表示されているか、またどの程度の改善効果が期待できるかを把握することが重要です。

対象画像の特定 ページ内のどの画像がオフスクリーン画像に該当するかを確認します。通常、ファーストビューより下にある画像が対象になります。

技術的な環境の確認 使用しているCMSやサーバー環境、既存のプラグインやライブラリとの競合がないかを確認します。

WordPress環境での実装方法

WordPressサイトの場合、プラグインを使用することで比較的簡単に遅延読み込みを実装できます。

推奨プラグイン1：EWWW Image Optimizer

EWWW Image Optimizerは、画像の圧縮と遅延読み込みを同時に行える優秀なプラグインです。

設定手順：

WordPressの管理画面から「プラグイン」→「新規追加」
「EWWW Image Optimizer」で検索してインストール
プラグインを有効化
設定画面で「基本」タブを開く
「遅延読み込み」にチェックを入れる
設定を保存

このプラグインのメリットは、画像最適化と遅延読み込みを一度に行えることです。画像ファイルサイズも同時に削減できるため、より効果的な表示速度改善が期待できます。

推奨プラグイン2：Autoptimize

Autoptimizeは、コードの最適化がメインのプラグインですが、画像の遅延読み込み機能も搭載されています。

設定手順：

プラグインをインストール・有効化
設定画面で「Images」タブを開く
「Lazy-load images」にチェックを入れる
設定を保存

Autoptimizeの特徴は、CSS・JavaScriptの最適化も同時に行えることです。「レンダリングを妨げるリソースの除外」といった他のPageSpeed Insights指摘事項も一緒に改善できます。

専用プラグイン：a3 Lazy Load

より細かい設定が必要な場合は、a3 Lazy Loadがおすすめです。

このプラグインでは以下の設定が可能です：

画像の遅延読み込み
動画の遅延読み込み
Gravatarの遅延読み込み
iframeの遅延読み込み

特に、動画コンテンツが多いサイトや、コメント機能でGravatarを使用しているサイトには最適です。

WordPress以外の環境での実装方法

1. loading属性を使用した簡単実装

最も簡単な方法は、HTML5のloading属性を使用することです。

Copy<!-- 従来の書き方 -->
<img src="sample.jpg" alt="サンプル画像">

<!-- 遅延読み込み対応 -->
<img src="sample.jpg" alt="サンプル画像" loading="lazy">

この方法のメリットは、極めて簡単だということです。既存のimgタグにloading="lazy"を追加するだけで、対応ブラウザでは自動的に遅延読み込みが実装されます。

対応ブラウザ：

Chrome 76以降
Firefox 75以降
Safari 15.4以降
Edge 79以降

ただし、Internet ExplorerやSafariの古いバージョンでは対応していないため、より確実な方法が必要な場合は別の実装方法を検討しましょう。

2. jQueryライブラリを使用した実装

jquery.lazyload.jsを使用した実装方法をご紹介します。

必要ファイルのダウンロード： LazyLoad GitHubからファイルをダウンロードします。

HTML側の設定：

Copy<!-- 従来の書き方 -->
<img src="sample.jpg" alt="サンプル画像">

<!-- 遅延読み込み対応 -->
<img data-src="sample.jpg" alt="サンプル画像" class="lazyload">

JavaScript側の設定：

Copy<!-- jQueryライブラリ読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- lazyloadライブラリ読み込み -->
<script src="path/to/lazyload.min.js"></script>

<!-- Lazy Load起動 -->
<script>
$(document).ready(function() {
    $('img.lazyload').lazyload({
        threshold: 200, // 画像が表示される200px手前から読み込み開始
        effect: "fadeIn" // 表示エフェクト
    });
});
</script>

この方法では、画像のsrc属性をdata-srcに変更し、lazyloadクラスを追加します。JavaScriptが動作することで、画像が画面に表示されるタイミングでdata-srcの値がsrcにコピーされ、画像が読み込まれます。

3. Intersection Observer APIを使用した高度な実装

Intersection Observer APIは、JavaScriptのネイティブ機能を使用した最も効率的な実装方法です。

HTML側の設定：

Copy<img data-src="sample.jpg" alt="サンプル画像" class="lazy-image">

JavaScript側の設定：

Copy// Intersection Observer APIに対応しているかチェック
if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const image = entry.target;
                image.src = image.dataset.src;
                image.classList.remove('lazy-image');
                imageObserver.unobserve(image);
            }
        });
    });

    // 遅延読み込み対象の画像を監視
    const lazyImages = document.querySelectorAll('.lazy-image');
    lazyImages.forEach(image => {
        imageObserver.observe(image);
    });
}

この方法のメリットは、jQueryに依存しないことと、高い性能を実現できることです。ただし、古いブラウザでは対応していないため、Polyfillの使用が推奨されます。

Polyfillの追加：

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

高度な実装テクニック

1. プレースホルダー画像の使用

画像の読み込み中に表示する軽量なプレースホルダー画像を使用することで、レイアウトの崩れを防げます。

Copy<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiBmaWxsPSIjYWFhIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Mb2FkaW5nLi4uPC90ZXh0Pjwvc3ZnPg==" 
     data-src="actual-image.jpg" 
     alt="実際の画像"
     class="lazy-image"
     width="320" 
     height="200">

2. 読み込み範囲の調整

画像が画面に表示される少し前から読み込みを開始することで、ユーザーが画像を見る時には既に読み込みが完了している状態を作れます。

Copyconst imageObserver = new IntersectionObserver((entries, observer) => {
    // 処理内容
}, {
    // 画像が画面に表示される200px手前から読み込み開始
    rootMargin: '200px'
});

3. 読み込み失敗時の処理

画像の読み込みに失敗した場合のエラーハンドリングも重要です。

Copyconst loadImage = (image) => {
    const imageLoader = new Image();
    imageLoader.onload = () => {
        image.src = image.dataset.src;
        image.classList.add('loaded');
    };
    imageLoader.onerror = () => {
        image.src = 'path/to/fallback-image.jpg';
        image.classList.add('error');
    };
    imageLoader.src = image.dataset.src;
};

パフォーマンス改善のベストプラクティス

1. 適切な画像サイズの設定

遅延読み込みと併せて、適切な画像サイズの設定も重要です。

Copy<img data-src="image.jpg" 
     alt="画像の説明"
     width="800" 
     height="600"
     class="lazy-image">

widthとheight属性を設定することで、画像読み込み前でもレイアウトが確定し、Cumulative Layout Shift（CLS）の改善にも効果があります。

2. 次世代画像フォーマットの併用

WebPやAVIF形式の画像を使用することで、さらなる表示速度改善が期待できます。

Copy<picture>
    <source data-srcset="image.avif" type="image/avif">
    <source data-srcset="image.webp" type="image/webp">
    <img data-src="image.jpg" alt="画像の説明" class="lazy-image">
</picture>

3. 重要な画像の例外設定

ファーストビューの画像など、即座に表示すべき画像には遅延読み込みを適用しないことが重要です。

Copy<!-- ファーストビューの画像：遅延読み込みなし -->
<img src="hero-image.jpg" alt="メイン画像">

<!-- スクロール先の画像：遅延読み込みあり -->
<img data-src="content-image.jpg" alt="コンテンツ画像" class="lazy-image">

注意点とトラブルシューティング

1. SEOへの影響

画像の遅延読み込みは、SEOに与える影響も考慮する必要があります。

注意点：

重要な画像は遅延読み込みを適用しない
alt属性は必ず設定する
構造化データで画像情報を提供する

2. アクセシビリティの配慮

視覚障害者向けのスクリーンリーダーでも適切に動作するよう配慮が必要です。

Copy<img data-src="image.jpg" 
     alt="詳細な画像の説明"
     aria-label="画像読み込み中"
     class="lazy-image">

3. 複数プラグインの競合

WordPressで複数の最適化プラグインを使用している場合、機能が重複して問題が発生する可能性があります。

対策：

プラグインの機能を確認し、重複を避ける
テスト環境で動作確認を行う
必要に応じて機能を無効化する

4. 古いブラウザでの対応

Internet ExplorerやSafariの古いバージョンでは、一部の機能が動作しない可能性があります。