使用 Facade (外观)延迟加载第三方资源
Appears in: 性能审核
第三方资源通常用于展示广告或视频以及集成社交媒体。默认方法是在页面加载后立即加载第三方资源,但这可能会不必要地减慢页面的加载速度。如果第三方内容不是那么重要,则可以通过延迟加载来降低这种性能消耗。
此审计重点介绍了可以在交互时延迟加载的第三方嵌入内容。在这种情况下,在用户与其交互之前,将使用*{nbsp}facade*替换掉第三方内容。
Lighthouse 检测可延迟加载的第三方嵌入内容的方法 #
Lighthouse 会寻找可延迟加载的第三方产品,例如社交按钮小部件或视频嵌入内容(例如 YouTube 嵌入式播放器)。
有关可延迟加载的产品和可用 facade 的数据在第三方网络中维护。
如果网页加载隶属这些第三方嵌入之一的资源,则本次审计将失败。
如何使用 Facade 延迟加载第三方资源 #
不要将第三方嵌入直接添加到 HTML 中,而是在加载网页时使用外观类似于实际嵌入的第三方的静态元素。交互模式应该如下所示:
加载时:向页面添加 facade。
鼠标悬停时:facade 预连接到第三方资源。
单击时:facade 会将自己替换为第三方产品。
推荐的 Facade #
一般来说,视频嵌入、社交按钮小部件和聊天小部件都可以采用 facade 模式。我们在下面列出了推荐的开源 facade。在选择 facade 时,请考虑大小和功能集之间的平衡。您还可以使用延迟 iframe 加载器,例如 vb/lazyframe。
YouTube 嵌入式播放器 #
Vimeo 嵌入式播放器 #
实时聊天(Intercom, Drift, Help Scout, Facebook Messenger) #
编写自己的 facade #
您可以选择构建使用上述交互模式的自定义 facade 解决方案。与延迟加载的第三方产品相比,facade 应该小得多,并且只会包含用来模仿产品外观的代码。
如果您希望将自己的解决方案加入上面的列表中,请查看提交流程。
资源 #
Last updated: — Improve article