第三方资源通常用于展示广告或视频,以及与社交媒体集成。 默认方法是在网页加载后立即加载第三方资源,但这可能会使网页加载速度减慢。如果第三方内容不重要,可以通过延迟加载来降低此性能成本。
此项评估会重点关注可在互动时延迟加载的第三方嵌入内容。在这种情况下,系统会使用 Facade 代替第三方内容,直到用户与之互动。
![使用 Facade 加载 YouTube 嵌入式播放器的示例。正面重量为 3 KB,在互动时加载的播放器重量为 540 KB。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/third-party-facades/image/an-example-loading-youtu-d7a9b6d1365a5.jpg?authuser=6&hl=sr)
Lighthouse 如何检测可延期的第三方嵌入
Lighthouse 会寻找可推迟的第三方产品,例如社交按钮微件或视频嵌入产品(例如 YouTube 嵌入式播放器)。
有关可延期产品和可用 Facade 的数据通过第三方网站维护。
如果相应网页加载了属于此类第三方嵌入内容的资源,评估将会失败。
![Lighthouse 第三方 Facade 审核,重点关注 Vimeo 嵌入式播放器和 Drift 实时聊天。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/third-party-facades/image/lighthouse-third-party-fa-fd03a1923af91.jpg?authuser=6&hl=sr)
如何使用 Facade 延迟加载第三方代码
不要将第三方嵌入内容直接添加到您的 HTML 中,而是使用与实际嵌入的第三方内容类似的静态元素加载网页。互动模式应如下所示:
加载时:向页面添加 Facade。
鼠标悬停时:Facade 会预先连接到第三方资源。
点击时:Facade 会自行替换为第三方产品。
推荐的 Facade
一般来说,视频嵌入、社交按钮微件和聊天微件都可以采用 Facade 模式。下面的列表提供了我们对开源 Facade 的建议。选择 Facade 时,请考虑大小和功能集之间的平衡。您也可以使用延迟 iframe 加载器,例如 vb/lazyframe。
YouTube 嵌入式播放器
Vimeo 嵌入式播放器
实时聊天(Intercom、Drift、Help Scout、Facebook Messenger)
编写自己的 Facade
您可以选择采用上述交互模式构建自定义 Facade 解决方案。与延迟的第三方产品相比,Facade 应小得多,并且仅包含足够的代码来模仿产品的外观。
如果您希望自己的解决方案收录到上述列表中,请查看提交流程。