遅延読み込み

遅延読み込みは、画像、動画、コンテンツのセクションがビューポートに表示される直前まで、読み込みを延期する手法です。ページを最初に開くときの表示性能を改善できます。

遅延読み込みの仕組み

遅延読み込みがなければ、ブラウザはHTMLを解析するとすぐに、ページ内のすべての画像、動画、リソースをダウンロードします。ファーストビューから大きく下にあり、利用者が一度も見ない可能性のあるものも対象です。数十枚の画像を持つ長いページでは、通信量を無駄にし、操作できるようになるまでの時間を延ばします。

遅延読み込みでは、要素がビューポートへ近づくまでリソースの取得を待ちます。主に2つの実装があります。

ブラウザ標準の遅延読み込みでは、<img>と<iframe>要素へloading="lazy"属性を付けます。ブラウザが表示領域への距離を判断し、要素が近づいた時点で取得を始めます。JavaScriptは必要ありません。

Intersection Observer APIでは、プログラムから細かく制御できます。JavaScriptのオブザーバーが対象要素を監視し、ビューポートへ入るか近づくとコールバックを実行します。コールバックで実際のsrc属性を設定し、プレースホルダーやデータ属性から置き換えてダウンロードを始めます。読み込みを始める距離、アニメーションの開始などを用途に合わせて設定できます。

どちらも目的は同じです。ファーストビューの内容だけをすぐに取得し、残りは利用者のスクロールに合わせて読み込みます。最初の表示を速くし、不要な通信を減らします。

遅延読み込みとスクリーンショット

遅延読み込みは、スクリーンショット撮影で特有の問題を生みます。フルページスクリーンショットを要求されたツールは、通常、ビューポートをページ上端に置き、書類の高さ全体を1回で描画します。ファーストビューより下の遅延要素はまだ読み込まれていないため、空の枠、プレースホルダー、低解像度のサムネイルとして写ります。

撮影前にプログラムからページをスクロールすると解決できます。ヘッドレスブラウザのスクリプトで上端から下端まで一定の幅で移動し、各位置でIntersection Observerのコールバックと画像の読み込みを待ちます。下端へ着いたあと上端へ戻り、すべて読み込まれたページを撮影します。

一部のスクリーンショットツールは、この処理を自動で行います。遅延要素を検出し、撮影工程の一部としてページ全体をスクロールするため、手作業なしで欠けのないフルページ画像を作れます。

遅延読み込みを検出する方法

ページが遅延読み込みを使っているか分かれば、撮影方法を決められます。次の点を確認します。

• loading="lazy"属性： <img>や<iframe>タグにある、ブラウザ標準の実装です
• data-srcまたはdata-lazy属性： 実際の画像URLをデータ属性へ置き、要素がビューポートへ入ったときにJavaScriptでsrcへ移す一般的な方法です
• プレースホルダー画像： スクロール時に完全な画像へ置き換わる、小さい画像、ぼかした画像、単色画像です
• Intersection Observerの利用： ページのJavaScriptで、画像やコンテンツ要素を監視するIntersectionObserverを探します
• フレームワーク固有のコンポーネント： Reactのlazy()、Next.jsのImageコンポーネントなど、フレームワークの機能が読み込みを遅らせる場合があります。実際の設定と出力HTMLを確認してください

よくある失敗

• 撮影前にスクロールしない： 遅延読み込みを使うページで最も多い問題です。先にページ全体を移動しなければ、ファーストビューより下の画像が出力から欠けます
• 読み込み開始のしきい値が遅すぎる： 要素が画面へ入ってから読み込みを始めると、画像が出るまで空白が一瞬見えます。表示領域へ入る少し前から取得を始めるよう設定します
• ファーストビューの内容を遅延読み込みする： 最初から見える画像や内容を遅延させると、利用者が最初に見る部分の表示が遅れ、Largest Contentful Paintも悪化します。ファーストビューより下のリソースだけを延期します
• JavaScriptを使えない環境への代替を用意しない： JavaScriptだけに依存すると、無効にした利用者やクローラーには画像が表示されません。<noscript>の代替か、標準のloading="lazy"を基本として使います