使用 Facade 延迟加载第三方资源

第三方资源通常用于展示广告或视频,以及与社交媒体集成。默认方法是在网页加载后立即加载第三方资源,但这可能会不必要地降低网页加载速度。如果第三方内容不重要,可以通过延迟加载来降低这种性能开销。

此项审核突出显示了可以在互动时延迟加载的第三方嵌入。在这种情况下,系统会使用外观来代替第三方内容,直到用户与其互动。

使用外观加载 YouTube 嵌入式播放器的示例。立面为 3 KB,在互动时加载播放器为 540 KB。
使用 Facade 加载 YouTube 嵌入式播放器。

Lighthouse 如何检测可推迟的第三方嵌入

Lighthouse 会查找可延迟加载的第三方产品,例如社交媒体按钮微件或视频嵌入内容(例如 YouTube 嵌入式播放器)。

有关可推迟付款的商品和可用外观的相关数据在 third-party-web 中维护

如果网页加载了属于其中某个第三方嵌入的资源,则审核会失败。

Lighthouse 第三方 Facade 审核,突出显示了 Vimeo 嵌入式播放器和 Drift 实时聊天。
Lighthouse 第三方 Facade 审核。

使用 Facade 推迟加载第三方代码

请勿直接将第三方嵌入内容添加到 HTML,而是使用与实际嵌入的第三方内容类似的静态元素加载网页。交互模式应如下所示:

  • 加载时:向页面添加 Facade。
  • 鼠标悬停时:Facade 会预先连接到第三方资源。
  • 点击:门面会替换为第三方产品。

一般来说,视频嵌入、社交按钮 widget 和聊天 widget 都可以采用立面模式。选择立面时,请考虑大小与特征集之间的平衡。

以下列表列出了我们推荐的开源外观。您还可以使用延迟 iframe 加载器,例如 vb/lazyframe

YouTube 嵌入式播放器

Vimeo 嵌入式播放器

实时聊天(Intercom、Drift、Help Scout、Facebook Messenger)

编写您自己的 Facade

您可以选择使用前面概述的交互模式构建自定义 Facade 解决方案。与推迟的第三方产品相比,Facade 应明显小得多,并且仅包含足够的代码来模仿产品的外观。

如果您希望自己的解决方案包含在该列表中,请查看提交流程

资源

使用 Facade 审核延迟加载第三方资源的源代码。