サードパーティのリソースは、広告や動画の表示やソーシャルメディアとの統合でよく使用されます。デフォルトのアプローチでは、ページが読み込まれるとすぐにサードパーティのリソースが読み込まれますが、これによりページの読み込みが不必要に遅くなる可能性があります。サードパーティのコンテンツが重要でない場合は、遅延読み込みを行うことで、このパフォーマンスコストを削減できます。
このレポートでは、操作時に遅延読み込みできるサードパーティの埋め込みに焦点を当てます。その場合、ユーザーが操作するまで、サードパーティのコンテンツの代わりにファサードが使用されます。
ファサードは静的な要素であり、実際に埋め込まれているサードパーティに似ていますが、機能していないため、ページの読み込みにかかる負担がはるかに少なくなります。
遅延可能なサードパーティの埋め込みをLighthouseによって検出する方法
Lighthouseは、ソーシャルボタンウィジェットや動画埋め込み (YouTube埋め込みプレーヤーなど) など、遅延できるサードパーティ製品を検索します。
遅延可能な製品と利用可能なファサードに関するデータは、third-party-webで管理されています。
これらのサードパーティの埋め込みのいずれかに属するリソースがページによって読み込まれると、監査は失敗します。
ファサードを使用してサードパーティを遅延する方法
サードパーティの埋め込みをHTMLに直接追加するのではなく、実際に埋め込まれたサードパーティコンテンツに似た静的要素を使用してページを読み込みます。連携パターンは次のようになります。
読み込み時：ページにファサードを追加します。
マウスオーバー時: ファサードはあらかじめサードパーティのリソースに接続します。
クリック時: ファサードはサードパーティ製品に置き換えられます。
お勧めのファサード
一般に、動画埋め込み、ソーシャルボタンウィジェット、およびチャットウィジェットではすべてファサードパターンを採用できます。以下の一覧は、お勧めのオープンソースファサードです。ファサードを選択するときには、サイズと機能セットのバランスを考慮してください。vb/lazyframeなどの遅延iframeローダーを使用することもできます。
YouTube埋め込みプレーヤー
Vimeo埋め込みプレーヤー
ライブチャット (Intercom、Drift、Help Scout、Facebook Messenger)
ファサードを使用して、サードパーティコンテンツを遅延読み込みするときには、実際の埋め込みの機能がすべて備わっていないため、いくつかのトレードオフがあります。たとえば、Driftライブチャットバブルには、新しいメッセージの数を示すバッジがあります。ファサードを使用して、ライブチャットバブルを遅延した場合、ブラウザーでrequestIdleCallbackを呼び出した後に、実際のチャットウィジェットが読み込まれたときに、バブルが表示されます。ビデオ埋め込みの場合、読み込みが遅いと自動再生が一貫した動作にならない場合があります。
独自のファサードを作成する
上記の連携パターンを採用するカスタムファサードソリューションを構築することもできます。ファサードには、遅延されたサードパーティ製品よりも大幅に小さく、製品の外観を模倣するのに十分なコードのみを含めてください。
ご自身のソリューションを上記の一覧に追加したい場合は、 提出手順を確認してください。
リソース
ファサード監査を使用したサードパーティリソースの遅延読み込みのソースコード。
公開日 • 記事を改善する