如何优化移动页面，你需要了解AMP和PWA

2018年6月13日23:23:07 发表评论 447 阅读

AMP（Accelerated Mobile Pages)，简单来说就是一种能够加快移动端页面呈现速度的技术，它也是一项HTML标准，可以用来创建高质量，高用户体验的网站。这几年移动网络技术的发展有限，确实在界面上没有像原生应用更易操作，而且当网络信号受影响时，网页的加载速度及用户体验都会减慢。

在最近举行的谷歌I/O开发者大会上，AMP团队成员针对于如何建立良好的AMP社区进行了重点分享。像amp-bind和amp-position-observer这样的组件为开发人员提供了在AMP页面上创建丰富交互性的工具，除了摒弃之前需要一直依赖更加狭义的组件和低级框架之外，AMP一直致力于使复杂的交互变得更加容易。amp-fx-collection捆绑了一些像视差滚动一样的行为来供发布商来投放；amp-date-picker现在正在测试，将全功能日期选择器的复杂性卸载到一个简单的组件上；并以amp-lightbox-gallery做实验，允许任何开发人员都可以轻松为用户提供无间隙、身临其境的多媒体盛宴。

一、AMP的发展与现状

事实上，AMP的发展已经让其变成了构建网站的可行解决方案，迄今已发布数十亿个AMP页面。

电子商务公司巨头AliExpress也通过在全部移动网站实施AMP而获得了巨大的成功。特别是他们将之前非搜索流量的转换率提高了31%。也有许多网站通过结合AMP和PWA形成了一种强大的使用模式，比如说BMW.com，他们通过在PWA里来加载定制全AMP的内容来实现无间隙和快速的用户体验。通过测试，宝马网站的网站点击率提高了30%，整体移动用户增加了26%。从SEO带来的流量比之前多了50%。像腾讯这样的新闻内容网站最近推出了完全由AMP构建的站点，网站浏览量增加了两倍，每个用户的总网站页面浏览量增加了3.5倍。

二、WordPress全力支持AMP

对于WordPress发布商来说，系统能够支持CMS生态系统是至关重要的。Automattic，XWP和谷歌正在共同推进WordPress AMP插件。最近推出的0.7版本包括AMP支持，允许使用标准的WordPress内容创建工作流程创建整个网站。但还有许多工作需要继续进行，下一个主要版本v1.0已经在积极开发中。

三、中国AMP生态

说到CDN - 内容分发网络，可能大家会问如何在中国使用AMP技术？在过去的几年里，谷歌与国内多家平台共同构建了一个高速移动网页的生态环境，促使了AMP在覆盖性和效果得到了突破性的支持和提升。

四、AMP与PWA结合的使用方案

如果大家选择不在全站安装AMP的话，本文会建议大家将AMP技术应用在用户浏览的热点内容页面，通过优质的网页速度将用户带入网站。大量实验案例表明这样做能够降低用户的跳出率。在页面和页面的联系之间，发布商需通过优质的内容将用户留在站内。一般通过用AMP-install-serviceworker组建，当用户浏览AMP页面时，通过Serviceworker，这样他们在站内点击其他网页时，发布商可以通过用户粘性效应，将他们带入PWA的全新用户体验界面。

五、AMP全自动广告

2月27日谷歌推出自动广告后，其实施得到了广泛的认可。目前对于AMP的网页而言，在其投入自动广告的操作上需注意以下几点：

1. 您只需将<amp-auto-ads>广告代码放置在要展示AMP锚定广告/文字广告/展示广告的每个网页中，放置一次即可。

2. 加入“link”标记：例如，假设您有一个网站example.com，

并在example.com/amp/下托管每个网页的AMP版本。您需要在每个AMP网页和非AMP网页的<head>中添加<link>标记，以表明哪些内容同属一体。

在非AMP网页example.com/news中：<link rel="amphtml"

href="http://example.com/amp/news">

在AMP网页example.com/amp/news中：<link rel="canonical"

href="http://example.com/news">

3. 如果您在单独的网站上托管AMP内容，则您必须为所有非AMP网页添加<link>标记，以便AdSense可以发现相关的AMP网页。

六、如何实现AMP自动广告

针对您要展示AMP自动广告的每个网页，按以下步骤操作。您发布<amp-auto-ads>广告代码后，AMP自动广告将会在几分钟之内开始展示。

1. 将amp-auto-ads脚本放置在网页的<head>中<head>

<script async
custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

…

2. 紧跟在起始<body>标记之后放置amp-auto-ads广告代码。</head>

<body>

<amp-auto-ads type="adsense" data-ad-client="ca-pub-123456789123456"></amp-auto-ads>

...

</body>

小贴士

- 目前AMP自动广告仅支持文字广告和展示广告，并且只能在移动端上展示。- AMP自动广告将根据您网页上的内容量展示适当数量的广告，同时会考虑到您已经拥有的任何硬编码<amp-ad>。

AMP域名

我们了解到许多发布商都对AMP域名的显示方式非常重视，像今年早些时候，谷歌分享了如何从谷歌搜索改进AMP页面网址的计划。AMP项目合作伙伴Food Network和Pinterest已经构建了演示以展示Web包装的功能；为了简化这个过程，他们使用了一套新的工具，可在https://github.com/ampproject/amppackager上找到。