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