AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

优化您托管的 AMP 页面

本指南为网站管理员提供了有关如何优化其托管的 AMP 网站的提示和指导。

AMP 默认情况下不快吗？

AMP 运行时已针对速度进行了优化，并且如果您的 AMP 页面由AMP 缓存提供服务，则它们将得到充分优化并提供最高的加载性能。例如，如果您的用户通过移动设备上的 Google 搜索访问您的 AMP 页面，则默认情况下这些页面将由 AMP 缓存提供服务。

但是，AMP 页面并不总是从 AMP 缓存中提供。网站可能会决定从其自己的服务器向其他流量来源显示 AMP 页面。最常见的用例是完全使用 AMP 构建的网站，例如 axios.com，用户直接访问该网站。另一个流量来源是 Twitter，它 开始链接到 AMP 页面，而不是提供标准的移动版本。这意味着，如果用户点击 Twitter 移动应用中的某个链接，该链接会转到您自己来源中页面的 AMP 版本（如果存在）。

因此，您无法始终确保您的 AMP 页面仅从 AMP 缓存中提供。对于这些情况，即您从自己的服务器提供 AMP 页面，确保您的 AMP 页面提供最佳加载性能非常重要。

AMP 页面默认情况下加载速度很快，但您可以实施一些额外的性能优化，以帮助浏览器更快地加载 AMP 页面。本指南介绍了在发布 AMP 页面时应考虑的一些优化。但是，在开始阅读本指南之前，请确保您已了解所有 基本的 Web 性能最佳实践。特别是，图像优化对加载性能有很大影响。

例如，通过应用以下优化技术

"The Scenic" 模板 在 3G 连接上加载 快两秒。

如果您想跳过详细信息，请使用 AMP 页面体验指南 检查您的 AMP 页面是否存在可能的性能优化。

使用 AMP 优化器

服务器端渲染 AMP 布局是 AMP 缓存用来进一步加快加载时间的技术。使用服务器端渲染，可以删除 AMP 样板，以便可以在不运行 AMP 运行时 JavaScript 的情况下绘制 AMP 文档。例如，AMP 样板生成器的服务器端渲染版本 渲染速度是普通 AMP 版本的两倍！

如果您要发布 AMP 页面，则应使用 AMP 优化器。AMP 优化器让您可以从您自己的后端提供经过优化的 AMP 页面，其中包括服务器端渲染的 AMP 布局。AMP 优化器还将自动执行本文档中描述的许多其他优化。

预加载英雄图片

AMP HTML 使用自己的图像元素：amp-img。虽然 amp-img 比传统的 HTML img 标记有许多优势，但有一个缺点是，必须在图像下载开始之前加载 AMP 运行时。对于某些图像，例如产品页面的英雄图像，至关重要的是图像加载得尽可能快。在这些情况下，使用属性 data-hero 注释图像

<amp-img src="hero.jpg" data-hero ...>

这允许 AMP 缓存和 AMP 优化器在服务器端渲染 img，从而大大缩短加载时间。另一个最佳做法是预加载图像，以确保浏览器尽快开始下载图像。

<head>
  <link rel="preload" href="/images/elephants.png" as="image">
</head>
<body>
  ...
  <amp-img width="404" height="720" layout="responsive"
           src="/images/elephants.png" alt="..." >
  </amp-img>
</body>

但是，如果您的响应式布局需要根据屏幕宽度使用不同的英雄图像怎么办？例如，适用于台式机的宽图像和适用于移动设备的窄图像，如下所示

<amp-img width="404" height="720"
    alt="..." layout="responsive"
    src="/images/elephants_narrow.png"
    media="(max-width: 415px)">
</amp-img>
<amp-img height="720"
    alt="..." layout="fixed-height"
    src="/images/elephants_wide.jpg"
    media="(min-width: 416px)">
</amp-img>

好消息是 link rel=preload 也支持媒体查询。因此，我们可以在预加载语句中使用相同的媒体查询，如下所示

<link rel="preload" as="image"
    href="/images/elephants_narrow.png"
    media="(max-width: 415px)">
<link rel="preload" as="image"
    href="/images/elephants_wide.jpg"
    media="(min-width: 416px)">

顺便说一下，相同的方法适用于 amp-video 海报图像

<link rel="preload" href="/images/poster.jpg" as="image">
...
 <amp-video width="480" height="270" src="elephant.mp4"
             poster="/images/poster.jpg"
             layout="responsive">
     ...
</amp-video>

只需确保将预加载语句放在视口声明之后，因为浏览器需要视口尺寸来确定屏幕宽度

<meta name="viewport" content="width=device-width">
...
<link rel="preload" media="(max-width: 415px)" ...>

仅预加载关键图像，否则图像下载可能会占用其他关键下载所需的带宽。

考虑使用服务工作者

现在，所有 主要浏览器都支持服务工作者，因此评估是否为您的网站添加服务工作者是有意义的。

我们知道有两种不同的架构模式可以实现可靠的快速导航

  • 对于单页应用程序：应用外壳模型（在 AMP 上下文中称为 AMP-in-PWA）。此模式需要服务工作者将 AMP 文档升级到基于应用外壳的 PWA 体验。
  • 对于多页应用程序：流式复合资源。服务工作者缓存静态页眉和页脚，并使用流式传输在加载内容时立即返回缓存的部分响应。

如果未使用这些模式中的任何一个，并且无法缓存整个网站（这仅适用于非常小的网站），则服务工作者可能会产生负面性能影响。在这种情况下，最好的办法是不使用服务工作者。

但是，如果您希望您的网站可以从主屏幕安装，或希望提供离线体验，则必须使用服务工作者。在这种情况下，重要的是使用导航预加载来减轻潜在的减速（注意：目前，仅在 Chrome 中支持导航预加载）。

如果您的 AMP 网站使用服务工作者，这里有一些最佳实践

如果您正在寻找一种方法来在您的 AMP 网站中使用服务工作者，请查看此示例，其中提供了实施所有这些最佳实践的服务工作者。

AMP 运行时以仅 50 分钟的最大生存期提供，以确保快速获得更新。为避免可能的浏览器缓存未命中，最好从服务工作者提供 AMP 运行时。

预缓存不仅与从缓存的 AMP 页面过渡到您自己的源上的非 AMP 页面相关，还与从缓存的 AMP 页面过渡到您自己的源上的 AMP 页面相关。原因是 AMP 缓存将 AMP 运行时 URL 从常青 URL 重写为最新发布的版本，例如

https://cdn.ampproject.org/v0.js -> https://cdn.ampproject.org/rtv/001515617716922/v0.js。

结果是，从您自己的源提供服务的 AMP 页面无法受益于浏览器缓存，并且在这种情况下必须再次下载（无版本）AMP 运行时。使用服务工作程序，您可以预先缓存无版本的 AMP 运行时并加快转换速度。要详细了解 AMP 缓存对 AMP 运行时 URL 进行版本控制的原因，请阅读此文档。

在 Safari 中，服务工作程序的实现方式有一个关键区别——如果页面是从 AMP 缓存提供的，则无法在 Safari 中为您的源安装服务工作程序。

优化自定义字体

使用 AMP，您可以采取一些措施来优化字体加载（其中大多数实际上并不特定于 AMP）

  • 如果可能，请使用 font-display: optional：这将仅在字体已在缓存中时使用该字体，并且如果您的自定义字体尚未加载，则会回退到系统字体。
  • 优化您的网络字体（例如，使用 WOFF2 提供自定义字体）。
  • 预加载自定义字体 
<link rel="preload" as="font" href="/bundles/app/fonts/helveticaneue-roman-webfont.woff2" >
  • 如果您使用 Google 字体或任何其他具有未知字体 URL 的字体提供程序，请预先连接相应字体服务器 
 <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>

最后但并非最不重要的一点，请尝试尽量减少在页面上使用的自定义字体数量。如果您能做到，请使用系统字体代替自定义字体，因为系统字体使您的网站与用户的操作系统相匹配，并且有助于避免加载更多资源。

基本优化

当然，所有基本的网络性能优化也适用于 AMP 页面