AMP

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 页面及其优化版本之间的差异(点击查看大图)。

Illustration showing the difference in markup between an AMP page and its optimized version

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

服务器端渲染 AMP 布局

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

为了改进这一点,可以在将页面提供给用户代理之前,在服务器端渲染 AMP 布局(例如 responsivefixed-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-imgamp-iframeamp-videoamp-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 内联。