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