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)" ...>

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

考虑使用 Service Worker

现在所有主流浏览器都支持 Service Worker，因此最好评估是否值得在您的网站上添加 Service Worker。

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

  • 对于单页应用：App Shell 模型（在 AMP 上下文中称为 AMP-in-PWA）。此模式需要 Service Worker 将 AMP 文档升级为基于 App Shell 的 PWA 体验。
  • 对于多页应用：流式复合资源。Service Worker 会缓存静态页眉和页脚，并使用流式传输来立即返回缓存的部分响应，同时加载内容。

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

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

如果您的 AMP 网站使用 Service Worker，以下是一些最佳实践

如果您正在寻找一种在 AMP 站点中开始使用 Service Worker 的方法，请查看此示例，该示例提供了一个 Service Worker，其中实现了所有这些最佳实践。

AMP 运行时的 max-age 仅为 50 分钟，以确保可以快速获得更新。为了避免可能发生的浏览器缓存未命中，最好从 Service Worker 提供 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 运行时。通过 Service Worker，您可以预缓存未版本化的 AMP 运行时，并加快转换速度。要了解有关 AMP 缓存为何对 AMP 运行时 URL 进行版本控制的更多信息，请阅读此文档。

在 Safari 中，Service Worker 的实现方式存在一个关键差异——如果页面是从 AMP 缓存提供的，则在 Safari 中无法为您的来源安装 Service Worker。

优化自定义字体

使用 AMP，您可以执行一些操作来优化字体加载（其中大多数实际上并非 AMP 特有）

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

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

基本优化

当然，Web 性能优化的所有基本知识也适用于 AMP 页面