AMP完整指南:来自10个案例研究的经验教训

通过Eric座2019年2月14日

AMP的理由

我们很高兴在谷歌加速移动页面(AMP)的主题上提供最丰富的资源集合之一。在这里，我们通过与10家不同的公司交谈了解到的情况，这些公司在其页面的主要部分或几乎所有页面上都实施了AMP。

此外，还有其他一些值得探索的资源:

AMP技术指南，提供细节如何成功实施AMP
我们与WompMobile的联合研究评估了AMP会对性能、用户粘性和流量产生影响．这项研究调查了26个域名和900多万个AMP页面，以确定它们的影响。
10个具体的案例研究，探讨了不同网站在AMP上取得成功的具体故事

本页研究的十个案例研究的TL;DR表明，对于绝大多数遵循AMP的完整实施的公司来说，都有很好的或非常强的结果。然而，“完整实现”的定义可能不是您所期望的(请继续阅读，看看这意味着什么)。

在我们的研究中，每位参与者都分享了他们使用AMP的许多细节，包括实施问题和结果指标。因此，本研究将帮助您了解:

实现AMP的潜在好处
这需要多少努力
一些挑战的解决方案
你潜在的投资回报率可能是什么样子

谷歌AMP是什么?

AMP是加速移动页面的首字母缩写谷歌宣布2015年10月7日
它的目标是为web开发人员提供简单的方法来创建闪电般的网页
虽然谷歌赞助了它，但它是一个开源计划
其他参与者包括必应、百度、Pinterest、Twitter等
它最初专门针对移动页面，但可以用于任何类型的网页
它最初也只针对新闻/媒体网站，但现在可以在所有类型的网站上使用
诸如此类的研究表明，用户在AMP网站上的参与度高于非AMP网站

回顾:为什么页面速度如此重要

你已经听过很多次了:网络速度很重要。许多人并没有完全意识到，对于大多数移动设备来说，页面加载时间的挑战要比大多数桌面环境大得多。AMP的核心目标之一就是创造公平的竞争环境。快速站点的实际优势是什么?让我们一起来看看:

网站比较

显然，速度是很重要的。仅从这些数据就可以看出这对用户有多重要。但人们也开始在搜索结果中认出AMP闪电符号，正如这项正在进行的民意调查所显示的那样9 to5google.com：

对于大多数移动设备来说，页面加载时间的挑战要比大多数桌面环境大得多。

AMP确实让网站的速度快了很多。我们将在文章中详细说明为什么会发生这种情况你的网站是否应该采用AMP．因此，从理论上讲，AMP应该为实施它的人提供显著的好处。

除了速度之外，AMP适用于新闻网站的原因很清楚:AMP新闻旋转木马(AMP news Carousel，也称为桌面设备上的Top Stories)创造了巨大的增量流量机会。该旋转木马中的位置仅对AMP页面可用，它代表了与正常serp相比的巨大UI变化，如下所示:

崇高和平奖

新闻传送带的结果令人信服。以下是我们在三大新闻网站上看到的结果:

属性表

Thrillist是一个涵盖食品、饮料、旅游、娱乐的在线媒体品牌。该公司成立于2004年，总部位于纽约市。它转换了所有的文章和场所页面，占网站页面的90%。

它在AMP的第一次测试花了一周的时间，但只有非常基本的造型。第二阶段花了三周时间，其中包括了更多的样式，并实现了更复杂的功能，如事件跟踪和社交共享。

与其他早期采采者不同，Thrillist在广告方面没有遇到重大问题，但这得益于它自己销售广告的事实。从历史背景来看，其他公司在广告客户可用性方面存在问题，因为AMP要求所有内容都运行https，而一些广告网络支持速度较慢。这个问题现在基本上已经解决了。

总体而言，Thrillist的流量增长了70%，其中50%的增长来自AMP。不用说，它对AMP投资的投资回报率非常满意。详细的案例研究AMP的惊悚体验可以在这里找到．

另一家大型媒体出版商(该研究的匿名参与者)也在定制平台上实现了AMP。它最终将95%的文章转换为AMP。有一些文章不容易转换为AMP，因为它们包含更复杂的交互组件，不容易转换。

这家发行商是高度受参数驱动的，每页收益是它密切监控的内容。在早期，每页的收入较低，因为不同的广告格式和广告商很难成为amp的准备者，但这不再是一个大问题。

其中一个较大的网站谷歌有机流量增长了20- 40%，另一个则增长了67%左右。总体而言，该发行商在AMP上的投资确实获得了回报。

AMP神话

就这样了吗?AMP只针对新闻网站?还是我们都应该按照谷歌的要求去做?我们是否必须生活在精简版的网站中?好了，现在是时候探索关于AMP的四个主要神话了。

神话1。AMP只对新闻网站有利

AMP的最初版本非常强调新闻网站，AMP新闻旋转木马(也就是桌面设备上的顶级故事块)为他们提供了一个主要的流量激励。但事实证明，许多其他类型的网站也可以从中受益。

一个例子是NoBroker该公司总部位于印度，为租客和潜在租客牵线搭桥，不需要中间人。NoBroker于2016年12月推出了AMP实现。结果，该网站的每次会话页面数和会话时间都增加了10%，而跳出率下降了18%。

也许更重要的是，它在租户和租房者之间建立的联系数量增加了77%。这是一个了不起的结果!你可以在上面阅读完整的故事NoBroker使用AMP的经验．

这一课

AMP不仅适用于新闻网站。对于商业网站来说，这也是一件很棒的事情。

神话2。AMP不能在电子商务网站上使用

电子商务网站的一个大问题是，它们通常需要大量的交互性。事实上，这曾经是一个合理的抱怨。

但是AMP Live List组件和AMP绑定组件改变了这一切。这使得一个新的互动和动态组件的世界成为可能，这在以前是不可能的。

考虑下面的例子Myntra是印度最大的时尚电子零售网站。该公司于2017年5月实施了AMP。转换该网站的主要产品列表(类别)页面大约需要7天，转换主页需要3到4天。

产品列表页面占有机SEO和SEM流量的三分之二，首页占20%。此外，它还为其网站的其余页面构建了一个渐进式web应用程序(PWA)实现。

这在Myntra的网站速度故事中扮演着重要的角色，因为PWAs包括一个称为service worker的组件，它在用户点击链接请求页面之前在后台预加载页面。因此，当用户对新页面的请求通过时，该页面已经部分或完全加载，这也提供了显著的性能优势。

产品列表页面的加载时间下降了65%，这些页面的跳出率也下降了40%。整体移动收入贡献也有所上升。

AMP-bind组件非常重要，因为它实现了健壮的产品排序和过滤。Myntra正在继续扩展该组件的使用。此外，在2017年9月，它推出了PWA + AMP(又名PWAMP)实现，因此其PWA页面现在也都符合AMP。

总的来说，Myntra的结果非常强劲。你可以阅读更多关于Myntra AMP案例研究．

这一课

AMP可以很好地与电子商务网站合作。事实上，它可以提供强大的转换优势。用户喜欢速度。更快的电子商务网站将更好地转换。

你可能会说，当然，Myntra的效果很好，因为印度的许多用户都在使用2G手机。但请记住，人们喜欢更快的网站。

我们采访了eBay高级总监Pete Dainty，虽然我们无法完成这项研究的完整资料，但他给出了以下评论:

“eBay在AMP上投入了大量资金，并将继续全力投入。(我们)专注于将AMP推广到我们网站的更多地方，我们知道加快页面速度有助于改善客户体验，从而实现更好的电子商务转换。”

你是否认为UI妥协仍然是个问题?继续阅读下一个流言。

神话3。建立它，他们就会来

有一些公司想要尽早赶上潮流，因为他们想要利用谷歌所发出的任何重大浪潮。

我们的研究参与者之一，海滩小屋康复中心有这种心态。它的网站在WordPress上，它用AMP自动插件做了一个初始的AMP实现。这并没有提供它所寻找的定制级别，所以它切换到AMP for WordPress插件。

由此产生的初始指标并不好:

然而，事实证明，这是由于两件事情的执行不正确，这很容易解释为什么指标看起来很弱:

分析设置不包括“会话拼接”修复，这基本上意味着跟踪是错误的。你可以了解更多AMP分析问题是什么，以及会话拼接如何修复它，在这里．
AMP页面上的主菜单坏了，显示了一组不合逻辑的页面。因此，点击汉堡菜单的用户不太可能点击那里的任何东西。
这些页面根本无法访问侧栏菜单或任何CTA。

这三个问题很容易解释为什么最初的指标很差。我们与Beach House合作，帮助它解决了所有这些问题。你可以阅读完整的故事在实现上出了问题，以及如何解决问题．

这一课

如果你要实现AMP，你必须遵循完整的实现完全正确。在Beach House的情况下，会话拼接修复在最初构建AMP页面时甚至不可用。这意味着精确跟踪AMP页面上发生的事情是不可能的。现在，修复从谷歌可用，它已经实现，我们应该能够获得更好的统计数据。

神话4。AMP网站损害了我的网站设计

这是最流行的谬论之一。事实上，再看看上面分享的9to5Google图表。第一个回答的措辞很吸引人:“是的，在阅读时，我更喜欢精简版的网站”。真的吗?让我们来探究一下为什么情况不一定如此。

这里有一个事实:如果你在AMP-iframe中使用非amp元素(这通常是某种交互式元素)，你必须将其放置在视口高度的75%以下，除非你有一个占位符，然后你可以把它放在页面的任何地方。

这个神话流传至今的一个原因是WordPress插件确实提供了一个精简版的页面。下面是一个由插件生成的AMP文章的例子，在Perficient Digital网站上，与它的AMP页面进行了比较:

amp

所以，是的，它看起来被剥离了。但这是AMP的产物，还是插件的产物?我们决定一探究竟。与我们的web开发人员合作，我们能够生成一个看起来非常像我们的移动响应页面的页面:

amp

您将看到两页之间的一些小差异，但所有这些都可以通过再花两个小时的努力来解决。在创建这个页面的过程中，我们证明了这一点:在AMP页面中不需要不同的UI。事实上，我认为我们在AMP版本中添加的“Toggle Sidebar”功能使其成为一个优秀的UI。更棒的是，我们手工生成的页面是完全响应的，所以如果我们愿意，我们甚至可以使用这个页面作为我们的桌面页面。最后，但并非最不重要的是，以下是三个版本的页面大小的比较:

如您所见，手工页面的大小与同一页面的其他两个版本相当。

这一课

没有理由让你的AMP页面看起来与你的移动响应页面不同。这只是一个你投入多少努力的问题。这里有个点睛之笔:如果你有两个版本的页面看起来一模一样，其中一个比另一个快得多，用户会更喜欢哪个呢?不，这不是一个陷阱问题。他们会喜欢快一点的。

如果一个页面有两个看起来完全相同的版本，其中一个比另一个快得多，用户会更喜欢哪个版本呢?他们会喜欢快一点的。

所有参与者的调查结果总结

在观察了10个不同的第三方网站的实现后，以下是我们的汇总发现:

黄色背景的项目显示了负面结果，但这两个项目都是由执行问题引起的。其中一个被标记为红色，因为它还没有成功启动页面。它在完整的UI实现完成之前发布了一个初始版本，结果并不好，所以它撤回了初始版本。

对于这个特定的站点，获得正确的实现被证明是困难的。然而，该公司仍在努力，他们预计很快就会重新推出这些页面。

另一个“负面”的例子是Beach House，我们之前提到过，我们相信我们已经帮助他们解决了问题，他们正在从他们的AMP经验中获得积极的结果。

与我们交谈过的其他网站发行商都获得了不错或很棒的结果。还有一个网站认为回报并不高，但根据它自己的承认，这是因为它是一个非常早期的采用者，为了达到这个目标，它必须做出很高的投资。它实际上最终取得了很好的效果，但它经历了更多的努力，因为他们在AMP不像今天这样发达的时候与它合作。

使用AMP成功需要什么

有了手工编写AMP的经验，并考虑到我们在帮助公司实现AMP方面的总体经验，以及我们在这项研究中所学到的东西，以下是关于成功使用AMP的一些关键观察结果。

1.正确分析。
如果您正在使用谷歌Analytics，会话缝合是一个关键问题。没有它，你的分析就会出错。简而言之，谷歌分析将看到访客到您的AMP页面作为一个不同的网站。你的AMP页面将显示糟糕的用户粘性指标的结果。要衡量AMP页面的使用情况，您需要获得准确的数据!
2.执行一个完整的实现。
根据您的网站，这可能是一个困难的命题，但它是值得的。让我用一个简单的思维实验来解释。如果你有一个在6秒内加载的移动响应页面，和一个具有相同外观和感觉的AMP页面，在一秒内加载，你认为哪一个会获得更好的用户粘性?
3.做好处理异常的准备。
在一些外部帮助下，我们在Perficient Digital网站上工作，很快就为我们的一个博客页面提供了一个基本模板。然后，我们开始构建一个程序，在其他博客文章页面上复制这个模板，就在那时，我们开始遇到一个又一个的边缘情况。一个页面有一个视频，另一个页面在一个表格中有一个特殊的“As Seen In”图像块，还有一个页面有块引号——所有这些都不是我们页面的标准。我们还有很多这样的例子。我很快就明白了，这是一些网站可以花费大量时间的地方。
4.学习如何整合动态。交互组件。
如果你在你的网站上处理大量的互动或动态元素，准备好学习处理这些的各种策略。你可能需要考虑的事情包括:
这组工具为您提供了广泛的方法来处理许多复杂的网站交互和动态行为。
5.验证页面。
在推送页面之前，花点时间验证页面。我们更喜欢使用AMPproject.org验证器，因为它的互动性很强。