第三方资源通常用于展示广告或视频,以及与社交媒体集成。默认方法是在网页加载后立即加载第三方资源,但这可能会不必要地降低网页加载速度。如果第三方内容不重要,可以通过延迟加载来降低这种性能开销。
此项审核突出显示了可以在互动时延迟加载的第三方嵌入。在这种情况下,系统会使用外观来代替第三方内容,直到用户与其互动。
Lighthouse 如何检测可推迟的第三方嵌入
Lighthouse 会查找可延迟加载的第三方产品,例如社交媒体按钮微件或视频嵌入内容(例如 YouTube 嵌入式播放器)。
有关可推迟付款的商品和可用外观的相关数据在 third-party-web 中维护。
如果网页加载了属于其中某个第三方嵌入的资源,则审核会失败。
使用 Facade 推迟加载第三方代码
请勿直接将第三方嵌入内容添加到 HTML,而是使用与实际嵌入的第三方内容类似的静态元素加载网页。交互模式应如下所示:
- 加载时:向页面添加 Facade。
- 鼠标悬停时:Facade 会预先连接到第三方资源。
- 点击:门面会替换为第三方产品。
推荐的外墙
一般来说,视频嵌入、社交按钮 widget 和聊天 widget 都可以采用立面模式。选择立面时,请考虑大小与特征集之间的平衡。
以下列表列出了我们推荐的开源外观。您还可以使用延迟 iframe 加载器,例如 vb/lazyframe。
YouTube 嵌入式播放器
Vimeo 嵌入式播放器
实时聊天(Intercom、Drift、Help Scout、Facebook Messenger)
编写您自己的 Facade
您可以选择使用前面概述的交互模式构建自定义 Facade 解决方案。与推迟的第三方产品相比,Facade 应明显小得多,并且仅包含足够的代码来模仿产品的外观。
如果您希望自己的解决方案包含在该列表中,请查看提交流程。