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

2018年6月13日23:23:07 发表评论 53 阅读
       AMP(Accelerated Mobile Pages),简单来说就是一种能够加快移动端页面呈现速度的技术,它也是一项HTML标准,可以用来创建高质量,高用户体验的网站。这几年移动网络技术的发展有限,确实在界面上没有像原生应用更易操作,而且当网络信号受影响时,网页的加载速度及用户体验都会减慢。
如何优化移动页面,你需要了解AMP和PWA
         在最近举行的谷歌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>

<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上找到。

七、如何检查AMP是否实施成功

检查您网站的最高比率着陆页面的用户来源,是否有因AMP而提升检查谷歌分析工具,当用户浏览AMP页面的时候,用户的时长还有浏览页数是否有增加

检查用户从AMP页面退出后,去了哪里

- 检查最新的新闻以及搜索的文章是否有安装AMP

- 检查是否有大量无效的AMP(客户端要通过Webmaster Search Console检查)

- 检查网站界面是否能激励用户继续浏览,比如投放匹配内容广告,优化界面等等

八、为什么安装AMP后,网站用户数下降?

      一些发布商反应,在安装AMP之后发生了用户数和访问会话计数减少的现象。原因是由于在安装AMP后,网站里的AMP和非AMP用户访问的次数被统一,所以不仅先前说到的两个指标发生了变化,随着时间的推移,系统也会判断出两个以前不同的ID实际上是同一个用户,所以所有的会话次数也会减半。
此外,在网站停留时间上,每次平均用户的网页浏览量和跳出率等指标也会像先前的AMP浏览量一样暂时受影响。但是这是一次性的,所以当过去的用户重新回到您网站浏览时,这些数据就会得到统一(这可能需要很长的时间,具体取决于用户返回您的网站的速度)。
参考文档
  • https://ampbyexample.com/

 

itdog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: