Return to site

Progressive Web Apps如何在2018年统治移动电子商务

· seo优化

自2015年起,Google推出了渐进式网络应用程序(PWA)作为品牌增加流量和移动转化率的选项。

根据最近的一项研究,100毫秒的延迟可能使网站的转换率降低7%,谷歌经常重申,当涉及到吸引消费者注意力时,每一秒都很重要。

通过卓越的用户体验照顾您的客户也可以获得排名提升,谷歌在今年7月宣布, 页面速度将正式成为移动排名信号。

关于采用PWA的讨论在一些行业和品牌中仍处于起步阶段,可能是因为该技术仍然相对年轻,PWA能力问题仍然存在。

例如,现在只有Apple正在改进其Web浏览器引擎以处理PWA的关键功能。随着这些障碍开始消散,网络开发人员的不情愿也将减少 - 为PWA成为零售商在2018年建立快速,移动优化网站的关键平台铺平了道路。

什么是Progressive Web Apps?
在移动生态系统的背景下,Progressive Web App被描述为一个网站,它提供与本机应用程序几乎相同的体验,但在标准浏览器中。

此技术适用于从移动设备到桌面版的各种设备。访问PWA网站不需要应用程序商店。

PWA相对于原生移动应用程序的显着优势在于,它们不需要任何不同的技术或深入了解适应您的代码以在iOS(Apple)或Android手机上运行。开发人员可以使用HTML5,CSS和JavaScript构建PWA。

它们直接向用户提供弹出通知,实现主屏幕图标以便于访问,站点可以在全屏模式下运行。所有这些都与更快的页面传送捆绑在一起。

PWA有什么好看的?
正如我们已经建立的那样,移动速度对谷歌非常重要,以至于搜索引擎为桌面和现在移动的SERP提供了任何快速网站的排名提升。

其网站风格是为移动设备提供快速,集成,可靠和引人入胜的体验。渐进式Web应用程序可以通过多种方式满足所有这些因素,而框架和缓存使PWA代码轻松且高效地存储。推送通知和“添加到主屏幕”功能也让用户回来。

以下是Progressive Web Apps为您的电子商务网站带来显着优势的关键领域。

速度
站点响应的速率是关键,PWA可以快速响应,主要得益于服务工作者。缓存功能允许浏览器存储模板中布局的重复元素,并在需要时将其注入浏览器,显着加快下载时间,并节省使任何电子商务网站更多用户的所有重要秒数 - 友好。

保持文件页面小于1mb,并确保在不到五秒的时间内与页面进行首次交互。启用HTTP / 2以允许多次检索资产和压缩以进一步加快站点。

响应
用户体验是Progressive Web Apps的核心,因此它们将采用响应式布局构建。借助自适应网站,无论大小如何,布局都可以容纳屏幕。

因此,无论您正在使用什么设备,都可以正确定制体验。该PWA应用程序清单文件允许开发人员控制全屏视图,增强了体验进一步。

离线功能
Service Worker和缓存api是Progressive Web Apps的关键。Service Worker本质上是一个程序,主要在幕后检索和存储浏览器缓存中的站点组件。

例如,当您乘坐最需要离线功能的地下交通工具时,无线连接可能会间歇性地工作,或者网络可能很差。

PWA可以通过至少在此期间提供基本导航来弥补离线和在线之间的差距。

Service Workers的唯一问题是并非所有当前浏览器都支持它们。Safari和Explorer正在开发适用于此技术的beta版本。浏览器正在慢慢追赶,但可以使用caniuse站点监控跟踪技术兼容性。

用户保留
我们都知道原生应用会直接向屏幕提供用户通知。最棒的是,Progressive Web Apps还提供了推送通知的内置功能,可以提醒用户当前网站的发展。

这对于电子商务网站来说是非常宝贵的,以提醒用户更新,特别是当新产品进入库存时,或提醒他们销售和折扣。“添加到主屏幕”功能允许用户在主屏幕上放置快捷图标,以便于访问。同样,应用程序清单文件用于声明这些功能。

搜索引擎准备好了
与本机应用程序不同,不需要通过编辑PWA的源代码来指示您的深层链接URL - 相反,单个PWA URL可以由搜索引擎编制索引。这消除了通常围绕优化搜索应用程序的头痛。

谁现在正在使用PWA?
早期的PWA采用了一些知名出版商,即福布斯,华盛顿邮报和金融时报。

AliExpress是一个电子商务网站,允许用户主要从与eBay非常相似的中国公司订购。PWA网站的典型市场版本可在此处找到。

Aliexpress PWA网站在发布时设法捕获了一些令人印象深刻的指标,包括新用户增加104%和iOS用户增加82%。此统计数据显示,尽管现在还没有Safari支持服务工作者,但是在多个浏览器上每个用户访问的页面数量是其两倍。会话在网站上花费的时间增加了74%。

Ele.me是中国的一家食品订购公司,其所有页面的平均装载时间平均缩短了6.35%。用户设法体验该站点的时间,以便在第一次加载时在3G网络上持续交互下降到4.93秒。

最后,George.com(ASDA)最近推出了其PWA网站。根据Google的说法,该网站的平均速度提高了3.8倍,转换率提高了31%。

AMP怎么样?
这两种技术都有各种优缺点。加速移动页面(AMP)在第一次加载时更快。这可以通过加载时间到交互性来证明,其中PWA可以在不到十秒的时间内加载,而AMP提供的初始加载速度小于两秒。

AMP需要经过验证的Web组件才能运行,但PWA只需要HTML5,JS和CSS即可运行。

AMP相对于PWA的优势在于它们在初始加载时不需要Service Worker,同时从一开始就受益于缓存页面。可以将PWA与AMP相结合,进一步改善用户体验。

其中一个组件是' <amp-install-service-worker> '。着陆页内容可以作为AMP页面提供,而服务工作者则通过使用iframe触发,在后台访问和缓存PWA相关资产。

这意味着AMP页面可以无缝方式快速切换到PWA页面,而无需等待太长时间来加载后续PWA。想象一下,用户可以通过AMP页面快速进入网站,以超快的速度下载内容,然后切换到具有所有优势的PWA页面!

总之,使用AMP和PWA可以提供高速移动体验。AMP登录页面实际上是一个快速入口点页面,用于为PWA格式的后续页面启动服务工作者缓存。

为确保用户体验保持一致,AMP和PWA页面的外观应相同,以便在技术之间创建无缝,不间断的传输。

电子商务有什么问题吗?
PWA主要是单页应用程序,这反过来可能会对Google和搜索引擎抓取您的网页造成问题。在PWA中使用单页应用程序是有充分理由的,因为它们是轻量级的,并允许服务工作者以基于模板的方便方式注入内容。

可能需要预先呈现页面服务器端以便进行爬网。开发PWA时的总体建议是迭代地,缓慢地构建更新的功能并在不同的构建阶段进行测试。这将保持网站开发策略,逐步增强包容性用户体验。

有各种各样的Google工具可以突出显示构建时的问题。使用Google的Fetch and Render工具,现在是Chrome开发人员检查工具的灯塔审核可以分析PWA得分为100分。

例如,它可以按时提供第一个意义油漆的读数,并显示DOM结构加载中的潜在阻挡剂。该工具在减少开销和代码膨胀方面非常强大。

Fetch和Render将指出Google难以查看页面上元素的任何问题。Google可以更轻松地使用此构建核对表开发PWA站点。

不要阻止任何引擎抓取活动中的JavaScript和CSS,因为他们需要了解页面在浏览器中的外观。提供干净的URL,而不使用哈希符号,并将PWA页面充分规范地标记回可能存在重复的相关桌面页面。

电子零售商是否应该担心安全和隐私?服务工作程序仅在安全条件下工作,因此您的站点必须使用https加密。

一个名为支付请求API的特定API 应该可以使移动网站更容易收集安全的信用卡和支付信息。API便于自动填充和一次点击结账。它最近由谷歌开发,可能会有变化。

PWA的未来是什么
谷歌正在2018年积极推动PWA和AMP。目前,搜索引擎正在与许多合作伙伴进行交流,其中一个开发是PWA与电子商务平台的整合,如Magento。

说这项技术目前符合期待和要求苛刻的移动用户群的标准是现实的。移动用户希望快速或有时离线观看内容,PWA提供了吸引和重新吸引用户的机会。

在最近的一项研究中,美国用户每天花费5个小时在移动设备上,但只有5%的时间用于移动购物应用。据说移动应用程序已经失宠了一段时间,用户喜欢移动网络,或者对零售商的移动应用体验感到沮丧。

随着PWA的更大影响,可以想象用户在进行产品研究时不必在应用程序和浏览器之间切换是多么方便。看看Progressive Web App的未来是什么样子肯定会很有趣!

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK