一般的なサードパーティ埋め込みを効率的に読み込む手法の概要。
多くのサイトでは、サードパーティの埋め込みを使用して、ウェブページの一部のセクションを別のコンテンツ プロバイダに委任することで、魅力的なユーザー エクスペリエンスを実現しています。サードパーティのコンテンツの埋め込みの一般的な例としては、動画プレーヤー、ソーシャル メディア フィード、地図、広告などがあります。
サードパーティのコンテンツは、さまざまな方法でページのパフォーマンスに影響する可能性があります。レンダリングをブロックしたり、ネットワークや帯域幅をめぐって他の重要なリソースと競合したり、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>
の loading 属性は、すべてのモダン ブラウザで使用できます。
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
loading 属性は次の値をサポートしています。
lazy
: ブラウザが iframe の読み込みを遅らせることを示します。ブラウザは、ビューポートに近づくと iframe を読み込みます。iframe が遅延読み込みの候補である場合に使用します。eager
: iframe をすぐに読み込みます。iframe が遅延読み込みの適切な候補でない場合に使用します。loading
属性が指定されていない場合、これはデフォルトの動作です(Lite モードを除く)。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 に優しい遅延読み込みツールです。コンポーネントをダウンロードしたら、次のように iframe で YouTube 埋め込みに使用できます。
<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>
同様に、lazysizes は、他のサードパーティ埋め込みの iframe で使用できます。
lazysizes は Intersection Observer API を使用して、要素が可視になったときに検出します。
Facebook で data-lazy を使用する
Facebook には、埋め込むことができるさまざまな種類のソーシャル プラグインが用意されています。これには、投稿、コメント、動画、最も人気のある [高評価] ボタンが含まれます。すべてのプラグインには data-lazy
の設定が含まれています。true
に設定すると、loading="lazy"
iframe 属性を設定して、ブラウザの遅延読み込みメカニズムがプラグインで使用されるようになります。
Instagram フィードの遅延読み込み
Instagram は、埋め込みの一部としてマークアップのブロックとスクリプトを提供します。このスクリプトは、<iframe>
をページに挿入します。この <iframe>
を遅延読み込みすると、埋め込みのサイズが圧縮状態で 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 に設定された画像のコードを示しています。画像をクリックすると実際の地図にアクセスできるように、リンクタグに含まれています。(注: 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 のスクリーンショットを動的に埋め込むことができます。ツイートのスクリーンショットを撮ることができるツールの 1 つに Tweetpik があります。Tweetpik API は、ツイートの URL を受け取り、その内容を含む画像を返します。この API は、画像の背景、色、枠線、サイズをカスタマイズするためのパラメータも受け入れます。
クリックして読み込む機能を使用してファサードを強化する
クリックして読み込むコンセプトは、遅延読み込みとファサードを組み合わせたものです。ページは最初にファサードとともに読み込まれます。ユーザーが静的プレースホルダをクリックして操作すると、サードパーティの埋め込みが読み込まれます。これは、インタラクション時のインポート パターンとも呼ばれ、次の手順で実装できます。
- ページの読み込み時: ファサードまたは静的要素がページに含まれている。
- マウスオーバー時: サードパーティの埋め込みプロバイダにファサードが事前接続します。
- クリック時: ファサードがサードパーティ製プロダクトに置き換えられます。
ファサードは、ビデオ プレーヤー、チャット ウィジェット、認証サービス、ソーシャル メディア ウィジェットのサードパーティ埋め込みで使用できます。再生ボタンが付いた画像のみの 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 プレーヤーと 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 がリリースされました。
レイアウト シフトの終了条件:
- 埋め込みを iframe にクライアントサイドで読み込みます。
- iframe のサイズを、さまざまな一般的なビューポート サイズに変更します。
- 一般的なビューポートごとに埋め込みのディメンションをキャプチャし、後でメディアクエリとコンテナクエリを生成します。
- 埋め込みが初期化されるまで(その後、min-height スタイルが削除されるまで)、メディアクエリ(およびコンテナクエリ)を使用して、埋め込みマークアップの周囲に min-height ラッパーのサイズを設定します。
最適化された埋め込みスニペットが生成されます。このスニペットは、ページに埋め込む場所にコピーして貼り付けることができます。
Layout Shift Terminator をお試しいただき、フィードバックは GitHub でお寄せください。このツールはベータ版であり、今後さらに改良していく予定です。
まとめ
サードパーティの埋め込みはユーザーに多くの価値をもたらしますが、ページ上の埋め込みの数とサイズが増えると、パフォーマンスが低下する可能性があります。そのため、埋め込みの位置、関連性、潜在的なユーザーのニーズに基づいて、埋め込みの適切な読み込み戦略を測定し、判断し、使用する必要があります。