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 通过将页面正文的不透明度设置为 0 来隐藏页面内容。加载 AMP 后，它能够计算页面的布局。然后，AMP 将正文的不透明度设置为 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 时间以满足核心网络指标时，这一点至关重要。

在 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 撰写