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 字体或任何其他具有未知字体 URL 的字体提供商，请预连接相应的字体服务器
 <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>

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

基本优化

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