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

2018-8-22 刀客 经验分享

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

在最近举行的谷歌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倍。

2.jpg

3.jpg



WordPress 
对于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的全新用户体验界面。
4.jpg

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页面网址的计划。AMP项目合作伙伴Food Network和Pinterest已经构建了演示以展示Web包装的功能;为了简化这个过程,他们使用了一套新的工具,可在
https://github.com/ampproject/amppackager上找到。

5.gif

如何检查AMP是否实施成功 
- 检查您网站的最高比率着陆页面的用户来源,是否有因AMP而提升
- 检查谷歌分析工具,当用户浏览AMP页面的时候,用户的时长还有浏览页数是否有增加
- 检查用户从AMP页面退出后,去了哪里
- 检查最新的新闻以及搜索的文章是否有安装AMP
- 检查是否有大量无效的AMP(客户端要通过Webmaster Search Console检查)
- 检查网站界面是否能激励用户继续浏览,比如投放匹配内容广告,优化界面等等

为什么安装AMP后,网站用户数下降? 
一些发布商反应,在安装AMP之后发生了用户数和访问会话计数减少的现象。原因是由于在安装AMP后,网站里的AMP和非AMP用户访问的次数被统一,所以不仅先前说到的两个指标发生了变化,随着时间的推移,系统也会判断出两个以前不同的ID实际上是同一个用户,所以所有的会话次数也会减半。

此外,在网站停留时间上,每次平均用户的网页浏览量和跳出率等指标也会像先前的AMP浏览量一样暂时受影响。但是这是一次性的,所以当过去的用户重新回到您网站浏览时,这些数据就会得到统一(这可能需要很长的时间,具体取决于用户返回您的网站的速度)。

参考文档 
https://www.ampproject.org/zh_cn/
https://ampbyexample.com/
https://developers.google.com/web/progressive-web-apps/

标签: AMP 移动页面 PWA

二维码加载中...
本文作者:刀客      文章标题: 如何优化移动页面,你需要了解AMP和PWA
本文地址:http://dao.ke/experience/40.html
版权声明:若无注明,本文皆为“刀客”原创,转载请保留文章出处。

发表评论:

© 2018 | Powered by 刀客