体验 AMP

Avatar of David Attard
David Attard

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

以下是来自 DART Creations 的 David Attard 的客座文章。 David 将向我们介绍 AMP(不知道这是什么?继续阅读)以及如何将现有网站转换为 AMP 网站。 提示:这样做是为了获得巨大的性能提升。 AMP 正在成为一件大事。 WordPress 正在这样做。 我收到了 Google 提示我这么做,并且 Analytics 支持它

如果您关心访客的利益,您就会知道快速网站是良好用户体验的主要因素之一。 快速的网站可以在很大程度上让您的用户感到满意并再次访问。 坚决的网站管理员将始终追求那些几毫秒的速度提升。

这些毫秒确实有 影响 区别

使您的网站快速加载的一个重要的新方法称为 加速移动页面 (AMP),这是一个由 Google 发起 的项目。 移动数据与我们的家庭 WiFi 连接不同。 它很慢。 AMP 旨在通过严格规定的方式消除网站中最无效的部分来帮助解决这个问题。

让我们来体验一下 AMP!

我们将了解如何将现有网页设计转换为 AMP。 然后我们将衡量它带来的差异。

为什么选择加速移动页面?

手机在移动网络上通常会遇到延迟问题。

即使对于包含静态内容的简单文章,页面也可能需要很长时间才能加载文本。 脚本、图像、视频……所有这些都需要更长时间。 也许广告会更晚出现,并且页面会调整自身以反映新加载的内容。 这并不是一个愉快的加载体验。

AMP 想要改变这一切。 发布商和科技公司已经走到一起,建立了最佳实践,这些实践将使页面快速呈现。

这是一个非平凡的问题。 AMP 的初始重点是静态内容,这使得更彻底的优化成为可能。

目前,AMP 只是一个开源的概念验证。 事实上,我们将遇到一些限制,表明这项技术仍处于起步阶段。

是什么让 AMP 比传统网站更快?

AMP 对源代码有非常严格的规则,以便获得它追求的巨大速度提升。

AMP 的基本原则包括

  1. 仅使用异步脚本。 非异步脚本会阻塞 DOM 构造并延迟页面呈现。

    实际上,AMP 完全限制了 JavaScript 的使用。 脚本仅允许在为性能而精心设计的自定义 AMP 元素中使用。 自定义 AMP 脚本的示例包括 Google Analytics、Facebook、Twitter 和 YouTube。

    第三方脚本(例如广告或第三方服务)被排除在关键路径之外,并且仅允许在 iframe 中使用。 同样,这不会阻止页面的呈现。

    稍后将详细介绍脚本。

  2. 外部资源需要设置尺寸。 图像和 iframe 等内容需要具有尺寸,以确保 AMP 在下载元素之前知道其尺寸。
  3. 不要让任何内容阻止呈现。 简而言之,没有任何内容可以阻止 AMP 呈现。 外部元素包含在 iframe 中。 AMP 将创建 iframe 框,甚至不知道它将包含什么内容。
  4. CSS 必须内联且大小受限。 AMP 与通常选择在外部文件中链接 CSS 的做法相反。 AMP 强制使用内联 CSS,原因与脚本相同:因为 CSS 会阻塞呈现和页面加载。

    内联 CSS 的最大值为 50 千字节,以确保其有效使用。

  5. 字体加载必须高效。 网页字体可能非常大,并且会严重影响性能。 在正常情况下,浏览器会被阻止下载字体,直到脚本和样式表下载完毕并准备就绪。 这会导致长时间的初始等待时间,直到大型字体开始下载。

    在 AMP 中,CSS 是内联的,脚本是异步的。 因此,浏览器不必等到这些操作完成后才能下载字体。

  6. 仅在 GPU 上运行动画。 一些动画需要浏览器而不是 GPU 完成的页面布局更新。 AMP 将动画限制为transformopacity,以便不需要页面布局更新,并且所有动画都保留在 GPU 上,在那里它们运行速度很快。
  7. 资源加载优先级。 AMP 优化资源下载,以便首先下载最重要的资源。 仅当用户可能看到图像时才会下载图像。
  8. 页面即时加载。 PreConnect API 用于预取、呈现和下载用户可能使用的资源。 这是有效地完成的:仅当内容可能被请求(例如“屏幕可见区域”内容)时才会预呈现和下载。

AMP 的组成部分

对标准 HTML、CSS 和 JS 有许多“更改”,这些更改使使用 AMP 优化的页面获得了速度提升。

  • AMP HTML:这些是使用自定义 AMP 属性扩展的 HTML 标签
  • AMP JS:一个库,确保 AMP HTML 页面快速呈现
  • AMP CDN:使用 HTTP 2.0 提供 HTML AMP 页面,以实现最大效率

将页面转换为 AMP 的步骤

由于我完全不熟悉 AMP,因此我遵循了他们的 推荐清单

我想从一个现有的普通(非 AMP)页面开始,所以我从 CodePen 选择了一个 Pen:samyerkes 的 示例文章布局

  1. 将 amp 属性添加到标签中
    <html amp lang="en">
  2. 添加规范链接元素
    <link rel="canonical" href="index.html">
  3. 更改了字符集标签。 请注意,这与 ALL-CAPS UTF-8 不同,AMP 对此很敏感。
    <meta charset="utf-8">
  4. 添加元视口标签
    <meta name="viewport" content="width=device-width,minimum-scale=1">
  5. <head> 的底部添加 AMP Project CDN 脚本
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  6. 将所有 <img> 标签更改为 <amp-img> 并添加 widthheight 属性。 例如
    <amp-img src="http://farm4.staticflickr.com/3595/3288866270_23cb40f37c_b.jpg" alt="Crashed plane vintage photo" height="1024" width="734"></amp-img> 

    使用 <amp-img> 标签时,您需要遵循此语法

    • 必须包含明确的 widthheight
    • 建议包含一个占位符。 占位符会立即显示,因此在实际资源加载之前会有“某些内容”可见。 例如,您可以加载图像的低分辨率预览,该图像正在加载中。
      <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
        <amp-img placeholder src="preview.png" layout="fill"></amp-img>
      </amp-anim>
    • 可选:layout="responsive"。 阅读有关其他布局选项的信息。
  7. 删除 <link> 样式表并使用 <style amp-custom> 内联所有 CSS

结果:改进的加载时间

测试环境是在 SiteGround GoGeek 共享主机帐户上创建的几个子域。 测试使用 GTMetrix 和 Pingdom 工具进行,并且运行了几次以消除来自外部环境的任何波动。

测试 1:短文章

我们进行的第一个测试是使用 CodePen 中指定的完全相同的文章,其中文章相对较短。

示例文章布局(原生 HTML) 示例文章布局 AMP
测试 1 3.3 秒,1.17 MB,8 个请求 1.7 秒,1.18 MB,5 个请求
测试 2 1.2 秒,1.17 MB,8 个请求 2.0 秒,1.18 MB,5 个请求
测试 3 1.3 秒,1.17 MB,8 个请求 1.0 秒,1.18 MB,5 个请求

您可以看到一些波动。 如果仔细观察瀑布图,您会发现波动实际上主要来自 AMP CDN。 不幸的是,这是使用共享资源的副作用,该资源可能会承受负载。

测试 2:文章长度增加三倍,并包含三倍的图像

示例文章布局(原生 HTML) 示例文章布局 AMP
测试 1 1.1 秒,2.3 MB,14 个请求 1.6 秒,1.18 MB,5 个请求
测试 2 1.1 秒,2.3 MB,14 个请求 0.9 秒,1.18 MB,5 个请求
测试 3 2.3 秒,2.3 MB,14 个请求

1.1 秒,1.18 MB,5 个请求

结果解读

除了实际加载时间之外,AMP 页面中的请求数量也低于普通页面。仅此一项,就能使页面速度更快,因为请求数量越少,等待的延迟就越少(每个请求都会受到延迟的影响)。

此外,当页面使用 AMP 后,页面的总大小也显著减小。包含大量图片的大型文章似乎从 AMP 中获益更多。

在我们进行的一项早期测试中,我们测试了一篇相当简短的文章,其中只有少量图片。这项测试并没有得出非常确定的结论,因此我们加大了测试力度。在我们现在展示的测试中,我们将文章长度增加了两倍,并将图片数量也增加了两倍。有趣的是,虽然我们使图片数量增加了两倍,但在文章的 AMP 版本中,请求数量并没有增加。

据我了解,除了 AMP 规范本身的效率之外,AMP 只加载视口以上的内容(这解释了为什么在图片数量增加三倍后,请求数量保持不变)。它只加载文章的第一部分,“视口以上内容”,因此内容更短、更小,当然也更快。

关于<script>标签的一句话

引用AMP 工作原理页面上的原文

我们很早就意识到,许多性能问题都是由在页面中集成多个 JavaScript 库、工具、嵌入内容等引起的。

紧随其后的是

考虑到这一点,我们做出了一个艰难的决定,即 AMP HTML 文档不包含任何作者编写的 JavaScript 代码,也不包含任何第三方脚本。

在我看来,这有点过于激进。

我理解,有些东西必须做出牺牲。性能提升是有代价的。即使在优化普通网站的性能时,你也需要做出一些妥协。

有时是网站图片的质量。高质量的图片会导致文件大小较大。有时需要牺牲功能。有时需要移除第三方脚本,例如社交网站集成。

你总是需要根据自己的优先级做出一些艰难的决定。

在我看来,完全消除脚本有点过于激进。像 jQuery、Bootstrap、Angular、React 这样的库……是当今 Web 开发必不可少的构建模块。

完全移除脚本是在自断其臂。这将使 AMP 完全脱离地球,进入一个狭小的世界。

只有当你愿意在网页功能方面做出非常严重的妥协时,它才会变得实用。即使在新闻网站领域,AMP 的初始关注点,也有一些艰难的挑战。

我们能猜测 AMP 的发展方向吗?

这还处于早期阶段,很难预测 AMP 的未来。坦率地说,我真的很希望 AMP 能够成功。网页变得臃肿不堪,对性能的关注度太低。我们需要真正努力让 Web 变得更快。HTTP/2 是朝着正确方向迈出的一步。AMP 也是如此。

不幸的是,由于缺乏对脚本的支持,AMP 感觉受到了限制。我希望 Web 开发人员能够共同努力,找到一个公平的解决方案,既能保持 Web 速度,又能实现我们所需的功能。

这是一个邀请。抽出一些时间帮助 AMP 项目。如果你没有足够的技术能力,那就阅读相关信息并进行测试。宣传它,让人们对它感兴趣。谁不想成为一个为所有人打造更美好、更快的 Web 的一部分呢?

关注 Google 一段时间后,可以预见 Google 可能会采取哪些措施来推动 AMP 的发展。我们可能很快就会听说 AMP 是 SEO 排名信号。你在这里先听到的。

AMP 资源