サードパーティ リソースは、広告や動画の表示、ソーシャル メディアとの統合によく使用されます。デフォルトでは、ページが読み込まれるとすぐにサードパーティ リソースが読み込まれますが、これによりページの読み込みが不必要に遅くなる可能性があります。サードパーティのコンテンツが重要でない場合は、遅延読み込みすることで、このパフォーマンス コストを削減できます。
この監査では、インタラクション時に遅延読み込みできるサードパーティの埋め込みがハイライト表示されます。その場合、ユーザーが操作するまで、サードパーティ コンテンツの代わりにファサードが使用されます。
Lighthouse が遅延可能なサードパーティの埋め込みを検出する方法
Lighthouse は、遅延できるサードパーティ製プロダクト（ソーシャル ボタン ウィジェットや動画の埋め込み（YouTube 埋め込みプレーヤーなど））を探します。
遅延可能なプロダクトと利用可能なファサードに関するデータは、third-party-web で管理されます。
これらのサードパーティ埋め込みのいずれかに属するリソースがページで読み込まれると、監査は失敗します。
ファサードでサードパーティを保留にする
サードパーティの埋め込みを HTML に直接追加するのではなく、実際の埋め込みサードパーティに似た静的要素を含むページを読み込みます。インタラクション パターンは次のようになります。
- 読み込み時: ファサードをページに追加します。
- マウスオーバー時: ファサードがサードパーティ リソースに事前接続します。
- クリック時: ファサードがサードパーティ製品に置き換わります。
推奨されるファサード
一般に、動画の埋め込み、ソーシャル ボタン ウィジェット、チャット ウィジェットはすべてファサード パターンを使用できます。ファサードを選択する際は、サイズと機能セットのバランスを考慮してください。
次のリストは、オープンソースのファサードに関する推奨事項です。vb/lazyframe などの遅延 iframe ローダーを使用することもできます。
YouTube 埋め込みプレーヤー
Vimeo の埋め込みプレーヤー
チャット（Intercom、Drift、Help Scout、Facebook Messenger）
独自のファサードを作成する
前述のインタラクション パターンを採用したカスタム ファサード ソリューションを構築することもできます。ファサードは、遅延されたサードパーティ製品と比較して大幅に小さく、製品の外観を模倣するのに十分なコードのみを含んでいる必要があります。
ソリューションをリストに含める場合は、送信プロセスをご確認ください。
リソース
ファサードでのサードパーティ リソースの遅延読み込み監査のソースコード。