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 运行时提供的最大时效仅为 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：仅当字体已经在缓存中时才使用该字体，如果尚未加载您的自定义字体，则会回退到系统字体。
  • 优化你的网页字体（例如，使用 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 页面