如何优化移动页面，你需要了解AMP和PWA
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页面。
电子商务公司巨头AliExpress也通过在全部移动网站实施AMP而获得了巨大的成功。特别是他们将之前非搜索流量的转换率提高了31%。也有许多网站通过结合AMP和PWA形成了一种强大的使用模式，比如说BMW.com，他们通过在PWA里来加载定制全AMP的内容来实现无间隙和快速的用户体验。通过测试，宝马网站的网站点击率提高了30%，整体移动用户增加了26%。从SEO带来的流量比之前多了50%。像腾讯这样的新闻内容网站最近推出了完全由AMP构建的站点，网站浏览量增加了两倍，每个用户的总网站页面浏览量增加了3.5倍。
对于WordPress发布商来说，系统能够支持CMS生态系统是至关重要的。Automattic，XWP和谷歌正在共同推进WordPress AMP插件。最近推出的0.7版本包括AMP支持，允许使用标准的WordPress内容创建工作流程创建整个网站。但还有许多工作需要继续进行，下一个主要版本v1.0已经在积极开发中。
中国AMP生态
说到CDN – 内容分发网络， 可能大家会问如何在中国使用AMP技术？在过去的几年里，谷歌与国内多家平台共同构建了一个高速移动网页的生态环境，促使了AMP在覆盖性和效果得到了突破性的支持和提升。
如果大家选择不在全站安装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
<title My AMP Page</title
…
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项目合作伙伴Food Network和Pinterest已经构建了演示以展示Web包装的功能；为了简化这个过程，他们使用了一套新的工具，可在https://github.com/ampproject/amppackager上找到。
如何检查AMP是否实施成功
-?检查您网站的最高比率着陆页面的用户来源，是否有因AMP而提升-?检查谷歌分析工具，当用户浏览AMP页面的时候，用户的时长还有浏览页数是否有增加
-?检查用户从AMP页面退出后，去了哪里
–?检查最新的新闻以及搜索的文章是否有安装AMP
–?检查是否有大量无效的AMP（客户端要通过Webmaster Search Console检查）
–?检查网站界面是否能激励用户继续浏览，比如投放匹配内容广告，优化界面等等
一些发布商反应，在安装AMP之后发生了用户数和访问会话计数减少的现象。原因是由于在安装AMP后，网站里的AMP和非AMP用户访问的次数被统一，所以不仅先前说到的两个指标发生了变化，随着时间的推移，系统也会判断出两个以前不同的ID实际上是同一个用户，所以所有的会话次数也会减半。
此外，在网站停留时间上，每次平均用户的网页浏览量和跳出率等指标也会像先前的AMP浏览量一样暂时受影响。但是这是一次性的，所以当过去的用户重新回到您网站浏览时，这些数据就会得到统一（这可能需要很长的时间，具体取决于用户返回您的网站的速度）。
腾讯云开发者
