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-boilerplate 代码。AMP-boilerplate 通过将页面主体的 opacity 设置为 0 来隐藏页面内容。一旦 AMP 加载完毕，它就能够计算页面的布局。之后，AMP 将主体的 opacity 设置为 1，使页面内容可见。不幸的是，这种方法必须先下载 AMP 框架，才能渲染页面。

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

服务器端渲染执行三项操作

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

⁣2. 内联 AMP 内部 CSS 样式： AMP-boilerplate 代码被 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 boilerplate。您可以通过检查 html 元素上是否存在 i-amphtml-no-boilerplate 属性来了解 boilerplate 是否已删除。例如，amp-experiment 组件在运行时更改页面内容。为了避免内容偏移，如果页面上使用了 amp-experiment，则需要存在 AMP-boilerplate 代码。

首图优化

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