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

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

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 属性をサポートしていないブラウザでは無視されるため、ブラウザレベルの遅延読み込みを段階的な拡張として適用できます。この属性をサポートするブラウザでは、viewport-from-distance のしきい値（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 ライブラリ

ブラウザは、有効な接続タイプや Lite モードなどのシグナルに加えて、埋め込みのビューポートからの距離を使用して 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 とやり取りするわけではありません。このような場合は、その代わりにファサードを表示することで、埋め込みの読み込みや遅延読み込みを完全に回避できます。

ズームインとズームアウトの機能がある埋め込み地図
地図の埋め込み
画像である地図ファサード。
地図のファサード

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

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

地図をインタラクティブにする必要がない場合は、地図の埋め込みの代わりに静止画像を使用できます。地図上の関心のある地域にズームインして画像を撮影し、インタラクティブな地図の埋め込みの代わりに、この機能を使用できます。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 動画埋め込みは、よく見かける偽装です。実際の動画は、画像をクリックした場合にのみ読み込まれます。

インタラクション時のインポート パターンを使用してカスタムのクリックして読み込むファサードを作成する方法と、さまざまなタイプの埋め込みに使用できる次のオープンソース ファサードを使用する方法があります。

  • 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 と実際の埋め込みの比較を示します。

    ライトな YouTube 埋め込み
    YouTube ライト埋め込み
    実際の YouTube 埋め込み
    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 を使用して最終的なサイズを手動で検査する必要があります。

Twitter、Facebook などの一般的な埋め込みによるレイアウト シフトを軽減できる自動ツール Layout Shift Terminator がリリースされました。

Layout Shift ターミネーター:

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

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

    レイアウト シフトのターミナル

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

まとめ

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