iframe埋め込み動画の遅延読み込み：IntersectionObserverの実装

web dev

office work desk computer

この記事では、ページパフォーマンス向上に効果を発揮する、「IntersectionObserver」を使用した動画の遅延読み込みについて詳しく解説します。

「IntersectionObserver」とは何か、その利用方法やSEOへの影響について紹介します。さらに実装方法についても詳しく説明します。

iframeとは
IntersectionObserverとは
Vimeoなどへの汎用
コード
- コードの解説
- 実装
効果の確認
おわりに

iframeとは

iframe（アイフレーム）とは、Inline Frame（インラインフレーム）の略称です。HTMLタグの中に別のファイルを埋め込むことができる要素です。

iframeを使うと、Webページ内の好きな位置にフレーム領域を作り、その中に画像、動画などのコンテンツを読み込んで表示することができます。

src属性で指定したURL（リンク先ページの内容）を読み込んで表示し、幅や高さを決める属性と組み合わせてサイト上の一部として別のWebページも表示できます。

iframeは、主に動画、SNS、マップ、広告などを埋め込むことができます。他所からのコンテンツ設置ということで、Googleはiframeタグを評価しない旨の見解を示しています。ですので、iframeがSEOにおいて直接効果を与えることはあまり期待できませんが、

iframeタグを使うことでユーザビリティが向上すれば、間接的にSEO効果を上げられる可能性はあります。

例えば、料理の方法を解説している記事で、実際に料理をしている動画がYouTubeなどにあれば、テキストリンクで誘導するよりもiframeで動画を記事に埋め込んであげたほうがユーザーにとっては親切です。

iframeとは？HTMLでの使い方や使用例・SEO効果について解説 | WEB集客ラボ byGMO（GMO TECH）

引用元: gmotech.jp

IntersectionObserverとは

もう4年前の記事ですが、アドセンス審査対策のため、「IntersectionObserver（インターセクションオブサーバー）」というAPIをサイトに導入したことがありました。

Googleアドセンスの審査に申請→不承認。その理由と、対策について - hatebcustom

「IntersectionObserver」というのは、簡単に言いますと意図的にページの画像読み込みを遅延させ、ユーザーが画像の場所までスクロールした場合にのみ画像を読み込むことにより、ページスピードを上げる手法です。

その際、参考にさせていただいた記事があり、応用としてYouTube動画にIntersectionObserverを適用するコードをご紹介されていたのを思い出しました。

記事のリンクをたどってみたところ、幸いコードはそのまま掲載されていましたので、こちらを利用させていただき、動画プレイヤーの遅延読み込みを実装してみました。

Vimeoなどへの汎用

iframeであれば、YouTube動画に限らず汎用が効くだろうと推測されたので、Vimeoにもコードを適用し、効果を検証してみます。

コード

紹介されているスクリプトコードはこちらです。

HTML

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

JavaScript

  document.addEventListener("DOMContentLoaded", function() {
    var iframeLazyImages = [].slice.call(document.querySelectorAll("iframe.iframe_lazy"));
 
    if ("IntersectionObserver" in window) {
      let iframeLazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if( entry.intersectionRatio > 0 ) {
            let iframeLazyImage = entry.target;
            iframeLazyImage.src = iframeLazyImage.dataset.src;
            iframeLazyImage.classList.remove("iframe_lazy");
            iframeLazyImageObserver.unobserve(iframeLazyImage);
          }
        },{ root: null, rootMargin: "0px 0px", threshold: [0.0] });
      });
 
      iframeLazyImages.forEach(function(iframeLazyImage) {
        iframeLazyImageObserver.observe(iframeLazyImage);
      });
    } else {
      // Possibly fall back to a more compatible method here
    }
  });

「polyfill.io/~」というスクリプトリンクは、IntersectionObserverが対応していないブラウザ用のスクリプトです。現行のブラウザではほとんど対応しているかと思いますが、念のため。必要に応じて設置してください。

IntersectionObserver | Can I use... Support tables for HTML5, CSS3, etc

Polyfill（ポリフィル）とは、古いブラウザでも新しいWeb技術を使用できるように、既にあるWeb技術を用いて擬似的に実装することです。大抵はウェブ上の JavaScript です。

Polyfill (ポリフィル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

引用元: developer.mozilla.org

コードの解説

以下はこのコードの詳細な解説です：

document.addEventListener("DOMContentLoaded", function() { ... });:
- この行は、ページのコンテンツが完全に読み込まれた後に指定の関数を実行するように指示しています。これにより、スクリプトがドキュメントの構造を変更したり、DOM要素にアクセスしたりする前に、必要なDOMの読み込みを待つことができます。
var iframeLazyImages = [].slice.call(document.querySelectorAll("iframe.iframe_lazy"));:
- この行は、クラス名が "iframe_lazy" のiframe要素をすべて取得し、それらをiframeLazyImagesという配列に格納しています。これにより、遅延読み込みが必要なiframe要素が収集されます。
if ("IntersectionObserver" in window) { ... }:
- この条件文は、ブラウザが「Intersection Observer」をサポートしている場合に実行されるコードブロックです。Intersection Observerは、要素が画面に表示されるかどうかを監視するためのブラウザAPIです。
let iframeLazyImageObserver = new IntersectionObserver(function(entries, observer) { ... });:
- この部分では、IntersectionObserverのインスタンスが作成されます。このインスタンスは、要素が画面に表示されるかどうかを監視し、その情報を提供するために使用されます。
- entriesは画面に表示された要素の情報を保持するオブジェクトの配列であり、observerはIntersectionObserver自体を表します。
entries.forEach(function(entry) { ... });:
- このコードブロックは、IntersectionObserverが提供する各要素の情報（entry）に対して処理を行います。
- entry.intersectionRatioは要素が画面内にどれだけ表示されているかを示す値で、0未満の場合は画面外に、1.0以上の場合は完全に画面内にあることを示します。
let iframeLazyImage = entry.target;:
- 画面に表示されているiframe要素はentry.targetを介してアクセスできます。
iframeLazyImage.src = iframeLazyImage.dataset.src;:
- この行は、iframe要素のsrc属性を、data-src属性の値に設定しています。これにより、実際のコンテンツが遅延読み込みされます。
iframeLazyImage.classList.remove("iframe_lazy");:
- iframe要素のクラスから "iframe_lazy" を削除します。これにより、要素は遅延読み込みのクラスを持たなくなり、通常の状態に戻ります。
iframeLazyImageObserver.unobserve(iframeLazyImage);:
- IntersectionObserverからiframe要素を削除し、要素の監視を停止します。この操作は、要素がすでに画面内に表示されている場合に行われます。
iframeLazyImages.forEach(function(iframeLazyImage) { ... });:
- 最後に、iframeLazyImages内のすべての要素に対して、iframeLazyImageObserverを使用して監視を開始します。
else ブロック:
- ブラウザが「Intersection Observer」をサポートしていない場合、このブロックが実行されます。何らかの互換性のある方法を採用することが提案されていますが、具体的な代替方法は提供されていません。

このコードは、Intersection Observerを使用して画面内に表示される前にiframe要素を遅延読み込みするためのもので、ページのパフォーマンス向上と効率的なリソースの利用をサポートします。

実装

実際にページに配置してみます。Vimeo、YouTubeの順に配置しました。

Vimeo

YouTube

iframeの配置コードは以下です。※パラメータ値は省略しています。

<!-- Vimeo -->
<iframe class="iframe_lazy" src="" data-src="https://player.vimeo.com/video/878902610" frameborder="0" allowfullscreen itemprop="video" alt="雨が降る窓辺の蓄音機型スマホホルダーと赤いバラ"></iframe>

<!-- YouTube -->
<iframe class="iframe_lazy" src="" data-src="https://www.youtube.com/embed/nuU2YHtxMik" frameborder="0" allowfullscreen itemprop="video" alt="真夜中のドア stay with me 松原みき Lyric Video"></iframe>

下記は、minify化したIntersectionObserverのスクリプトコードです。こちらを記事下などに貼り付け、上記のようにiframeコードに

class="iframe_lazy"
src=""
data-src="動画URL"

を適用することで、スクリプトが発動し、動画が遅延して読み込まれるはずです。

クリックで全選択

効果の確認

適用前、適用後の変化は

「ページ右クリックまたはF12キー」 -> 「調査（開発者）ツール」を開き、ネットワークタブなどを選択
PageSpeed Insights

などで確認してみてください。

おわりに

この記事では、IntersectionObserverを使用してiframe動画を遅延読み込みする方法と、それがウェブサイトのパフォーマンスとSEOに与える影響について説明しました。このテクニックを適用することで、読者にとってより良いユーザーエクスペリエンスを提供し、ウェブサイトの効果的な運営をサポートできるでしょう。

今後もウェブ開発の新しいトピックについてご紹介していきますので、お楽しみに！