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 样板通过将页面主体的 opacity 设置为 0 来隐藏页面内容。加载 AMP 后，它能够计算页面的布局。之后，AMP 将主体的 opacity 设置为 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 布局的元素，都会注入特定于布局的 sizer 元素。

<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