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

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

此项评估会重点关注可在互动时延迟加载的第三方嵌入内容。在这种情况下，系统会使用 Facade 代替第三方内容，直到用户与之互动。

使用 Facade 加载 YouTube 嵌入式播放器的示例。正面重量为 3 KB，在互动时加载的播放器重量为 540 KB。
通过 Facade 加载 YouTube 嵌入式播放器。

Lighthouse 如何检测可延期的第三方嵌入

Lighthouse 会寻找可推迟的第三方产品，例如社交按钮微件或视频嵌入产品（例如 YouTube 嵌入式播放器）。

有关可延期产品和可用 Facade 的数据通过第三方网站维护。

如果相应网页加载了属于此类第三方嵌入内容的资源，评估将会失败。

Lighthouse 第三方 Facade 审核，重点关注 Vimeo 嵌入式播放器和 Drift 实时聊天。
Lighthouse 第三方 Facade 审核。

如何使用 Facade 延迟加载第三方代码

不要将第三方嵌入内容直接添加到您的 HTML 中，而是使用与实际嵌入的第三方内容类似的静态元素加载网页。互动模式应如下所示：

  1. 加载时：向页面添加 Facade。

  2. 鼠标悬停时：Facade 会预先连接到第三方资源。

  3. 点击时：Facade 会自行替换为第三方产品。

一般来说，视频嵌入、社交按钮微件和聊天微件都可以采用 Facade 模式。下面的列表提供了我们对开源 Facade 的建议。选择 Facade 时，请考虑大小和功能集之间的平衡。您也可以使用延迟 iframe 加载器，例如 vb/lazyframe。

YouTube 嵌入式播放器

Vimeo 嵌入式播放器

实时聊天（Intercom、Drift、Help Scout、Facebook Messenger）

编写自己的 Facade

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

如果您希望自己的解决方案收录到上述列表中，请查看提交流程。

资源

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