広告や動画の表示、ソーシャル メディアとの統合に、サードパーティのリソースがよく使用されます。デフォルトの方法では、ページの読み込み時にすぐにサードパーティのリソースを読み込みますが、ページ読み込みが不必要に遅くなることがあります。サードパーティのコンテンツが重要でない場合は、コンテンツを遅延読み込みすることでこのパフォーマンス コストを削減できます。
この監査では、インタラクション時に遅延読み込みできるサードパーティの埋め込みがハイライト表示されます。この場合、ユーザーが操作するまで、サードパーティのコンテンツの代わりにファサードが使用されます。
![ファサードを備えた YouTube 埋め込みプレーヤーの読み込み例。ファサードの重量は 3 KB で、540 KB のプレーヤーはインタラクション時に読み込まれます。](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/an-example-loading-youtu-d7a9b6d1365a5.jpg?authuser=19&hl=ja)
Lighthouse で遅延可能なサードパーティ埋め込みを検出する方法
Lighthouse では、ソーシャル ボタン ウィジェットや動画の埋め込み(YouTube 埋め込みプレーヤーなど)など、遅延可能なサードパーティ プロダクトを探します。
遅延可能なプロダクトと使用可能なファサードに関するデータは、サードパーティ ウェブで管理されます。
これらのサードパーティの埋め込みのいずれかに属するリソースがページで読み込まれると、監査は不合格になります。
![Lighthouse のサードパーティ ファサード監査。Vimeo の埋め込みプレーヤーと Drift ライブチャットがハイライト表示されている。](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/lighthouse-third-party-fa-fd03a1923af91.jpg?authuser=19&hl=ja)
ファサードでサードパーティを延期する方法
サードパーティの埋め込みを HTML に直接追加するのではなく、実際の埋め込みのサードパーティと似た静的要素を含むページを読み込みます。インタラクション パターンは次のようになります。
読み込み時: ページにファサードを追加します。
マウスオーバー時: ファサードがサードパーティのリソースに事前接続されます。
クリック時: ファサードがサードパーティ製品に置き換えられます。
推奨されるファサード
一般に、動画の埋め込み、ソーシャル ボタン ウィジェット、チャット ウィジェットはすべてファサード パターンを使用できます。以下に、おすすめのオープンソース ファサードを示します。ファサードを選択する際は、サイズと機能セットのバランスを考慮してください。遅延 iframe ローダ(vb/lazyframe など)を使用することもできます。
YouTube 埋め込みプレーヤー
Vimeo の埋め込みプレーヤー
チャット(インターコム、ドリフト、ヘルプスカウト、Facebook Messenger)
独自のファサードの作成
上記の操作パターンを採用するカスタム ファサード ソリューションを構築することもできます。ファサードは、遅延しているサードパーティ製品に比べて大幅に小さくし、製品の外観を模倣するのに十分なコードのみを含める必要があります。
パートナー様のソリューションを上記のリストに登録する場合は、お申し込み方法をご覧ください。
関連情報
ファサード監査を使用したサードパーティ リソースの遅延読み込みのソースコード。