使用 Facade 延迟加载第三方资源
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
第三方资源通常用于展示广告或视频,以及与社交媒体集成。
默认方法是在网页加载后立即加载第三方资源,但这可能会使网页加载速度减慢。如果第三方内容不重要,可以通过延迟加载来降低此性能成本。
此项评估会重点关注可在互动时延迟加载的第三方嵌入内容。在这种情况下,系统会使用 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 应小得多,并且仅包含足够的代码来模仿产品的外观。
如果您希望自己的解决方案收录到上述列表中,请查看提交流程。
资源
通过 Facade 审核延迟加载第三方资源的源代码。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2020-12-01。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2020-12-01\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2020-12-01。"]]