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

2021-06-24

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

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

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

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

然而,移动网站的加载时间往往更长。一方面,蜂窝网络,即使是 4G、5G 或 7G 或我们目前使用的任何品牌,其吞吐量都有限且下载速度较慢。它们也不能很好地处理多服务器连接,这意味着将内容和脚本放在 CDN 上会加剧使用多个域来提供内容的问题。广告也是一个重要因素。许多移动广告服务并不关心速度,而且有些网站——我正在看着你,维基网络——通常都充满了广告,在五分钟内看到你想看到的内容可能是一件苦差事。脚本也是一个问题,因为移动设备无法处理编码不佳的脚本。

整个问题的解决方案是由 Google 提供的,但它不一定对每个人都是理想的解决方案。

解决方案

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

AMP 统计数据

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

您可能还记得一些“失败”的举措。Google 之前尝试为 Web 增加另一层标准化的是 Schema.org,它在其功能上有效且有效,但对于大多数网站而言,这并不足以带来切实的好处。

AMP 既喜欢又不喜欢所有这些。它推动了以新范式标准化网络,但它背后有很多价值。这是一种从头开始创建或重建网站的方法,以便它迎合移动设备,更重要的,它可以非常快速地提供内容。这个想法是为了让移动用户可以立即或尽可能接近立即获得内容,为他们提供强大的、用户友好的体验。

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

AMP 的工作原理

AMP 不会取代您现有的网站。以类似于响应式设计出现之前移动网站的工作方式来思考它。www.m.website.com 上的网站与 www.website.com 是一个完全不同的页面,具有相同的内容,为移动用户精简。

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

  1. AMP HTML。这是您可以使用的 HTML 子集。它限制了在移动设备上不起作用、运行不佳或运行缓慢的命令和代码的使用。您可以在此处阅读所有相关内容。您还只能使用简化版的 CSS。
  2. AMP JS。AMP HTML 是专为快速移动使用而设计的 HTML 子集,而 AMP JS 是工作方式相同的 JavaScript 子集。它是一个可用于编写脚本的特定 JS 库。例如,它要求异步加载来自外部源(如 CDN)的内容。
  3. AMP CDN。这是一个由谷歌提供的内容交付网络和缓存,使用他们几乎无限的计算资源。它缓存 AMP 内容并进行一些自动性能增强。您可以在其上放置任何或所有 AMP 内容,包括 HTML 文件、任何 JS 文件和所有图像。不过,对于您的 AMP 页面来说,这是一个全有或全无的事情,这就是为什么它是可选的。如果您的网络服务器速度足够快,那么您根本不需要使用 Google 的 AMP CDN。

这是一个正在运行的示例The Guardian 的这篇文章是一个普通的 HTML 页面,根据 Pingdom 的说法,它需要将近 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 插件

安装插件后,您可以通过在 URL 末尾添加 /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,或者至少等待看看结果如何。

--- END ---


( ! ) Warning: realpath(): open_basedir restriction in effect. File(/www/server/panel/tmp) is not within the allowed path(s): (/www/wwwroot/www.hqtweb.com/:/tmp/) in /www/wwwroot/www.hqtweb.com/wp-includes/functions.php on line 2124
Call Stack
#TimeMemoryFunctionLocation
11.103936873904shutdown_action_hook( ).../load.php:0
21.103936873904do_action( $hook_name = 'shutdown' ).../load.php:1260
31.104036874280WP_Hook->do_action( $args = [0 => ''] ).../plugin.php:517
41.104036874280WP_Hook->apply_filters( $value = '', $args = [0 => ''] ).../class-wp-hook.php:348
51.104636834888wpcf7_cleanup_captcha_files( ).../class-wp-hook.php:322
61.104636834888wpcf7_init_captcha( ).../really-simple-captcha.php:555
71.104636835176ReallySimpleCaptcha->__construct( ).../really-simple-captcha.php:396
81.104636836192path_join( $base = '/www/wwwroot/www.hqtweb.com/wp-content/plugins/really-simple-captcha', $path = 'tmp' ).../really-simple-captcha.php:46
91.104636836192path_is_absolute( $path = 'tmp' ).../functions.php:2154
101.104636836192realpath( $path = 'tmp' ).../functions.php:2124