AMP 优化器的工作原理

重要提示：此文档不适用于您当前选择的格式 电子邮件！

AMP 优化器将有效的 AMPHTML 文档作为输入，并通过应用其他优化将其转换为优化版本，这些优化手动执行起来会很麻烦。您可以通过 html 元素中的 transformed 属性识别生成的“转换后的 AMP”

<html ⚡ lang="en" i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">

AMP 缓存使用不同的转换标记，例如，Google AMP 缓存添加 transformed=google;v=1。

AMP 优化器对 AMP 文档执行各种优化，从服务端渲染布局到图片优化。这是一个示例，显示了 AMP 页面及其优化版本之间的差异（点击查看大图）。

在本指南的其余部分，我们将更详细地介绍这些优化。

服务端渲染 AMP 布局

服务端渲染 AMP 布局具有改善 AMP 页面加载性能的最大潜力。为了避免内容跳动，AMP 要求网站在标头中添加 AMP 样板代码。AMP 样板通过将页面正文的不透明度设置为 0 来隐藏页面内容。一旦加载了 AMP，它就能够计算页面的布局。之后，AMP 将正文的不透明度设置为 1，使页面内容可见。不幸的是，这种方法必须先下载 AMP 框架才能渲染页面。

为了改进这一点，可以在将页面提供给用户代理之前，在服务器端渲染 AMP 布局，例如 responsive 或 fixed-height 布局。这样就可以删除 AMP 样板，同时仍然避免在页面加载期间出现内容偏移。

服务端渲染完成三件事

⁣1. 删除 AMP 样板：对于每个使用 AMP 布局的元素，都会注入特定于布局的标记。

⁣2. 内联 AMP 内部 CSS 样式：AMP 样板代码被 AMP 运行时 CSS 样式取代：<style amp-runtime>...</style>。对于非服务端渲染的文档，AMP 会在运行时添加这些样式。但是，服务端渲染的 AMP 页面需要在加载 AMP 之前使用这些样式，以便 AMP 布局能够工作。为了避免潜在的版本冲突，在运行时，AMP 将检查 i-amphtml-version="011905222334000" 中指定的版本是否与当前的 AMP 版本不同，如果不同，将使用最新版本更新 CSS。

<style amp-runtime i-amphtml-version="011905222334000">html{overflow-x:hidden!important}html.i-amphtml-...</style>

⁣3. 服务端渲染的 AMP 布局：对于每个使用 AMP 布局的元素，都会注入特定于布局的尺寸元素。

<amp-img src="image.jpg" width="1080" height="610" layout="responsive" alt="..."
         class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
  <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
</amp-img>

并非总是可以删除 AMP 样板。您可以通过检查 html 元素上是否存在 i-amphtml-no-boilerplate 属性来了解是否已删除该样板。例如，amp-experiment 组件会在运行时更改页面内容。为了避免内容偏移，如果页面上使用了 amp-experiment，则需要存在 AMP 样板代码。

首图优化

AMP 优化器可以显著缩短渲染第一个视口中的图片所需的时间。这在优化 LCP 时间以满足核心 Web 指标时至关重要。

在 AMP 中，可以通过使用 data-hero 属性注释 amp-img 来显式声明首图

<amp-img data-hero src="/hero.jpg" layout="responsive" width="640" height="480" alt="..."></amp-img>

AMP 优化器最多支持页面上的两个首图，以避免阻止其他关键资源的带宽。如果此限制不适合您，请告知我们。

AMP 优化器还将自动检测 amp-img、amp-iframe、amp-video 或 amp-video-iframe 元素的首图，并为图片 src 注入 link rel=preload。自动检测的工作原理是分析 HTML 标记和图片布局，以检测第一个视口中的大型图片。

在 amp-img 的情况下，AMP 优化器还将在服务器端渲染 amp-img 内的 img 标签。这使浏览器能够立即渲染图片，而无需 AMP 运行时。

图片优化

AMP 优化器可以通过生成 AMP 布局特定的 srcset 属性来帮助您提供优化的响应式图片。例如，以下 amp-img 声明

<amp-img src="image1.png" width="400" height="800" layout="responsive" alt="..."></amp-img>

使用以下 srcset 定义进行增强

<amp-img src="image1.png" width="400" height="800" layout="responsive" alt="..." srcset="image1.470w.png 470w, image1.820w.png 820w, image1.1440w.png 1440w"></amp-img>

为此，您的构建/托管环境需要支持调整大小/优化图片。请查看各个优化器指南，了解如何最佳地集成图片优化。

AMP 模块构建（即将推出）

基于 JavaScript 模块，有一个较小版本的 AMP 运行时和组件可用，这要求用户在查看 AMP 页面时下载更少的 JavaScript。AMP 优化器默认启用 AMP 模块构建，方法是将

<script async src="https://www.ampproject.org/v0.js"></script>

转换为

<script type="module" async src="https://www.ampproject.org/v0.mjs"></script>
<script nomodule async src="https://www.ampproject.org/v0.js"></script>

了解 type="module" 的浏览器会忽略带有 nomodule 属性的脚本。这意味着使用现代浏览器的用户将受益于较小的运行时包，而使用旧浏览器的用户将回退到非模块版本的 AMP 运行时。

AMP 模块构建仅适用于转换后的 AMP，因为它要求 AMP 运行时 CSS 内联。

由 @sebastianbenz 撰写