将网页转换为AMP的终极指南

网页转换为AMP

不久前,谷歌宣布网站速度将成为搜索排名因素。之后,他们宣布移动友好性也是一个排名因素,可能更重要。毕竟,越来越多的用户通过移动设备部分或全部浏览,因此没有移动友好页面可以减少一堆潜在的流量。

现在,这两件事情正在结合。KISSMetrics已经表明,如果加载时间超过约三秒,则40%或更多的网络访问者将放弃您的网站。花费的时间越长,您丢失的流量就越多。

虽然这是网站长期以来的常识,但人们不一定将其应用于移动浏览。对于大多数普通的浏览器来说,桌面网站基本上都非常快。当然,有些人仍然拥有超慢速DSL 甚至拨号连接,但这些都是例外; 网站的速度受到接收的限制,而非您的规定。

但是,移动网站的加载时间往往更长。首先,蜂窝网络,甚至4G或5G或7G或我们现在所做的任何品牌,都有限的吞吐量和较慢的下载速度。它们也不能很好地处理多服务器连接,这意味着将内容和脚本放在CDN上可能会加剧使用多个域来提供内容的问题。广告也是一个重要因素; 许多移动广告服务并不关心速度,有些网站 – 我正在看着你,wikia网络 – 经常与广告相结合,在五分钟内看到你想看到的内容可能是一件苦差事。脚本也是一个问题,移动设备无法应对编码不良的脚本。

谷歌提供了整个问题的解决方案,但它不一定是每个人的理想解决方案。

解决方案
解决方案是AMP或Accelerated Mobile Pages。AMP,或众所周知的AMP项目,是由Google赞助和推广的一项计划,得到其他公司的支持,包括DoubleClick,OutBrain,Adobe,Quantcast,LinkedIn,Reddit,WordPress,Vimeo等。这是一个开源计划,旨在标准化网站上快速,反应性的代码。

AMP统计数据
对于那些年龄较大的开发人员,他们可能在网络发展初期就已经存在并处于活跃状态,您可能还记得HTML是网站唯一拥有的东西。脚本很少见,内容直接提供,格式化由HTML命令处理,如color =“blue”,多媒体是一个梦想。然后推动推进HTML并标准化网络的某些方面。这就是我们获取CSS之类的东西来替换笨重的HTML参数。这就是我们如何演变成标准化脚本,CSS3,HTML5以及其他此类Web的现代化和标准。

您可能还记得一些“失败”的举措。Google之前为网络添加另一层标准化的尝试是Schema.org,它的工作原理和效果都很有效,但对大多数网站来说,这并不是一个明显的好处。

AMP同时就像所有这些一样。这是一种在新范例中标准化网络的推动力,但它背后有很大的价值。这是一种从头开始创建或重建网站的方式,以便它适应移动设备,更重要的是,它可以非常快速地提供内容。这样的想法是,移动用户可以立即或尽可能地立即提供内容,为他们提供强大,用户友好的体验。

当然,它对商业有利。您不仅可以避免流量下降,还可以为未来做好准备。在去年12月,谷歌暗示使用AMP 最终可能是一个排名因素,他们从未对Schema或任何其他代码计划做过这样的事情。这是巨大的,如果它发生,它可以得到回报,尽快修改你的网站。

AMP如何工作
AMP不会取代您现有的网站。可以想象它与移动网站在响应式设计出现之前的工作方式类似。www.m.website.com上的一个网站是一个完全不同的页面,如www.website.com,具有相同的内容,为移动用户剥离。

AMP以类似的方式工作,由2-3个组件组成。

AMP HTML。这是您可以使用的HTML子集。它限制了在移动设备上使用不起作用,效果不佳或工作缓慢的命令和代码。你可以在这里阅读所有相关内容。您也仅限于简化的CSS版本。
AMP JS。AMP HTML是为快速移动使用而设计的HTML的子集,AMP JS是JavaScript的一个子集,其工作方式相同。它是一个特定的JS库,可用于编写脚本。例如,它要求异步加载来自外部源(如CDN)的内容。
AMP CDN。这是Google提供的内容交付网络和缓存,使用其无限的计算资源。它缓存AMP内容并进行一些自动性能增强。您可以在其上放置任何或所有AMP内容,包括HTML文件,任何JS文件和所有图像。然而,对于您的AMP页面来说,这是一个全有或全无的事情,这就是为什么它是可选的。如果您的网络服务器足够快,如果您不想要,则根本不需要使用Google的AMP CDN。
这是一个实例。根据Pingdom的说法,The Guardian的这篇文章是一个普通的HTML页面,需要将近5秒的时间才能完全加载,尽管其中很多都是加载广告和嵌入式Twitter内容。实际将内容加载到可见性的时间要短得多。现在这个链接是通过AMP加载的同一篇文章。顺便说一句,您可以将/ amp添加到任何Guardian URL的末尾以查看移动版本。根据Pingdom的说法,这篇文章的速度测试是886毫秒。它有53个请求,页面大小为482 kb,而桌面版本则有248个请求和2.3 MB的页面大小。你可以看到一个直接的区别。

有和没有AMP
需要注意的一点是,您仍然可以在AMP页面上投放广告,您只需通过其中一个AMP平台使用AMP格式的广告。许多主要广告网络都在不同程度上支持AMP,但如果您有自定义广告解决方案,则需要与开发人员合作,在AMP中正确编码并将其添加到AMP支持的列表中。

使用AMP有一些缺点。首先,您必须先验证任何AMP页面,然后才能完全使用它。您还必须特殊加载自定义字体,声明图像的尺寸以及一些其他编码怪癖。也许最重要的是,你不能使用表格。目前还没有允许选择加入,但我预计谷歌会最终添加AMP安全的方式来获取信息。

转换为AMP
首先,如果您不是开发人员,我的建议是联系开发人员。AMP非常复杂且足够严格,以便找到熟悉系统的人来帮助您快速启动和运行,而不是自己慢慢地使用它。它不像学习一种全新的编码语言,但它很接近。

AMP准备就绪的最简单途径是创建一个全新版本的网站,一种影子副本,用于在AMP中复制您的网站。您的桌面页面不会更改,但移动用户将被定向到AMP版本而不是桌面或其他移动版本。如果您已经使用了响应式设计,请不要担心; 你可以保持原样并将AMP版本叠加在它上面,不存在任何冲突。

如果您使用WordPress,实现AMP的绝对最简单的方法很容易。您所要做的就是下载官方的AMP WordPress插件。现在,请记住AMP正在积极开发中。他们每周四推送更新,这意味着您的插件将很快过时。您需要定期更新插件,但不一定每周都需要这样做。

AMP WordPress插件
安装插件后,您可以通过在网址末尾添加/ amp来测试您的AMP网页是否正常工作。或者,如果您没有人类可读的永久链接并使用参数,则可以在末尾添加?amp = 1进行测试和查看。

你还没完成。您仍然需要验证您的AMP页面,为此,您需要使用官方验证器。您可以在此处找到各种选项 – 命令行,Web界面,开发人员控制台等 – 以及使用它和修复错误的文档。

如果您不是WordPress用户,但您是开发人员,该怎么办?在那种情况下,你已经为你完成了工作。一个很好的起点是基本的AMP教程,它将帮助您通过制作一个支持AMP的HTML页面。它详细介绍了您可以使用和不能使用的HTML和CSS,以及包含图像和媒体以及修改基本AMP模板的技巧。在该页面的左侧,您还会看到其他指南,包括如何使用iframe,如何使用第三方内容以及如何为AMP页面配置分析。所有这些都非常重要。

转换HTML页面
如果您想使用表单,可以在此处选择加入AMP开发人员频道。您需要在amp-form上切换。这将允许您在实验基础上使用AMP表单参数。不幸的是,除非他们也选择使用,否则它们不适合您的用户,并且任何使用实验性AMP功能的文档都不会通过验证。当表单功能离开实验开发并进入核心项目时,这只是创建AMP就绪表单页面的一种解决方法。

你应该关心AMP吗?
一天结束时最大的问题是你是否应该关心或继续使用AMP。谷歌正在大力推动它,但他们还没有把它作为核心排名信号,甚至创建一个类似熊猫的实验二级过滤器来测试结果。换句话说,不使用AMP不会伤害你,但使用它可以帮助你。

以下是一些指导原则,看看是否应该将时间和资金投入到实施中。

主要问题是您是否已经拥有快速加载的网站移动版本。如果你这样做 – 并且通过快速加载我的意思是不到2秒 – 你是明确的。您可能不需要关心AMP。目前,AMP只有利于网站的搜索排名,因为它是一种加速网站和移动准备的方式,这两者都是自己的搜索因素。无论您是使用AMP还是使用自己的自定义代码执行此操作都无关紧要,只要移动用户可以查看它并为所有用户快速加载即可。

接下来,你是那种喜欢随时都处于新事物前沿的人吗?你是花哨的HTML5和CSS3效果的早期采用者吗?您是否在您的利基之前使用视频营销和社交媒体?如果是这样,请务必深入了解AMP。它可能不会产生直接的有益效果,至少在您的网站已经快速加载时不会如此,但它为Google决定AMP应该是自己的排名因素的那一天做好准备。

最后,你关心手机吗?当然有一些网站,例如B2B品牌和网站被用于信息目的,而不是商业目的,并不真正关心移动用户。如果你不这样做,也不会关心移动设备,请继续忽略AMP,或者至少等一下,看看结果如何。