Home Blogs 快速销售:电子商务使用AMP,SSR,PWA和边缘计算转变为第五档
Applications

快速销售:电子商务使用AMP,SSR,PWA和边缘计算转变为第五档

About The Author

Outline

随着电子商务的竞争日益激烈,零售商正在寻找新的脱颖而出方式,竞争前沿稳步转向技术领域。 多渠道的出现使客户旅程变得非常复杂,但有一点是肯定的—速度比以往任何时候都重要。 谷歌最近宣布的 页面体验更新,一个新的排名算法,旨在根据用户如何感知与他们互动的体验来判断网页,是一个明确的迹象,搜索巨头正在强调感知的速度 用户将页面视为已加载的速度。

电子商务的新客户之旅是即时的。 如果移动网站加载时间超过三秒,53%的访问者将会放弃该网站。 同时,加载时间的每一秒延迟都与转化率下降7%相关。 新技术现在正在实现以前无法实现的网站速度。 借助现代便携前端,服务器端渲染(SSR),加速移动页面(AMP)和现代CDN技术的组合,亚秒级页面加载不仅是可能的,它们正在成为电子商务的新竞争战场。

目录

  • 网站速度对电子商务的重要性
  • 速度=金钱
  • AMP是什么以及它是如何工作的
  • 零售业的崛起超过了其数十亿美元的竞争对手
  • 什么是SSR及其工作原理?
  • 什么是现代CDN和边缘计算?
  • 摘要

网站速度对电子商务的重要性

网站速度影响整个数字战略,从可见性(SEO和SEM ),到流量,用户体验,最终转化率和收入。 这直接源于Google对移动和速度的日益关注。

这家搜索巨头在十年的时间里一直在努力澄清网站速度至关重要。 他们推出了多个以移动为中心的更新,以巩固移动网站速度的重要性,因为它是搜索结果和SEM排名靠前的关键。

这些努力包括2016年移动优先索引,2017年移动广告AMP,2019年的速度更新以及即将于2021年初上线的 页面体验 排名更新。 最后但并非最不重要的是,Google Shame徽章将很快推出并标记出众所周知的缓慢网站,并警告用户从搜索引擎结果页面(SERP)导航到该网站。

平心而论,除了引入算法变革和羞辱网站以强调网站速度的作用,谷歌还创建了一系列工具,以实现更快的网络。 这包括用于促进和测量网站速度的各种工具,例如PageSpeed Insights,AMP,Impact Calculator和Mobile Speed Scorecard等。

来源: Test My Site

Google的”测试我的站点”工具允许您对您的站点进行快速审核,并估算如果实施站点速度建议,对年度收入的潜在影响。

创建这些工具的努力符合Google的利益,因为58%的搜索和65%的公司广告收入来自移动设备。

附表1-5.2 -1演示

安排咨询对话,了解Edgio (Layer0) XDN如何帮助您实现次秒级页面加载。 单击此处!

速度=金钱

众所周知,网站速度会影响客户体验和收入,尤其是在移动设备上—70%的消费者 表示网站速度会影响他们的购买意愿。 亚马逊计算,一秒钟的延迟页面加载将花费$十亿收入损失一 . 要提高销量,您必须确保无论访问者登陆何处,例如您的商品信息或商品描述页面,内容都能快速轻松地加载。 同样,付款过程也应迅速而简单。 这为重新接洽奠定了基础,并使买家倾向于返回并向您购买更多商品。

但是,从目前的情况来看,提供快速移动体验变得越来越困难。 在优化不佳,臃肿,图像过大,代码混乱的网站上,一个 移动页面平均处理214个服务器请求,其中100个与广告相关。 因此,在移动设备(4G)上加载平均页面需要15.3秒。 一些竞争较激烈的零售商可以将移动页面加载时间缩短到3 -5秒–但仍有改进的空间。 这不是5G可以解决的问题。

这是广告,个性化,分析和跟踪以及卓越用户体验之间不可调和的妥协

速度的基础

提供快如闪电的首页加载的第一个构建模块是使用AMP进行搜索流量,并将SSR用于其他信道。 第二步是确保后续页面加载速度快得惊人。 这是通过为提高速度而构建的便携式前端实现的,例如渐进式Web应用(PWA)。 最后一个支柱是一个现代化的CDN,它具有边缘计算功能,可以将页面加载的每一毫秒都压缩掉。

事实上,谷歌已经推荐了一个理想的客户旅程,其中一个网站首先提供AMP页面来搜索用户,然后将他们转移到网站的完整PWA版本的后续页面。 由于近一半的零售商网站流量来自有机搜索,因此支持AMP和PWA是有意义的。

Google I/O 2017对此主题进行了广泛讨论

借助PWA,开发人员可以提供与本机应用程序相媲美的极具吸引力的快速体验。 然而,对于搜索生成的流量,AMP是最快的选项,中位加载时间为 半秒

因此,简而言之,在SERP中攀登更高需要AMP和SSR的组合,以实现快速的首次加载,并需要PWA以实现快速的浏览转换。 问题在于,说起来容易做起来难,因为它需要企业电子商务网站添加SSR支持,这本身就是一项复杂的任务,并维护两个单独的网站,一个是PWA (通常用React,Angular,Vue,Next, 或Nuxt)和AMP HTML中的另一个。

AMP页面速度如此之快,因为它们是由CDN (内容交付网络)预提取,预渲染和缓存的。 Google的AMP缓存提供大多数AMP页面。

因此,网站速度的基础包括以下三个关键要素:

固态继电器+ AMP,用于快速的初始负载

从SERP中,用户将被定向到 AMP版本的页面 ,以便快速加载第一页。 SSR对来自其他渠道的访客也是如此,包括电子邮件,社交和转介。

PWA便携式前端可实现快如闪电的浏览速度

PWA 接管,以提供即时浏览速度,因为访问者浏览后续的网站页面。 通过这种方式,消费者可以享受快速的首页加载体验,以及超越首页的即时页面转换。

预测性预取+现代CDN

预测性预取和具有边缘计算功能的现代CDN使您能够在用户请求动态数据之前将其流式传输到边缘,并从边缘流式传输到用户的浏览器。 这使您可以缓存和服务消费者正在等待的内容–JSON数据转换为您库存中的不同产品,它们的价格和信息。 这就是电子商务网站和其他数据库驱动的网站如何提供即时体验,并在消费者点击之前保持5秒(例如,预取用户最可能在点击链接之前点击的产品描述页面)。

现在我们已经了解了构成网站速度基础的三大支柱,我们可以深入了解每一支柱。

AMP是什么以及它是如何工作的

Google AMP是一个开源框架,用于创建中位加载时间为500ms的移动网页。 AMP通过简化HTML并强制实施对CSS和JavaScript的严格限制,在移动Web上创建更好,更快的体验。 然后,这些页面将被缓存并预渲染到Google服务器上,这就是它们如此快速地交付的方式。

AMP的优点

AMP页面为来自Google的SERP的流量启用了500毫秒的中位页面加载。 这些速度是可能的,因为Google服务器在点击AMP页面链接之前会将AMP内容预提取并预渲染到用户的浏览器。 对于平均电子商务网站谷歌搜索(有机和付费)约占他们的流量的50 %,所以这些收益可以应用到很大比例的流量。

使用AMP的网站还可以看到跳出率的降低带来的好处,因为通常在等待页面加载时出现反弹的用户现在将获得闪电般的体验。

AMP + PWA如何改变游戏

AMP和Progressive Web Apps (PWA)组合涵盖了从搜索到最终搜索的整个客户历程,使其快速端到端 购物者从Google SERP加载AMP页面,然后在浏览AMP页面时,在后台加载站点PWA版本所需的资源。 这样,当用户采取行动(例如点击网站上的任何地方)时,PWA已经在预加载后续页面的内容时获得了一个良好的开端,从那里,所有剩余的转换都是客户端呈现的浏览转换,而不是新的导航。

为什么不是每个人都使用AMP?

AMP和PWA的组合是为了速度而在天堂进行的比赛,但这是一个噩梦般的发展。 有效地支持该技术需要创建两个版本的站点—一个是您的前端所使用的语言(通常是JavaScript密集型或CSS密集型),另一个是遵循AMP项目的标准。 这只是一个开始:每个错误修复,布局更改,新功能等都可能需要同时传播到AMP和PWA代码库。

React Storefront框架和Layer0使开发人员能够更轻松地在React应用程序中支持AMP。

零售业的崛起超过了其数十亿美元的竞争对手

通过利用Layer0 AMP技术,时装零售商Akira不仅提供即时的首次加载从搜索,但也outranks亚马逊,诺德斯特龙,Zappos等大品牌的关键短语.

在使用Layer0技术之前,Akira的第一页平均加载时间为4.8秒,后续页面加载时间为2.5秒。

Akira利用Edgio内置的先进技术(Layer0)改进了这些结果并实现了次秒级页面加载: 具有服务器端渲染和AMP转换的电子商务PWA,Layer0 CDN-as-JavaScript在边缘为动态内容提供95%以上的缓存命中率(并使网站领先于购物者5秒),以及Layer0面向前端的无服务器JavaScript后端(用于优化服务器和API)。

在Edgio (Layer0)的帮助下,该零售商在许多领域立即获得了提升:

  • 首次加载时间下降了70.8%,接近一秒
  • 浏览转换下降到惊人的500毫秒
  • 一半的网站页面现在加载不到500毫秒
  • 移动转换率增长37.25%

Lighthouse也很好地反映了这些改进—Akira的性能得分提高了36分,超过了75%的网站在Web上的表现,并提供了更好的客户浏览体验。

阅读完整的 Akira案例研究

安妮·塞尔克(Annie Selke)是 另一个很好的例子,说明如何投资网站速度可以帮助零售商爬上搜索引擎结果页面。

在访问Edgio (Layer0)之前,家居和装饰零售商 Annie Selke 甚至没有出现在Google搜索结果的上方。 如今,随着有机流量增长32%,移动有机流量提升40.41%,它击败了数十亿美元的竞争对手。

如果你有兴趣,我们的网站上也有一个 Annie Selke案例研究 ,在这里我们将深入到nitty-gritty。

对于Akira和Annie Selke等在线零售商来说,性能良好的移动网站是一个不易实现的目标。 它可以正是他们所需要的,以抵御来自亚马逊,诺德斯特龙和Zappos等电子商务巨头的无情竞争。

网站越快,排名就越高,就像一个即时的,有保证的搜索引擎优化。 Edgio (Layer0)产品组合中有许多例子证明了这一点。 Akira,Annie Selke和 Shoe Carnival 仅仅是少数几个超越了包括亚马逊在内的众多知名品牌的公司。

Layer0提供了一系列先进的技术,使电子商务能够快速发展:

  • Ecommerce PWA,支持服务器端渲染和AMP转换
  • 预测性预取
  • CDN即JavaScript为边缘动态内容提供95%以上的缓存命中率,使网站比购物者领先5秒。
  • 面向前端的Layer0 Serverless-JavaScript后端优化了服务器和API。

附表1-5.2 -1演示

安排咨询对话,了解Edgio (Layer0)如何帮助您完成次秒级页面加载。 单击此处!

什么是服务器端渲染及其工作原理?

服务器端呈现(Server-Side Rendering,又称 SSR)是一种流行的技术,用于在服务器上呈现通常仅客户端的PWA页面,然后将完全呈现的页面发送到浏览器。 然后,客户机的JavaScript包可以接管,PWA可以正常运行。 SSR本质上将JavaScript页面转换为HTML,这是搜索爬虫和浏览器在服务器上都能理解的一种语言。 这可确保浏览器和搜索爬网程序可以轻松交付页面并为页面建立索引。

使用SSR的一个主要优点是有一个应用程序,可以被每个搜索引擎正确地抓取和索引。 这有助于SEO和向社交媒体渠道提供元数据。

安全部门改革的好处

SSR通常还可以帮助提高性能,因为在第一个请求时,已完全加载的应用程序会从服务器发出。 但是,对于非琐碎应用程序,您的里程可能会有所不同,因为SSR需要一种设置,这种设置可能会变得有点复杂,并产生更大的服务器负载。 值得庆幸的是,有服务和工具,如同构前端和Layer0与SSR支持开箱即用。

最终,是否对您的网站使用服务器端渲染取决于您的特定需求,以及对您的用例最有意义的折衷方案。

什么是现代CDN和边缘计算?

边缘计算 是一种网络理念,专注于使计算更接近数据源,并减少流程中的延迟和带宽使用。 使用许多不同的技术可以实现这一点。 使计算更接近网络边缘(用户的计算机,物联网设备或边缘服务器),最大限度地减少客户端和服务器之间必须进行的长距离通信量。

具有边缘计算功能的CDN 通过将内容流式传输到离用户最近的CDN入网点(POP),您可以缩短从网站服务器到用户浏览器的时间 (这样,旧金山的一个用户从南旧金山的一个流行音乐中交付内容,而纽约的一个用户从布鲁克林的一个流行音乐中交付内容)。

借助边缘计算实现CDN的优势

CDN将网站的缓存版本存储在多个位置,以确保更快的页面加载。 每个此类POP都包含几个缓存服务器,负责向附近的访客交付内容。

Layer0的 CDN-as-JavaScript 将这一概念提升到了另一个层次。 它是一款应用感知型CDN,能够理解您的应用。 它使用的语言与前端开发人员已经知道的语言相同,让您可以完全控制缓存。 因此,使用Layer0的网站在边缘的动态内容的缓存命中率为95%以上。

Layer0 CDN-as-JavaScript的边缘计算功能通过预测性地预取最可能的下一页并在收到请求之前将其流式传输到边缘,使您能够在用户点击指向它们的链接之前缓存这些页面并为其做好准备,从而使您能够领先购物者5秒钟。

摘要

加载时间过长可能会破坏用户的体验和网站的搜索排名。 AMP解决了这一问题的一部分–它使搜索的第一页变得非常快。 但这只是战斗的一半。 要使您的网站快速运行,需要付出额外的努力并采用更全面的方法–将加速移动网页(AMP),现代便携前端,服务器端渲染(SSR)和具有边缘计算功能的CDN等技术相结合。

Layer0帮助复杂和动态的电子商务网站达到次秒级速度,同时提高开发速度和利润增长并降低DevOps成本。 它还包括一个CDN-as-JavaScript,可为动态内容提供95%或更高的缓存命中率,而其他CDN仅为15%。

Layer0始终如一地为大型电子商务网站提供-500 C2中位数页面加载,包含数十个标签和脚本,更不用说动态定价和实时库存查询了。 众所周知,这些速度-30提升可带来15%的转换提升,更好的视野,更广的覆盖范围,最终, 更高的收入。

安排与网站速度专家的咨询对话 ,了解我们如何帮助您通过即时电子商务网站获得竞争优势!

Tags

Just For You