サードパーティの埋め込みを使用する際のベスト プラクティス

人気のあるサードパーティの埋め込み動画を効率的に読み込むための手法の概要を説明します。

Addy Osmani
Addy Osmani
X GitHub
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

多くのサイトでは、サードパーティの埋め込みを使用して、ウェブページの一部を別のコンテンツ プロバイダに委任することで、魅力的なユーザー エクスペリエンスを実現しています。サードパーティ コンテンツの埋め込みの最も一般的な例は、動画プレーヤー、ソーシャル メディア フィード、地図、広告です。

第三者のコンテンツはページのパフォーマンスにさまざまな影響を与える可能性があります。レンダリングをブロックしたり、ネットワークや帯域幅に関する他の重要なリソースと競合したり、Core Web Vitals の指標に影響を及ぼしたりすることがあります。サードパーティの埋め込みも読み込み時にレイアウト シフトを引き起こすことがあります。この記事では、サードパーティの埋め込みを読み込む際に使用できるパフォーマンスに関するベスト プラクティス、効率的な読み込み方法、一般的な埋め込みのレイアウト シフトを減らすのに役立つ Layout Shift Terminator ツールについて説明します。

埋め込みとは

サードパーティの埋め込みとは、サイトに表示されるコンテンツのうち、以下のようなものを指します。

  • 作成者以外
  • 第三者サーバーから配信されています

画面外埋め込みが複数表示されますが、遅延読み込みが行われる可能性があります。

埋め込みは、次のような場合に頻繁に使用されます。

  • スポーツ、ニュース、エンタメ、ファッションに関連するウェブサイトでは、動画を使用してテキスト コンテンツを拡充しています。
  • Twitter やソーシャル メディアのアカウントをアクティブにしている組織は、これらのアカウントからのフィードをウェブページに埋め込んで、より多くの人々に働きかけたりリーチしたりしています。
  • レストラン、公園、イベント会場のページには、地図が埋め込まれていることがよくあります。

サードパーティの埋め込みは通常、ページ上の <iframe> 要素で読み込まれます。サードパーティ プロバイダが提供している HTML スニペットは、多くの場合、マークアップ、スクリプト、スタイルシートで構成されたページを取得する <iframe> で構成されています。一部のプロバイダでは、<iframe> を動的に挿入して他のコンテンツを取り込むスクリプト スニペットを使用しています。その結果、サードパーティの埋め込みが重くなり、ファースト パーティのコンテンツが遅れてページのパフォーマンスに影響する可能性があります。

サードパーティの埋め込みがパフォーマンスに及ぼす影響

一般的な埋め込みの多くは、100 KB を超える JavaScript を含んでおり、最大で 2 MB に達することもあります。読み込みに時間がかかり、実行時にメインスレッドをビジー状態に保ちます。Lighthouse や Chrome DevTools などのパフォーマンス モニタリング ツールを使用すると、サードパーティの埋め込みがパフォーマンスに与える影響を測定できます。

サードパーティ コードの影響を軽減する: Lighthouse の監査では、ページで使用されているサードパーティ プロバイダのリストが、サイズ、メインスレッドのブロック時間とともに表示されます。監査は Chrome DevTools の [Lighthouse] タブで確認できます。

埋め込みソースコードは変更される可能性があるため、埋め込みとサードパーティのコードのパフォーマンスへの影響を定期的に監査することをおすすめします。この機会を利用して、冗長なコードを削除できます。

サードパーティのコードの影響を軽減する

読み込みのベスト プラクティス

サードパーティの埋め込みはパフォーマンスに悪影響を及ぼす可能性がありますが、重要な機能も提供します。サードパーティの埋め込みを効率的に使用し、パフォーマンスへの影響を軽減するには、次のガイドラインを遵守してください。

スクリプトの順序

適切に設計されたページでは、主要なファーストパーティ コンテンツがページの中心となり、サードパーティの埋め込みはサイドバーに配置されるか、ファースト パーティ コンテンツの後に表示されます。

最適なユーザー エクスペリエンスを実現するには、メイン コンテンツを迅速に読み込み、他のサポート コンテンツよりも先に読み込む必要があります。たとえば、ニュースページのニュース テキストは、Twitter のフィードや広告の埋め込みの前に読み込む必要があります。

サードパーティの埋め込みのリクエストは、ファーストパーティ コンテンツの読み込みの妨げになる可能性があるため、サードパーティのスクリプトタグの位置が重要です。スクリプトの実行中に DOM 構築が一時停止するため、スクリプトが読み込み順序に影響を与える可能性があります。主要な自社タグの後に第三者スクリプトタグを配置し、async 属性または defer 属性を使用して非同期で読み込みます。

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

遅延読み込み

サードパーティ コンテンツは通常、メイン コンテンツの後に表示されるため、ページの読み込み時にビューポートに表示されないことがあります。その場合、ユーザーがページのその部分まで下にスクロールするまで、サードパーティ リソースのダウンロードが延期されることがあります。これにより、最初のページ読み込みが最適化されるだけでなく、固定データプランや低速のネットワーク接続を利用しているユーザーのダウンロード コストも削減できます。

実際に必要になるまでコンテンツの読み込みを遅らせることを「遅延読み込み」と呼びます。使用できる遅延読み込みの手法は、要件と埋め込みのタイプに応じて異なります。

ブラウザによる <iframe> の遅延読み込み

<iframe> 要素を介して読み込まれるサードパーティの埋め込みの場合、ブラウザレベルの遅延読み込みを使用して、ユーザーがその近くでスクロールするまで、画面外の iframe の読み込みを遅らせることができます。<iframe> の読み込み属性は、すべての最新ブラウザで使用できます。

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

読み込み属性は次の値をサポートしています。

  • lazy: ブラウザで iframe の読み込みを延期することを示します。ブラウザは、ビューポートに近づくと iframe を読み込みます。iframe が遅延読み込みに適している場合に使用します。
  • eager: iframe をすぐに読み込みます。iframe が遅延読み込みに適さない場合に使用します。loading 属性が指定されていない場合は、これがデフォルトの動作です（ライトモードを除く）。
  • auto: このフレームを遅延読み込みするかどうかはブラウザが決定します。

loading 属性をサポートしていないブラウザはこの属性を無視するため、ブラウザレベルの遅延読み込みをプログレッシブ エンハンスメントとして適用できます。この属性をサポートしているブラウザでは、ビューポートからの距離のしきい値（iframe の読み込みを開始する距離）の実装が異なる場合があります。

さまざまな種類の埋め込みで iframe を遅延読み込みする方法をいくつか紹介します。

  • YouTube 動画: YouTube 動画プレーヤーの iframe を遅延読み込みするには、YouTube が提供する埋め込みコードに loading 属性を含めます。YouTube 埋め込みを遅延読み込みすると、最初のページ読み込み時に約 500 KB のコストを削減できます。
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>
  • Google マップ: Google マップの iframe を遅延読み込みするには、Google Maps Embed API で生成した iframe 埋め込みコードに loading 属性を含めます。Google Cloud API キーのプレースホルダを含むコードの例を次に示します。
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

lazysizes ライブラリ

ブラウザでは、効果的な接続タイプやライトモードなどのシグナルに加え、埋め込みからビューポートまでの距離も使用して iframe を読み込むタイミングを決定するため、ブラウザの遅延読み込みに一貫性がない場合があります。距離のしきい値をより細かく制御する必要がある場合や、ブラウザ間で一貫した遅延読み込みエクスペリエンスを提供したい場合は、lazysizes ライブラリを使用します。

lazysizes: 画像と iframe の両方に対応できる、SEO に適した高速な遅延ローダです。コンポーネントをダウンロードしたら、次のようにして YouTube 埋め込み用の iframe で使用できます。

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

同様に、Lazysize は他のサードパーティ埋め込みの iframe で使用できます。

Lazysizes は Intersection Observer API を使用して、要素が表示されるタイミングを検出します。

Facebook でデータ遅延を使用する

Facebook では、さまざまな種類のソーシャル プラグインを埋め込むことができます。これには、投稿、コメント、動画、[高評価] ボタンなどが含まれます。すべてのプラグインに data-lazy の設定が含まれています。true に設定すると、loading="lazy" iframe 属性を設定して、プラグインでブラウザの遅延読み込みメカニズムが使用されるようになります。

Instagram フィードの遅延読み込み

Instagram には、埋め込みの一部としてマークアップのブロックとスクリプトが用意されています。このスクリプトは、<iframe> をページに挿入します。この <iframe> を遅延読み込みすると、埋め込みのサイズは gzip で 100 KB を超える場合があるため、パフォーマンスを向上させることができます。WPZoom や Elfsight など、WordPress サイト用の Instagram プラグインの多くには遅延読み込みオプションが用意されています。

埋め込みをファサードに置き換える

インタラクティブな埋め込みはページに付加価値をもたらしますが、多くのユーザーはそれを操作しない可能性があります。たとえば、レストランのページを閲覧しているすべてのユーザーが、地図の埋め込みをクリックして、クリック、展開、スクロール、ナビゲートを行うわけではありません。同様に、通信サービス プロバイダのページにアクセスしたユーザー全員が chatbot とやり取りするわけではありません。このような場合、その場所にファサードを表示することで、埋め込みの読み込みまたは遅延読み込みを完全に回避できます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ズームインとズームアウトの機能がある埋め込み地図
で確認できます。 地図の埋め込み
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 画像である地図ファサード。
地図のファサード

ファサードとは、実際に埋め込まれたサードパーティに似ている静的要素ですが、実際には機能しないため、ページの読み込みにかかる負担が大幅に軽減されます。ユーザーになんらかの価値を提供しながら、このような埋め込みを最適に読み込むための戦略をいくつか紹介します。

静止画像をファサードとして使用する

地図をインタラクティブにする必要がない場合は、地図の埋め込みの代わりに静止画像を使用できます。地図上の関心のある地域にズームインして画像を撮影し、インタラクティブな地図の埋め込みの代わりに、この機能を使用できます。DevTools の [ノードのスクリーンショットのキャプチャ] 機能を使用して、埋め込み iframe 要素のスクリーンショットをキャプチャすることもできます。

ノードのスクリーンショットをキャプチャ

DevTools は画像を png としてキャプチャしますが、パフォーマンスを向上させるために WebP 形式に変換することもできます。

動的画像をファサードとして使用する

この手法により、実行時にインタラクティブな埋め込みに対応する画像を生成できます。以下に、ページ上に静的な埋め込みバージョンを生成できるツールをいくつか紹介します。

  • Maps Static API: Google Maps Static API サービスは、標準の HTTP リクエストに含まれる URL パラメータに基づいて地図を生成し、ウェブページに表示する画像として返します。URL には Google Maps API キーを含め、ページの <img> タグに src 属性として配置する必要があります。

    「静的地図メーカー」ツールを使用すると、URL に必要なパラメータを設定し、画像要素のコードをリアルタイムで取得できます。

    次のスニペットは、ソースが Maps Static API の URL に設定されている画像のコードを示しています。画像をクリックして実際の地図にアクセスできるよう、リンクタグにこの ID が含まれています。（注: API キー属性は URL に含まれません）

    <a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>

  • Twitter のスクリーンショット: 地図のスクリーンショットと同様に、ライブフィードの代わりに Twitter のスクリーンショットを動的に埋め込むことができます。Tweetpik はツイートのスクリーンショットを撮るために使用できるツールの 1 つです。Tweetpik API はツイートの URL を受け取り、その内容を含む画像を返します。この API は、画像の背景、色、枠線、サイズをカスタマイズするためのパラメータも受け取ります。

Click-to-Load を使用してファサードを補正する

Click-to-Load のコンセプトは、遅延読み込みとファサードを組み合わせたものです。ページは最初にファサードとともに読み込まれます。ユーザーが静的なプレースホルダをクリックして操作すると、サードパーティの埋め込みが読み込まれます。これはインタラクション時のインポート パターンとも呼ばれ、次の手順で実装できます。

  1. ページの読み込み時: ファサードまたは静的要素がページに含まれます。
  2. マウスオーバー時: ファサードはサードパーティの埋め込みプロバイダに事前接続されます。
  3. クリック時: ファサードがサードパーティ製品に置き換わります。

ファサードは、動画プレーヤー、チャット ウィジェット、認証サービス、ソーシャル メディア ウィジェットのサードパーティの埋め込みで使用される場合があります。再生ボタンが付いた画像のみの YouTube 動画の埋め込みは、よく見かけるファサードです。実際の動画は、画像をクリックした場合にのみ読み込まれます。

「インタラクション時にインポート」パターンを使用してカスタムの Click-to-Load ファサードを作成するか、さまざまなタイプの埋め込みで利用可能な次のオープンソース ファサードのいずれかを使用できます。

  • YouTube ファサード

    Lite-youtube-embed は YouTube プレーヤーに推奨されるファサードです。実際のプレーヤーに似ていますが、速度は 224 倍です。使用するには、スクリプトとスタイルシートをダウンロードし、HTML または JavaScript で <lite-youtube> タグを使用します。YouTube でサポートされているカスタム プレーヤー パラメータは、params 属性で指定できます。

    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

    lite-youtube-embed と実際の embed の比較を以下に示します。

    <ph type="x-smartling-placeholder">
    </ph> YouTube 埋め込み（ライト） <ph type="x-smartling-placeholder">
    </ph> YouTube ライト埋め込み
    をご覧ください。
    <ph type="x-smartling-placeholder">
    </ph> 実際の YouTube 埋め込み <ph type="x-smartling-placeholder">
    </ph> YouTube の埋め込み
    をご覧ください。

    YouTube や Vimeo のプレーヤーで利用できるその他の同様のファサードには、lite-youtube、lite-vimeo-embed、lite-vimeo があります。

  • チャット ウィジェット ファサード

    React チャット ローダは、埋め込み自体ではなく、チャットの埋め込みのように見えるボタンを読み込みます。Intercom、Help Scout、Messenger などのさまざまなチャット プロバイダ プラットフォームで使用できます。類似ウィジェットはチャット ウィジェットよりもはるかに軽量で、読み込み速度も速くなっています。ユーザーがボタンにカーソルを合わせたりクリックしたりした場合や、ページが長時間アイドル状態だった場合は、実際のチャット ウィジェットに置き換えることができます。Postmark の事例紹介では、同社がどのように react-live-chat-loader を実装し、パフォーマンスを向上させたかについて説明しています。

    消印チャット ウィジェット

一部のサードパーティの埋め込みが読み込みパフォーマンスの低下につながり、前述のいずれかの手法を使用できないことが判明した場合、最も簡単な方法は、埋め込みを完全に削除することです。引き続きユーザーが埋め込みのコンテンツにアクセスできるようにするには、target="_blank" を使用してそのコンテンツへのリンクを指定します。これにより、ユーザーはコンテンツをクリックして別のタブで表示できるようになります。

レイアウトの安定性

埋め込みコンテンツを動的に読み込むとページの読み込みパフォーマンスが向上しますが、それによってページ コンテンツが予期せず移動することがあります。これはレイアウト シフトと呼ばれます。

スムーズなユーザー エクスペリエンスを実現するには視覚的な安定性が重要であるため、Cumulative Layout Shift（CLS）は、こうした変化がどの程度の頻度で発生し、どの程度混乱しているかを測定します。

レイアウト シフトを回避するには、ページ読み込み時に、後で動的に読み込まれる要素のためにスペースを確保します。要素の幅と高さがわかっていると、ブラウザは予約するスペースを決定できます。そのためには、iframe の width 属性と height 属性を指定するか、サードパーティの埋め込みが読み込まれる静的要素の固定サイズを設定します。たとえば、YouTube 埋め込み用の iframe では、次のように幅と高さを指定する必要があります。

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

YouTube、Google マップ、Facebook などの一般的な埋め込みコードでは、サイズ属性が指定された埋め込みコードが提供されます。ただし、プロバイダによってはこれが含まれていない場合もあります。たとえば、このコード スニペットは埋め込みのサイズを示していません。

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このページがレンダリングされた後、DevTools を使用して、挿入された iframe を検査できます。次のスニペットに示すように、挿入された iframe の高さは固定され、幅は割合で指定します。

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

この情報を使用して、含まれる要素のサイズを設定し、フィードの読み込み時にコンテナが展開されなくなり、レイアウト シフトが発生しないようにできます。次のスニペットを使用すると、以前に埋め込まれた埋め込みのサイズを修正できます。

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

レイアウト シフト ターミネータ

サードパーティの埋め込みでは多くの場合、最終的にレンダリングされるコンテンツのサイズ（幅、高さ）が省略されるため、ページのレイアウトが大幅に変わる可能性があります。この問題は、さまざまなビューポート サイズで DevTools を使用して最終的なサイズを手動で検査しない限り、対処しにくいことがあります。

現在は自動化ツール Layout Shift Terminator があり、Twitter や Facebook などのプロバイダからの人気の埋め込みからのレイアウト シフトを削減できます。

Layout Shift ターミネーター:

  • 埋め込みクライアントサイドを iframe に読み込みます。
  • iframe を一般的なビューポートのサイズに変更します。
  • よく使用されるビューポートごとに、後でメディアクエリとコンテナクエリを生成できるように、埋め込みのディメンションをキャプチャします。
  • 埋め込みが初期化されるまで（その後、min-height スタイルが削除される）、メディアクエリ（およびコンテナクエリ）を使用して埋め込みマークアップの min-height ラッパーのサイズを設定します。

  • 最適化された埋め込みスニペットを生成します。このコードは、ページ内の埋め込みコードがある場所にコピーして貼り付けることができます。

    シフトターミナルを設置

Layout Shift Terminator を試して、フィードバックを GitHub にお寄せください。このツールは現在ベータ版であり、今後さらに改良を加えていく予定です。

まとめ

サードパーティの埋め込みはユーザーに多くの価値をもたらしますが、ページ上の埋め込みの数とサイズが増えると、パフォーマンスが低下する可能性があります。そのため、埋め込みの位置、関連性、潜在的なユーザーに基づいて、埋め込みに適した読み込み方法を測定、判断、使用する必要があります必要があります。