Google的AMP:有趣且用户友好的加速移动页面指南

已发表: 2020-11-25

观看视频。 忽略副本。

这是我对您的建议,一旦您登陆Google专门用于新的“加速的移动网页(AMP)”项目的网站:

“加速的移动页面(AMP)项目是一个开源计划,体现了愿景,即发布者可以一次创建移动优化的内容,并将其立即加载到任何地方。”

如果您不是开发人员,但阅读了副本,则会被行话吞噬。

但是,观看视频,您几乎会立即了解AMP的全部含义(更不用说有趣的Spinal Tap参考,请参见下文)。

或者,您也可以只阅读本指南,因为它将是您有史以来关于AMP及其对您的内容营销产生的最大影响。

我承诺。

什么是Google的AMP项目?

自Google的“零关键时刻”哲学于2011年诞生以来,他们就想“大幅改善移动网络的性能”已不是什么秘密。

而且,我可能不需要告诉您,移动网络上的内容性能存在一个小问题。

您可能有移动设备。 而且很可能是您从搜索结果页面,社交媒体网站上或电子邮件收件箱中单击了该设备上的链接……渴望消费内容。

但是它永远不会来。

好吧,它来了,但是在页面加载时出现了混乱的拼凑,混乱的图像,视频和广告。 您惊恐地看着,眼睛散开,在地铁座位上蹦蹦跳跳,就像要去洗手间的人一样。

“这需要多长时间?” 你特别没有人哭。

谁知道,但您永远也找不到,因为像40%的人口一样,您会在3秒内在加载页面上保释。 然后您会说,就像我的黑猫Apollo Monkeystrap一样,“叹气”。

Google希望通过AMP消除这种难以忍受的移动时刻。

AMP使您的页面多快?

从1到10的比例,其中一个“根本没有加载”,有十个“在一秒钟内加载”,AMP内容将以11的页面速度加载。(这是我警告过您的Spinal Tap参考)。

但是说真的,有多快?

Pinterest的软件工程师Jon Parise说:“与传统的针对移动设备优化的网页相比,“加速的移动页面”的加载速度快四倍,使用的数据量少八倍。”

快四倍是好的! 但是,这对我们友好的地铁通勤人员试图在他的手机上下载网页对您意味着什么?

根据NiemanLab的说法,AMP对《纽约时报》进行了优化的文章完全在2.99秒内下载到了移动设备上。 为了进行比较,在快速的iMac上的Chrome中进行的测试中,该页面的桌面版花费了3.82秒(移动版更快)。

如果您不知道,NYTimes.com就是土星这一边加载速度最慢的移动新闻网站之一。

此后,他们已修复该问题。

您确定速度足够快吗?

但是,您说,等等,2.99秒仍在我们的地铁通勤者愿意等待的时间范围的上游。 他像40%的人口一样,在3秒内保释。 2.99秒让它快要关闭了! 没有太大的改善。

没错,但是区别在于,在台式机上的第一个非AMP方案中,页面仍在3秒后加载。 在该方案的AMP版本中,它已在2.99中完全下载

更重要的是,AMP版本在0.857秒内达到了“ domContentLoaded –网页加载的关键点,HTML完全下载并且某些重要的解析已完成”。

眨眼大约需要0.33秒。

换句话说,眨眼两次,借助AMP,您的地铁通勤者几乎可以立即开始阅读内容的有用部分。

是什么让传统的移动页面加载如此缓慢?

我想我知道,但是由于我不是开发人员,设计师或程序员(甚至不确定这些学科是否不同),所以我在Rainmaker Digital的Mike Hale选拔了一位开发人员来帮助我进行翻译。

迈克说,当桌面站点进入移动浏览器时,您通常会从不同的主机将数十个信息包“调用”到移动浏览器中。

在上面的旧的,缓慢的《纽约时报》示例中,一篇文章可能有“ 192个请求,其中一些请求发送给Times的主机,大多数请求是其他许多托管大量脚本的服务器的请求。”

单击后,最有用的部分将在5秒钟内下载,但其余部分仍会进入,这就是为什么屏幕随着浏览器的设置而跳动然后复位的原因。

我仍然迷失了,我向迈克施压,“但是要求什么呢?! 什么是被称为?!”

Mike告诉我,您的手机可能正在调用社交插件,图像轮播,SlideShares和视频的脚本。 然后可能在后台运行分析软件,广告和跟踪脚本。

明智的日常事物,但它们加起来。 又快

问题在于您的移动设备根本没有处理能力来快速消除这种情况。

下图说明了移动内容的问题

想象一下,如果您去银行,走到出纳员那里,要了100美元,但顺序却很奇怪:十五张一美元的钞票,三张五美元的钞票,五张十美元的钞票和一张二十美元的钞票。

如果银行现在像移动网络一样运作,那么出纳员会进行多次旅行,分别给您每个账单。

这些旅行的每一次都是一次“呼唤”。

但是,如果使用AMP对银行进行了优化,出纳员会立即给您所有账单。 此外,他可能会忽略您对某些帐单的具体要求,而只提交一张一百美元的帐单。

AMP旨在简化浏览器的要求。

“唯一可以调用的脚本是AMP javascript,” Mike说。 “所有东西都包裹在一起。 我马上把一切都交给你。”

以下是Yoast描述AMP移动内容的方式:

“让我们将其与赛车进行比较。 如果要使赛车更快,可以给它提供更快的引擎,并减轻所有的重量。 在此减肥过程中,您还需要卸下后座,空调等物品。AMP与此不同。 它是普通网络的精简版,因为Google关心速度而不是漂亮功能。”

在最后一行感觉到那种痛苦的刺痛? 这不是你的想象力。 稍后我们将解决这个问题。 首先,让我们看一下AMP的经验,以帮助您了解我的意思。

AMP优化的移动内容是什么样的?

幸运的是,您可以测试AMP新闻内容的演示。

  1. 挑出您的智能手机。
  2. 打开浏览器(任何浏览器)。
  3. 输入g.co/ampdemo。
  4. 在Google搜索框中输入诸如“贾斯汀·比伯诞辰”,“珍妮弗·劳伦斯”或“小野洋子”之类的热门关键字词组。
  5. 点击“发送”。

这是结果外观的一个示例:

如您所见,AMP内容获得了最高的收入。 它位于折叠上方的转盘中。 标准条目位于其下方。

您可以滚动浏览该轮播,然后在找到自己喜欢的AMP支持的文章时,单击它。 它是这样的:

有趣的阅​​读,!

Google为什么要这样做,您应该注意吗? (有点)

这就是奇怪的地方。

正如我上面提到的,过去五年来Google一直致力于移动网络性能的优化,这就是为什么我们一直在写非常快的网站速度的重要性的原因(该文章中有六种工具可以测试您的网站速度,顺便说一句)。

这就是为什么我们去年就Google移动更新“ Mobilegeddon”向您发出警告的原因。

因此,在这一点上,AMP有点像Google专注于移动网络优化的巅峰之作,但是它如何帮助发布商呢?

听起来很简单,但Google认为:用户喜欢内容。 他们喜欢快速的内容。 分发快速内容的速度越快,可以消耗的内容就越多。

不过,此举还有其他方面:Google试图赢得新闻消费大战。

AMP与Instant Articles和Apple News有何不同?

去年,Apple和Facebook都发布了允许用户消费新闻文章的应用程序:Apple News和Instant Articles。

这两个应用程序都是独立产品。

Adobe XD团队的高级经验开发工程师Christian Cantrell在Smashing Magazine上写道:“它们本质上是花哨的新闻聚合器,具有基于专有联合格式的自定义渲染器。”

换句话说,Instant Articles和Apple News都重生了RSS。

另一方面,Google寻求直接与发布商联系,并让他们优化移动内容以在开放的Web上消费,从而可以轻松输入和轻松分发,这是您在应用程序中无法获得的。

到目前为止,一些知名新闻出版商已参与其中:

  • 时代公司
  • 大西洋组织
  • 沃克斯
  • 英国广播公司
  • 赫芬顿邮报

WordPress,Twitter,Adobe Analytics,Chartbeat,LinkedIn和Pinterest等许多技术公司也加入了。

关于AMP的两个常见抱怨

投诉至少有两种:

  1. 批评者讨厌移动内容可以做什么。
  2. 批评者感叹小出版商将受到惩罚。

酵母菌属于第一类。 Joost de Valk写道:“ AMP限制了HTML页面中的功能。 花哨的设计被剥夺了速度。 AMP很大程度上是表单项目的功能。”

请注意,不仅外观受到了影响-开箱即用,AMP不支持表格,这意味着AMP页面不会帮助您增加电子邮件列表。 有可用的技术解决方法,但是这种情况仍然太新以至于无法看到它们将如何发展。

您会注意到大多数大型发行商都在使用AMP,但这是否意味着AMP伤害了较小的发行商?

Search Engine Land的Paul Shapiro这样说:

“尽管经验丰富的开发人员通常可以通过密集的性能优化来获得相似的结果,但是由于资源的限制,发布者常常忽略了这一点。 AMP可以轻松实现这些优化,而无需改变主要的移动网络体验。”

AMP可能被证明是优化移动体验的可靠工具。 那你应该AMP吗?

谁应该担心AMP?

这取决于。

  • 您是新闻的巨型出版商吗? 然后恐慌,除非您已经有了针对移动用户体验的可靠策略。 您应该在几个月前就已经拥有了,但是,嘿。
  • 您从移动设备获得大量流量来源吗? 再次,您需要确保您的移动体验战略牢不可破。 您可能想观看并了解AMP的发展,但是值得进行一些实验。
  • 您是否在竞争不激烈的新市场中? 在接下来的30天内将您的移动内容优化为重点,但不要惊慌。
  • 不属于上述任何类别吗? 然后坐在您的手上,监视发生的情况。

我们的首席产品官兼StudioPress创始人Brian Gardner告诉我:“绝对有一件事情需要发行商关注。” “但我猜测这将在一段时间内成为一笔不稳定的交易。”

谁知道? 可能会有一种更简便的方法来完成所有这些工作-WordPress内容管理咨询公司10up的总裁兼创始人Jake Goldman还建议:

“考虑到时间,我们怀疑AMP最终将变得像'不受限制'的HTML一样复杂,或者由于移动硬件,宽带速度和标准化隐私功能的进步而变得毫无意义–解决了我们不再存在的问题。

但是,假设您确实想和AMP一起玩。

如何创建您的第一个AMP页面

在这里,您可以拉大男孩/女孩开发者的裤子,因为使用AMP需要一些基本的标记。

我建议您通过本基础教程来学习。 它将教您如何:

  • 使用样板代码创建您的第一个AMP页面。
  • 上演它。
  • 使用Google的验证器验证它是否符合AMP要求(这是非常重要的一步)。
  • 准备发布和分发。

在标记中,您会看到一些元素带有AMP标签。 因此,<img>标记变为<amp-img>。 <anim>标签变为<amp-anim>。 <video>标签变为<amp-video>。

等等。

WordPress用户应该怎么做?

如果您想尝试AMP,那就很幸运。

2016年2月24日,Automattic发布了正式的AMP插件。 因此,WordPress用户只是远离AMP优化内容的可下载插件。

但是请记住这一点:根据官方AMP插件页面,该插件不支持页面或档案。 只是帖子。

但是,一旦激活插件bam,您的所有帖子都会自动放大!

激活插件后,您网站上的所有帖子都会动态生成与AMP兼容的版本。

您可以通过在网址末尾添加“ / amp”来查看网络帖子的AMP版本。 例如, yourwebsite.com / amp-wicked-fast的AMP版本将变成yourwebsite.com/amp-wicked-fast/amp。

如果您是Rainmaker Platform客户:我们在雷达屏幕上安装了AMP。 鉴于Google经历了惊人的180度周转,我们将不着急。 但是,如果AMP在将来确实很重要,我们将为用户提供简单的AMP解决方案。

AMP是搜索排名因素吗?

没有。

Google的John Mueller表示AMP不是排名因素。 他确实说过:“将页面转换为AMP格式将满足对移动设备友好的排名信号,但没有排名信号仅与AMP相关联。”

搜索引擎杂志的资深作者Matt Southern指出:

“我的问题是,如果AMP是排名信号,或者如果AMP内容已经在首页顶部具有单程票证,那有什么关系? 在大多数情况下,AMP内容的排名已经超过自然结果,这是人们可以要求的最大排名提升之一。”

因此,走出去并在移动内容游戏中领先于竞争对手是有优势的-在本周五白板视频中,蒸馏出的人们挥舞着一根胡萝卜。

我建议您观看Whiteboard Friday视频的另一个原因是Distilled的员工感到困惑,这是AMP提供的另一个重要区别:通过缓存服务器实现超快速交付。

Distilled研发主管汤姆·安东尼(Tom Anthony)说:

“然后,所有这些都被设计为真正被大量缓存,以便Google可以托管这些页面,在此处托管您的实际内容,因此它们甚至不再需要从您那里获取它。”

只是出于笑容,这就是Google Blog关于其新的缓存方法必须说的:

“因此,作为这项工作的一部分,我们设计了一种新的缓存方法,该方法允许发布者继续托管其内容,同时允许通过Google的高性能全局缓存进行有效分发。 我们打算开放我们的缓存服务器,任何人都可以免费使用。”

我喜欢自由。

AMP是否会影响您的广告?

不应该这样

Google表示:“我们希望支持各种广告格式,广告网络和技术。 任何使用AMP HTML的网站都将保留其选择的广告网络以及任何不会影响用户体验的格式。”

如果您想知道,以下是Google AMP Project官方网站上支持的广告网络的列表:

  • A9
  • 广告形式
  • AdReactor
  • AdSense广告
  • AdTech
  • 点与媒体
  • 双击
  • Flite
  • 普拉斯塔
  • 智能AdServer
  • 耶德莫
  • 转载

顺便说一句,我认为AMP的目的还在于缓解发布商对越来越多采用广告拦截器的担忧。 但这是另一回事了。 我们可能应该总结一下。

交给你...

哇。 我们在这里覆盖了很多领域。

谢谢你坚持我。 希望您觉得这很有用,我回答了您有关Google AMP项目的所有问题。

如果没有,请在下面的评论中给我留言。 另外,如果您有什么要补充的内容,或者如果我错过了什么,请发表评论。

无论哪种方式,我都希望收到您的来信。