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