AMP 项目旨在为网络内容带来即时渲染。这是一份适用于所有基于 AMP 的文档的未排序优化列表,这些优化总体上使它们加载得很快。每个网页都可以进行这些优化,但 AMP 网页不能不进行这些优化。
本文虽然是关于 AMP 中的优化,但作为优化非 AMP 网站的待办事项清单,也可能很有用。如果我们遗漏了可能对 AMP 有益的任何优化,请留言或向我们发送 请求提取。
延迟加载
当用户很可能看到资源或文档处于空闲状态时,会延迟加载资源。
广泛使用预连接
大量使用新的 预连接 API,以确保在发出 HTTP 请求时尽可能快。这有助于在最终发出延迟加载请求时加快速度。
预取延迟加载资源
尽可能晚加载资源,但尽可能早预取。这样,加载速度非常快,但只有在向用户实际显示资源时才会使用 CPU。
所有异步 JavaScript
只有在所有 JavaScript 文件都异步加载时,AMP 文件才有效。
内联样式表
AMP 中只允许使用内联样式表。与大多数网页相比,这从关键渲染路径中删除了 1 个或更多 HTTP 请求。
零个 HTTP 请求阻止字体下载。
由于 AMP 中的所有 JS 都具有 async 属性,并且只允许使用内联样式表,因此没有 HTTP 请求阻止浏览器下载字体。
通过预渲染即时加载
AMP 经过优化,可以相对“廉价”且可靠地预渲染资源。这意味着它是在用户明确表示他们希望导航到某个页面之前进行渲染的。这样,用户实际选择页面时页面可能已经可用,从而导致 即时加载。
虽然预渲染可以应用于所有网络内容,但这可能会(并且实际上会)占用大量带宽和 CPU。AMP 经过优化,可以减少这两个因素
预渲染仅下载视窗上方的资源
当 AMP 文档为 即时加载预渲染时,实际上只下载视窗上方的资源。 详情。
预渲染不会渲染可能在 CPU 方面很昂贵的内容
当 AMP 文档针对即时加载进行预渲染时,可能使用大量 CPU 的资源(如第三方 iframe)不会被下载。详情。
智能资源优先级
当 AMP 下载资源时,它会优化下载,以便当前对用户最重要的那些资源首先下载。
文档布局与资源下载解耦
图像、广告或 iframe 等外部资源需要在 HTML 中说明其大小。这意味着它们不必首先下载以布局文档。
样式表的最大大小
内联样式表具有最大大小。虽然此大小对于非常复杂的页面来说已经足够大,但它仍然要求页面作者养成良好的 CSS 习惯。
FastDOM样式 DOM 更改批处理
我们对所有 DOM 测量和更改操作进行批处理,以最大程度地减少浏览器中的样式重新计算。
在实践中,这意味着在每个“动画帧”中,我们首先执行所有 DOM 读取操作,然后在这些操作完成后执行所有写入操作。结果是每帧减少到 1 次样式重新计算。
针对样式重新计算和布局次数少进行了优化
独立于上述内容,AMP 经过优化,以避免在浏览器中进行昂贵的样式重新计算和布局。
针对第三方 JS 最差做法(如 document.write)的缓解措施
特别是如果第三方 JS 使用对性能非常糟糕的“document.write”API,它不会阻止渲染主页。
分析工具的运行时成本与使用的分析提供商数量无关
在 AMP 中实现分析的方式,具有多个分析提供商的页面不会因额外的 JavaScript 而变得臃肿,并且不会使用大量的额外 CPU。
扩展不会阻止页面布局
AMP 支持用于灯箱、Instagram 嵌入、推文等内容的扩展。虽然这些需要额外的 HTTP 请求,但这些请求不会阻止页面布局和渲染。
所有 AMP 文档均可使用 CDN 传送
AMP 提供基于代理的 CDN,用于传送所有有效的 AMP 文档,为所有 AMP 内容提供快速且可靠的性能。
所有资源和文档通过相同的 HTTP 2.0 通道从相同的源加载
使用基于代理的 AMP CDN 时,文档、所有 JS 文件和所有图像从使用 HTTP 2.0 的相同源加载,以实现最大效率。
动画可以进行 GPU 加速
AMP 中与动画相关的 CSS 规则确保动画可以在现代设备上进行 GPU 加速,因此它们流畅且平滑。
由 Google 的 AMP 项目技术主管 Malte Ubl 发布