ファサードを使用したサードパーティ リソースの遅延読み込み
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
広告や動画の表示、ソーシャル メディアとの統合に、サードパーティのリソースがよく使用されます。デフォルトの方法では、ページの読み込み時にすぐにサードパーティのリソースを読み込みますが、ページ読み込みが不必要に遅くなることがあります。サードパーティのコンテンツが重要でない場合は、コンテンツを遅延読み込みすることでこのパフォーマンス コストを削減できます。
この監査では、インタラクション時に遅延読み込みできるサードパーティの埋め込みがハイライト表示されます。この場合、ユーザーが操作するまで、サードパーティのコンテンツの代わりにファサードが使用されます。
Lighthouse で遅延可能なサードパーティ埋め込みを検出する方法
Lighthouse では、ソーシャル ボタン ウィジェットや動画の埋め込み(YouTube 埋め込みプレーヤーなど)など、遅延可能なサードパーティ プロダクトを探します。
遅延可能なプロダクトと使用可能なファサードに関するデータは、サードパーティ ウェブで管理されます。
これらのサードパーティの埋め込みのいずれかに属するリソースがページで読み込まれると、監査は不合格になります。
ファサードでサードパーティを延期する方法
サードパーティの埋め込みを HTML に直接追加するのではなく、実際の埋め込みのサードパーティと似た静的要素を含むページを読み込みます。インタラクション パターンは次のようになります。
読み込み時: ページにファサードを追加します。
マウスオーバー時: ファサードがサードパーティのリソースに事前接続されます。
クリック時: ファサードがサードパーティ製品に置き換えられます。
推奨されるファサード
一般に、動画の埋め込み、ソーシャル ボタン ウィジェット、チャット ウィジェットはすべてファサード パターンを使用できます。以下に、おすすめのオープンソース ファサードを示します。ファサードを選択する際は、サイズと機能セットのバランスを考慮してください。遅延 iframe ローダ(vb/lazyframe など)を使用することもできます。
YouTube 埋め込みプレーヤー
Vimeo の埋め込みプレーヤー
チャット(インターコム、ドリフト、ヘルプスカウト、Facebook Messenger)
独自のファサードの作成
上記の操作パターンを採用するカスタム ファサード ソリューションを構築することもできます。ファサードは、遅延しているサードパーティ製品に比べて大幅に小さくし、製品の外観を模倣するのに十分なコードのみを含める必要があります。
パートナー様のソリューションを上記のリストに登録する場合は、お申し込み方法をご覧ください。
関連情報
ファサード監査を使用したサードパーティ リソースの遅延読み込みのソースコード。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2020-12-01 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2020-12-01 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2020-12-01 UTC。"]]