導入

より高速で効率的な Web エクスペリエンスを追求する中で、開発者はパフォーマンスを最適化する新しい方法を絶えず模索しています。 Web 開発者の強力なツールの 1 つは、Intersection Observer API です。この API を使用すると、ターゲット要素の可視性の変化を観察できるため、遅延読み込みや遅延コンテンツ読み込みなどの高度な戦略が可能になります。このブログでは、Intersection Observer API を使用して Web サイトのパフォーマンスを向上させる方法を検討します。

交差点オブザーバーとは何ですか?

Intersection Observer API は、ターゲット要素と祖先要素またはトップレベル ドキュメントのビューポートとの交差部分の変更を非同期に観察する方法を提供します。これは、ユーザーがページを下にスクロールするときに画像やその他のコンテンツを遅延読み込みする場合に特に便利です。

パフォーマンス向上のための主な使用例

1. 画像と iframe の遅延読み込み: ビューポートに入る直前にのみ画像と iframe を読み込み、初期読み込み時間を短縮します。
2. オフスクリーン コンテンツの遅延読み込み: 広告、ビデオ、重いスクリプトなどのコンテンツの読み込みを、表示されるまで延期します。
3. 無限スクロール: ユーザーがページを下にスクロールすると、さらにコンテンツが読み込まれます。
4. 分析追跡: ユーザー エンゲージメント分析のために要素が表示された時点を追跡します。

基本的な使い方

Intersection Observer API の基本的な実装を見てみましょう。

1. 交差点オブザーバーを作成

まず、IntersectionObserver のインスタンスを作成します:

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Perform actions when the element is visible
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // Stop observing after loading
    }
  });
}, {
  root: null, // relative to document viewport
  rootMargin: '0px', // margin around root
  threshold: 0.1 // visible amount of item shown in relation to root
});

1. 観測対象元素

観察したい要素を選択して観察を開始します:

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

1. 遅延読み込みのための HTML 構造

データ属性を使用して HTML 構造が遅延読み込みをサポートしていることを確認します:

高度な構成

さらに制御するには、ルート マージンとしきい値のオプションを調整できます:

1. Root Margin: ビューポートに入る前にコンテンツをわずかにプリロードします。

rootMargin: '100px' // preload 100px before entering viewport

1. Threshold: コールバックをトリガーする前に要素をどの程度表示するかを決定します。

threshold: [0.25, 0.5, 0.75, 1] // trigger at 25%, 50%, 75%, and 100% visibility

実践例: 画像の遅延読み込み

画像を遅延読み込みする完全な例は次のとおりです:

1. JavaScript コード

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = document.querySelectorAll("img.lazy");

  let imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(image => {
    imageObserver.observe(image);
  });
});

1. HTML 構造

利点

1. 初期読み込み時間の短縮: ビューポート内またはビューポート付近にある画像とコンテンツのみを読み込むことで、初期読み込み時間が短縮されます。
2. スクロール パフォーマンスの向上: オフスクリーン コンテンツの読み込みを遅らせると、スクロールがスムーズになります。
3. ユーザー エクスペリエンスの向上: ユーザーは、表示しようとしているコンテンツのみをダウンロードするため、エクスペリエンスの応答性が向上します。

結論

Intersection Observer API を実装すると、Web サイトのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。画像の遅延読み込み、重いスクリプトの読み込みの遅延、または無限スクロールの実装のいずれを行う場合でも、この API はコンテンツの可視性を管理するための堅牢かつ効率的な方法を提供します。今すぐ Intersection Observer を使い始めて、Web サイトのパフォーマンスの違いを確認してください!