使用 Facade 延迟加载第三方资源
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
第三方资源通常用于展示广告或视频,以及与社交媒体集成。默认方法是在网页加载后立即加载第三方资源,但这可能会不必要地降低网页加载速度。如果第三方内容不重要,可以通过延迟加载来降低这种性能开销。
此项审核突出显示了可以在互动时延迟加载的第三方嵌入。在这种情况下,系统会使用外观来代替第三方内容,直到用户与其互动。
使用 Facade 加载 YouTube 嵌入式播放器。
Lighthouse 如何检测可推迟的第三方嵌入
Lighthouse 会查找可延迟加载的第三方产品,例如社交媒体按钮微件或视频嵌入内容(例如 YouTube 嵌入式播放器)。
有关可推迟付款的商品和可用外观的相关数据在 third-party-web 中维护。
如果网页加载了属于其中某个第三方嵌入的资源,则审核会失败。
Lighthouse 第三方 Facade 审核。
使用 Facade 推迟加载第三方代码
请勿直接将第三方嵌入内容添加到 HTML,而是使用与实际嵌入的第三方内容类似的静态元素加载网页。交互模式应如下所示:
- 加载时:向页面添加 Facade。
- 鼠标悬停时:Facade 会预先连接到第三方资源。
- 点击:门面会替换为第三方产品。
推荐的外墙
一般来说,视频嵌入、社交按钮 widget 和聊天 widget 都可以采用立面模式。选择立面时,请考虑大小与特征集之间的平衡。
以下列表列出了我们推荐的开源外观。您还可以使用延迟 iframe 加载器,例如 vb/lazyframe。
YouTube 嵌入式播放器
Vimeo 嵌入式播放器
实时聊天(Intercom、Drift、Help Scout、Facebook Messenger)
编写您自己的 Facade
您可以选择使用前面概述的交互模式构建自定义 Facade 解决方案。与推迟的第三方产品相比,Facade 应明显小得多,并且仅包含足够的代码来模仿产品的外观。
如果您希望自己的解决方案包含在该列表中,请查看提交流程。
资源
使用 Facade 审核延迟加载第三方资源的源代码。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2020-12-01。
[[["易于理解","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"]],["最后更新时间 (UTC):2020-12-01。"],[],[]]