ハイブリッド遅延読み込み：ネイティブ遅延読み込みへの段階的な移行

過去数週間で、ネイティブの遅延読み込みについて聞いたり読んだりしたことがあるかもしれません。これは、今後数か月でChromium75に登場します。

「ええ、素晴らしいニュースですが、すべてのブラウザがそれをサポートするまで待つ必要があります。」

これが最初に頭に浮かんだことである場合は、読み続けてください。 私はあなたに反対のことを納得させようとします。

ネイティブの遅延読み込みと古き良きJavaScript駆動の読み込みの比較から始めましょう。

ネイティブとJavaScriptによる遅延読み込み

遅延読み込みは、折り畳み下のコンテンツの読み込みを延期することで、折り畳み上にある画像やiframe（場合によってはビデオ）のレンダリング速度を最大化することで、WebサイトまたはWebアプリケーションのパフォーマンスを向上させる方法です。

JavaScript駆動の遅延読み込み

画像またはiframeを遅延ロードするには、適切なsrc属性を同様のデータ属性data-srcに置き換えてマークアップし、JavaScriptソリューションを使用して画像/ iframeが取得されていることを検出するのが非常に一般的な方法です。 Webサイトの表示部分の近く（通常はユーザーが下にスクロールしたため）、データ属性を適切な属性にコピーしてから、コンテンツの遅延読み込みをトリガーします。

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

ネイティブ遅延読み込み

ネイティブの遅延読み込み仕様（まだ開発中）によると、ネイティブの遅延読み込み機能を使用して画像またはiframeを遅延読み込みする場合は、関連するタグにloading=lazy属性を追加するだけです。

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmaniは、彼の記事「Native Image Lazy-Loading For the Web！」で、このトピックについて広範囲にわたって書いています。 その中で彼は、Google Chromeチームがすでにこの機能を開発しており、Chrome75で出荷する予定であると述べました。

OperaやMicrosoftEdgeなどの他のChromiumベースのブラウザも、Chromium 75に基づく最初のアップデートで同じ機能を利用できるため、この開発の恩恵を受けることができます。

ネイティブ遅延読み込みを開始する

Webサイトの画像が遅延読み込みなしでページのランディング時に一度にダウンロードされる場合、HTML属性を追加するのと同じくらい簡単に、Webサイトでネイティブの遅延読み込みを有効にできます（サポートされている場合）。 loading属性は、ブラウザに、すぐに読み込むことが重要な画像と、ユーザーが下にスクロールしたときに遅延してダウンロードできる画像を示します。 同じ属性をiframeに適用できます。

特定の画像が重要であることをブラウザに通知して、できるだけ早く画像を読み込むことができるようにするには、 imgタグにloading="eager"属性を追加する必要があります。 ベストプラクティスは、プライマリ画像に対してこれを行うことです。通常は、折り目の上に表示される画像に対して行います。

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

画像を遅延ダウンロードする必要があることをブラウザに通知するには、 loading="lazy"属性を追加するだけです。 これは、セカンダリ画像に対してのみ行う場合にのみベストプラクティスです。通常、画像は折り目の下に表示されます。

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

画像とiframeにloading属性を追加するだけで、ウェブサイトでネイティブの遅延読み込みをプログレッシブエンハンスメントとして使用できるようになります。 最新のブラウザのほとんどでユーザーにサポートが提供されるようになると、Webサイトは徐々にその恩恵を受けるようになります。

これは、Webサイトで現在どのような種類の遅延読み込みも使用していない場合に使用するのに最適なアプローチですが、JavaScript駆動の遅延読み込みソリューションを既に実装している場合は、ネイティブの遅延読み込みに徐々に切り替えながら、それを維持することをお勧めします。

理想的な解決策は、ネイティブの遅延読み込みをすぐに使用し始め、ポリフィルを使用してすべてのブラウザーで機能させることです。 残念ながら、ネイティブの遅延読み込みは、JavaScriptでポリフィルできる機能ではありません。

ポリフィルは使用しない

新しいブラウザテクノロジが単一のブラウザにリリースされると、オープンソースコミュニティは通常JavaScriptポリフィルをリリースして、残りのブラウザに同じテクノロジを提供します。 たとえば、 IntersectionObserverポリフィルは、JavaScript要素とDOM要素を使用してElement.getBoundingClientRect()を調整し、ネイティブAPIの動作を再現します。

ただし、ネイティブの遅延読み込みの場合は異なります。loading loading="lazy"のJavaScriptポリフィルは、ブラウザが画像またはiframeのマークアップでURLを見つけるとすぐに、コンテンツを読み込まないようにする必要があるためです。 JavaScriptは、ページレンダリングのこの初期段階を制御できないため、ネイティブの遅延読み込みをポリフィルすることはできません。

ハイブリッド遅延読み込み

プログレッシブエンハンスメントとしてのみネイティブ遅延読み込みを使用することに満足できない場合、またはJavaScriptベースの遅延読み込みを既に実装していて、最新ではないブラウザーでこの機能を失いたくない場合（ただし、ブラウザーでネイティブ遅延読み込みを有効にしたい場合）それをサポートする）、次に別のソリューションが必要です。 紹介：ハイブリッド遅延読み込み。

ハイブリッド遅延読み込みは、それをサポートするブラウザーでネイティブの遅延読み込みを使用する手法です。それ以外の場合は、JavaScriptを使用して遅延読み込みを処理します。

「「

ハイブリッド遅延読み込みを行うには、実際の属性ではなくdata属性を使用して遅延コンテンツをマークアップし（JavaScript駆動の遅延読み込みなど）、 loading="lazy"属性を追加する必要があります。

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

次に、JavaScriptが必要です。 まず、ネイティブの遅延読み込みがブラウザでサポートされているかどうかを検出する必要があります。 次に、 loading="lazy"属性を持つすべての要素に対して次のいずれかを実行します。

• ネイティブ遅延読み込みがサポートされている場合は、 data-src属性値をsrc属性にコピーします。
• サポートされていない場合は、JavaScriptの遅延読み込みスクリプトまたはプラグインを初期化して、要素がビューポートに入るときにそれを実行します。

これらの操作を自分で実行するために必要なJavaScriptコードを書くことはそれほど難しくありません。 ネイティブの遅延読み込みが次の条件でサポートされているかどうかを検出できます。

 if ('loading' in HTMLImageElement.prototype)

そうである場合は、 data-srcからsrc属性値をコピーするだけです。 そうでない場合は、選択した遅延読み込みスクリプトを初期化します。

これを行うコードのスニペットを次に示します。

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

このライブデモで上記のコードを見つけてテストできます。

それでも、これは非常に基本的なスクリプトであり、追加の属性やタグを使用してレスポンシブ画像（ srcsetやsizes属性、さらにはpictureタグやsourceタグなど）を取得すると、事態が複雑になる可能性があります。

少しサードパーティのヘルプ

過去4年間、私は「 vanilla-lazyload 」という名前のオープンソースの遅延読み込みスクリプトを維持してきました。AddyOsmaniがネイティブの遅延読み込みについて書いた数日後、コミュニティは私のスクリプトが可能かどうかを尋ねてきました。ポリフィルとして機能します。

前に説明したように、ネイティブの遅延読み込み機能のポリフィルを作成することはできませんが、開発者がJavaScriptコードを記述しなくても、ネイティブの遅延読み込みへの移行を簡単に開始できるソリューションを考えました。前に述べました。

vanilla-lazyloadのバージョン12以降では、 use_nativeオプションをtrueに設定するだけで、ハイブリッド遅延読み込みを有効にできます。 スクリプトはわずか2.0kB gzipで圧縮されており、GitHub、npm、およびjsDelivrですでに利用可能です。

• GitHubでvanilla-lazyloadについて知る

デモ

ChromeCanaryまたはMicrosoftEdge Insider（開発チャネル）をダウンロードし、[遅延画像の読み込みを有効にする]と[遅延フレームの読み込みを有効にする]のフラグを有効にすることで、ネイティブの遅延読み込みを今すぐ試すことができます。 これらのフラグを有効にするには、ブラウザのURLフィールドにabout:flagsと入力し、検索ボックスで「lazy」を検索します。

ネイティブ遅延読み込みデモ

開発者ツールでネイティブ遅延読み込みがどのように機能するかを分析するには、次のデモを試してみてください。 これでは、JavaScriptの1行は使用されていません。 はい、それは完全なプレーンネイティブの遅延読み込みです。

• ネイティブの遅延読み込みデモをテストする

予想されること：すべての画像は一度にフェッチされますが、HTTP応答は異なります。 応答コード200の画像は熱心にロードされた画像ですが、応答コード206の画像は、画像に関する初期情報を取得するために部分的にのみフェッチされます。 これらの画像は、下にスクロールすると200応答コードで完全にフェッチされます。

ハイブリッド遅延読み込みのデモ

ハイブリッド遅延読み込みがどのように機能するかを分析するために、次のデモで遊び始めることができます。 ここでは、 [email protected]が使用され、 use_nativeオプションがtrueに設定されています。

• ハイブリッド遅延読み込みのデモをテストする

予想されること：さまざまなブラウザーでデモを試して、その動作を確認してください。 ネイティブの遅延読み込みをサポートするブラウザーでは、動作はネイティブの遅延読み込みのデモと同じになります。 ネイティブの遅延読み込みをサポートしていないブラウザでは、下にスクロールすると画像がダウンロードされます。

vanilla-lazyloadは内部でIntersectionObserverAPIを使用するため、InternetExplorerおよび最近のバージョンのSafariでポリフィルする必要があることに注意してください。 ただし、ポリフィルが提供されていなくても大したことではありません。その場合、 vanilla-lazyloadはすべての画像を一度にダウンロードするだけだからです。

注：詳細については、 vanilla-lazyloadのreadmeファイルの「ポリフィルするかしないか」の章を参照してください。

Webサイトでハイブリッド遅延読み込みを試してください

一部のブラウザではネイティブの遅延読み込みが間もなく開始されるため、ハイブリッド遅延読み込みを使用して今日チャンスを与えてみませんか？ これがあなたがする必要があることです：

HTMLマークアップ

最も単純な画像マークアップは、 srcとaltの2つの属性によって作成されます。

上記の折り畳み画像の場合、 src属性を残し、 loading="eager"属性を追加する必要があります。

 <img src="important.jpg" loading="eager" alt="Important image">

折り畳み下の画像の場合、 src属性をdata属性data-srcに置き換え、 loading="lazy"属性を追加する必要があります。

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

レスポンシブ画像を使用する場合は、 srcset属性とsizes属性で同じことを行います。

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

pictureタグを使用する場合は、 sourceタグでもsrcset 、 sizes 、 srcを変更してください。

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

pictureタグを使用して、画像のWebP形式を選択的に読み込むこともできます。

注： vanilla-lazyloadの使用法について詳しく知りたい場合は、readmeファイルの「GettingStarted」HTMLセクションをお読みください。

JavaScriptコード

まず第一に、あなたはあなたのウェブサイトにvanilla-lazyloadを含める必要があります。

jsDelivrのようなCDNからロードできます。

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

または、npmを使用してインストールできます。

 npm install vanilla-lazyload@12

自動初期化でasyncスクリプトを使用することも可能です。 type="module"を使用してESモジュールとしてロードするか、RequireJSを使用してAMDとしてロードします。 readmeファイルの「GettingStarted」スクリプトセクションで、 vanilla-lazyloadを含めて使用するその他の方法を見つけてください。

次に、Webサイト/ WebアプリケーションのJavaScriptコードに、以下を含めます。

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

注：スクリプトには、 vanilla-lazyloadの動作をカスタマイズするために使用できる他の多くの設定があります。たとえば、要素のロードを開始するスクロール領域の距離を長くしたり、要素がビューポートにとどまっている場合にのみ要素をロードしたりできます。与えられた時間。 readmeファイルのAPIセクションでその他の設定を見つけてください。

asyncスクリプトを使用してすべて一緒に

すべてをまとめ、 asyncスクリプトを使用してパフォーマンスを最大化するには、次のHTMLおよびJavaScriptコードを参照してください。

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

それでおしまい！ これらの非常にシンプルで簡単な手順で、Webサイトでハイブリッド遅延読み込みを有効にできます。

重要なベストプラクティス

• おそらく折り目の下に表示されることがわかっている画像にのみ遅延読み込みを適用します。 パフォーマンスを最大化するために、折り目の上のものを熱心にロードします。 ページ内のすべての画像に遅延読み込みを適用すると、レンダリングのパフォーマンスが低下します。
• CSSを使用して、画像を読み込む前に画像用のスペースを確保します。 そうすれば、残りのコンテンツを以下にプッシュします。 そうしないと、より多くの画像が折り目の上に配置され、すぐにダウンロードされます。 それを行うためにCSSトリックが必要な場合は、 vanilla-lazyloadのreadmeのヒントとトリックのセクションで見つけることができます。

長所と短所

まとめ

ネイティブの遅延読み込みがブラウザーに導入されることに非常に興奮しており、すべてのブラウザーベンダーがそれを実装するのを待ちきれません！

それまでの間、プログレッシブエンハンスメントのためにHTMLマークアップを強化して、サポートされている場合にのみネイティブ遅延読み込みを取得するか、ハイブリッド遅延読み込みを選択して、ネイティブ遅延読み込みとJavaScript駆動の両方の遅延読み込みをネイティブ遅延読み込みが行われる日まで行うことができます。大多数のブラウザでサポートされています。

試してみる！ GitHubでvanilla-lazyloadをスター/視聴することを忘れないでください。コメントセクションであなたの考えを教えてください。

SmashingMagの詳細：

• Now You See Me：延期、遅延読み込み、IntersectionObserverでの行動方法
• ConditionerJSを使用したJavaScriptモジュールの遅延読み込み
• フロントエンドパフォーマンスチェックリスト2019（PDF、Apple Pages、MS Word）
• ウェブサイトのパフォーマンスを改善することが地球を救うのにどのように役立つか