Home 技术文章 超越优化—背后最快的Magento 2商店的秘密
Applications

超越优化—背后最快的Magento 2商店的秘密

About The Author

Outline

原始资料来源:Layer0

优化电子商务网站以提高速度一直是一个关键策略,使零售商能够提高其可见性和转化率。 现在,站点速度变得更加重要。 Google最近宣布了一项即将推出的页面体验更新,该更新引入了一种新的排名算法,该算法根据用户对页面的体验来判断页面。 这意味着慢页面的排名将低于2021年初更新生效时的当前排名。

这是一个重大挑战,也是Magento 2网站的一个机会,这些网站希望超越肉和土豆优化策略,并通过一个在Google搜索结果中排名很高的即时网站真正粉碎他们的竞争。

什么是Magento?

Adobe拥有的 Magento 是全球超过250,000家在线零售商使用的领先电子商务平台。 从正确的角度来看,互联网上的每四家电子商务企业都在使用该平台。

官方 对Magento 1的支持在2020年6月结束 ,迁移到Magento 2,该平台的最新化身,需要一个完整的网站重写。 对于许多零售商来说,这提供了一个重新考虑其速度优化策略并实施可提升网站性能和SEO的最佳网络技术的好机会。

每一秒都很重要

在过去的几年里,互联网已经大大加速。 尼尔森的互联网带宽定律 指出,高端用户的连接速度每年增长高达50 %。 这一规则在过去36年里一直适用,从速度慢得离谱的拨号连接到当今疯狂的宽带速度。 据 Speedtest.net,今天的美国人,平均来说,通过他们的固定宽带连接,获得大约135 Mbps的下载速度和52 Mbps的上传速度。

虽然这些数字令人印象深刻,但这并不直接反映在速度更快的网站上。 移动互联网性能也是如此—尽管世界正在以超快的5G网络速度蓬勃发展,但它们很少与电子商务商店和其他网站的速度有关。 具有讽刺意味的是,移动页面加载时间 实际上是 在过去几年。

资料来源:nngroup.com

一个速度更快,无摩擦的电子商务商店可以在单个会话中向用户显示更多产品。 这反过来又提高了转化率。 在理想的情况下,商店及其界面应该摆脱困境,只是一个伟大的购物体验的背景.

此外,与大多数电子商务商店一样,您很可能在人们对价格非常敏感的市场中提供产品。 更糟糕的是,您的竞争对手可能以相似的价格提供相同的产品。 在这种情况下,你的SEO排名和网站体验可能是少数几个剩余的方式来区分自己。 这两个因素之间的联系比许多卖家所意识到的要多。

Google支持快速网站

随着 Google Page体验更新的临近 ,密切关注您网站的速度至关重要。 优化电子商务网站以提高速度已被确定为2020年及以后许多零售商的首要举措之一。 当页面体验算法更新推出时,速度较慢的网站将在搜索排名和SERP位置中迅速下滑。 现在是采取行动的时候了。

Google搜索结果的第一页接收了几乎95%的网络流量,剩下的SERP页面只剩下5%。 虽然Google一直对RankBrain算法及其不同组件的加权非常模糊,但我们确信,从2021年开始,速度将在搜索排名中发挥关键作用。 这很可能是谷歌历史上第一次在影响搜索结果的特定信号上打开和服。

不优化你的Magento 2商店的速度,让你在失去有机流量和潜在客户的风险. 许多在2020年没有采取行动的商店,甚至是大品牌,可能会看到他们的搜索流量减少,并遭受巨大的收入损失。 提供更流畅,更好和更快体验的网站将开始主导最受欢迎的有机关键词。

提供出色的体验,而不仅仅是产品

与其他许多电子商务平台一样,Magento 2最初采用后端和数据优先方法构建,很少关注实际的最终客户体验和网站速度。 他们关注的是SKU,而不是人员。 这给平台的客户,系统集成商,设计人员和开发人员带来了网站速度优化的负担。

无论你的商店运行在Magento 2或任何其他流行的电子商务平台或后端系统,如果你想提供最快的体验,你将需要实施先进的以速度为中心的网络技术,为此,你必须先去无头,并建立一个便携式前端。

要全面了解无头电子商务是什么以及为什么它是即时页面播放的基础,请观看此网络研讨会。

继续阅读,了解最快速的Magento网站背后的关键战术。

背后的技术迅速Magento 2商店

网站速度对于电子商务尤为重要,因为网上购物本质上是一种非常直观的体验。 商店通常是图像密集型网站,购物者最不希望看到的是产品页面加载缓慢,图片粗糙和恶作剧。

当优化你的Magento 2存储速度时,你可以实施一系列的策略,使它更快-使用轻量主题,优化图像,删除渲染阻止javascript代码等 你可以有一个整个团队优化您的网站,但问题是所有这些标准速度优化技术涉及调整事情通常发生 后点击. 让您的网站 真正 快速需要一个技术的组合,在客户甚至点击任何东西之前运行在引擎盖下 . 您需要从对水龙头的反应转变为对水龙头的预测(稍后再详细介绍)。

许多面向速度的Web技术需要将后端与前端分开,即使前端 可移植,或订阅无头的商务架构。 采用无头解决方案可以更轻松地为前端和后端独立使用同类最佳的解决方案,这样您就可以在选择的后端交付速度最快的网站。

一旦您使用Magento 2电子商务网站无头,您就可以使用便携式前端来提高速度,如Progressive Web App (PWA)。 使用PWA前端运行无头Magento 2商店需要坚实的API覆盖和良好的文档。

实现无头还可以让您开始实施其他尖端技术,这将使您的网站快得惊人,包括:

  • 便携式前端可实现快速浏览转换
  • 服务器端渲染(SSR)和AMP支持快如闪电的首次加载。
  • 预测性预取
  • 先进的CDN,具有边缘计算功能,可优化边缘动态内容的缓存命中率,并保持领先购物者5秒

让我们来调查Magento 2是如何适合实施这些技术和支持亚秒级电子商务网站.

1 magento 2 API

无头商店通过API将前端连接到后端电子商务平台。 在无头之前,值得检查您的电子商务平台是否具有良好的API覆盖范围,以及您是否可以轻松连接到第三方店面。

Magento提供API覆盖范围:所有版本均提供SOAP和REST端点,并且Magento 2更新增加了本机GraphQL支持。 PWA和无头端点可以通过GraphQL API创建,但是,自定义平台的代码和/或数据库架构可能会破坏API兼容性。

  • Magento 1 API格式: REST,SOAP
  • Magento 2 API格式:REST ,SOAP和更现代的GraphQL

Magento 2使创建API以支持无头网站和PWA相对容易,并将GraphQL作为前端开发的REST和SOAP Web API的替代方案。

2为Magento构建PWA前端2

现代PWA便携式前端在许多方面都与本机应用程序相似,其速度优势显而易见,因为浏览网站的速度更快—人们在网上购物时会做很多事情。

在Magento 2上的PWA有一种本土的感觉,感觉会 更快。 然而,当PWA中提到速度时,它更多的是布局稳定性, 而不是 速度。 当您逐页浏览时,这些页面不会像在传统网站上那样”反弹”。 用户通常认为这种”弹跳”是缓慢的页面加载。

您可能已经多次看到这种情况—您进入一个网站,然后在几秒钟后加载一个广告或横幅,所有内容都发生变化,上下移动整个主题。 这会导致购物者意外点击,分心和沮丧。

PWA前端解决了这个问题。 Magento PWA Studio是一个工具集合,让开发人员在Magento 2之上构建复杂的渐进式网络应用。 遗憾的是,PWA Studio仅适用于大多数卖家尚未升级到的Magento 2.3或更高版本。

总结一下,这里是建立一个PWA前端坐在你的Magento 2商店的顶部的利弊.

Magento 2在支持的PWA中的优势:

  • Magento提供一些PWA支持。 Magento 2附带Base和Luma响应主题开箱即用。 对于PWA,Magento 2.3提供了一个名为PWA Studio的工具包,其基础主题称为”Venia”。
  • 更好的布局稳定性。 通过PWA前端,Magento 2页面的渲染更加顺畅,即图像在加载时不会”弹出”,即使在重图像页面上也是如此。
  • 速度。 如果PWA构建正确,它可以使网站更快。

请注意,最后两个优点依赖于服务器端渲染,这是可能的,但并不总是适用于PWA Studio前端。 稍后再详细介绍。

在Magento 2上交付PWA的挑战:

  • Magento的本地提供的PWA并不是真的更快。 您需要适当的基础设施才能快速发展。 有时,PWA甚至会在没有适当技术支持的情况下减慢您的网站速度(例如服务器端呈现和带边缘计算的CDN)。 很多大商店犯了这个错误。 这听起来有点反直觉,但这是真的—你进入PWA获得速度,但你最终可能会减慢你的网站. 我们的分析表明,美国500强提供PWA的电子商务网站的加载速度并不比非PWA网站快得多,平均约4秒。
  • 如果没有SSR和AMP,第一次点击仍然很慢。 Magento PWA Studio不支持SSR或AMP开箱即用,因此首页加载不是很好。 此外,第一次加载速度不是那么快,因为当您访问PWA时,您将下载整个”应用程序”。 下一页的PWA加载速度明显快于传统的多页网站。
  • Magento的PWA Studio类似于其他开源前端选项,但PWA Studio专门针对该平台。 这意味着你仍然被锁定在Magento生态系统,这削弱了一些无头商业的价值。
  • 使用本地PWA Studio在Magento上构建PWA需要不同于传统Magento开发的技能和工具链。
  • Magento PWA Studio仅适用于Magento 2.3或更高版本。 大部分Magento商店尚未升级到Magento 2.3。

总体而言,选择开源,可移植PWA框架(即不是本机内置在平台中但提供自然API连接的框架)比Magento在PWA Studio中提供的供应商生产的框架更好。

Magento的第三方前端框架2

开源和供应商提供的前端选项是免费的,但供应商生产的前端是不可移植的。 当然,你可能会用一些努力把它带到另一个平台,但它肯定是不允许的。 供应商提供的前端,就像那些使用PWA Studio构建的前端,是由电子商务平台构建的,以获得PWA答案,而不是因为他们打算让您在重新平台时随身携带。

当寻找一个PWA前端,将与你的Magento 2存储,你理想的是寻找一个同构框架,即一个呈现相同的页面在两个版本。 你不必写两次,你写一次。 第一页呈现在服务器端,导航为客户端呈现。

有几个同构无头框架,你可以使用你的Magento 2存储,一旦你去无头:

  • next.js–Vercel为PWA创建的一个出色的React框架,
  • Nuxt.js–与Next.js相同,但基于Vue,
  • React Storefront–基于Next.js,但具有更多的店面功能,小部件和特定平台的连接器,如Magento,Shopify和SAP (Hybris)。 Layer0是开源PWA框架React StoreFront的主要贡献者。
  • 角度–允许使用服务器端渲染创建便携式PWA前端。

这四个框架提供客户端和服务器端呈现。 这意味着对于第一个负载没有速度折衷—门店中的第一个和所有后续负载都将快速。 此外,我们知道Google喜欢渲染时间短的页面,这使得像商店这样的重型应用程序在没有SSR的情况下更容易定位自己。

复杂的电子商务网站往往需要JavaScript的负担,需要谷歌更多的努力爬网和理解他们. 他们会说没关系,但Google不喜欢客户端渲染。 如果您的内容未正确显示,可能会出现错误和问题。 理想情况下,您应该寻找一个PWA框架,它可以在服务器端进行开箱即用的渲染,而Magento的PWA Studio则不能。

底线:本机PWA体验,你得到的PWA工作室在Magento 2.3不提供巨大的速度提高。 但在Layer0上启动Magento PWA Studio将为您提供更快的网站。

建立一个更快的Magento 2

无头,便携式前端(如PWA)具有许多速度优势。 一个好的PWA会带你从慢到快,但它不会让你瞬间。 为此,您需要正确地结合尖端技术,例如:

1服务器端渲染(SSR)和AMP

Magento 2.3为实现服务器端渲染提供了有限的工具。 它是通过Moustache模板实现的,作为Magento PWA Studio的向上规范的一部分。 Moustache在服务器上运行完整的客户端代码(而不仅仅是模板)。 因此,SSR向上仅限于特定区域(如应用程序外壳),或者开发人员必须将代码复制到需要支持SSR的每个页面或区域的客户端React代码和服务器端Moustache模板中。

Google AMP是一个开放源代码框架,通过简化HTML和强制实施对CSS和JavaScript的严格限制来创建超快速的移动网页。 平均AMP页面在500毫秒内从搜索中加载。 这些页面在Google服务器上进行缓存和预渲染,这就是它们快速交付的方式。

在Magento 2商店实施SSR和AMP的挑战:

  • Magento不提供AMP的内置支持。 支持AMP需要第三方扩展和/或重建您现有的主题,以便您自己添加这些功能。 这严重阻碍了您在移动设备上优化首页加载的能力。
  • 在Magento 2上,支持向上的真正SSR需要运行和维护一个Node.js服务器群。

2现代CDN

内容交付网络(CDN)可以存储媒体文件。 CDN是为了让您的网站内容更快加载(图像,视频和代码—JavaScript,CSS—以及您网站的其他部分)。 当有人访问您的网站时,CDN会缩短访问内容的时间,因此不必从服务器一直访问整个国家/地区。 CDN将其应用于每个主要城市,因此访问该内容的时间要短得多。 有些人可能拥有CDN,但甚至不知道。

传统CDN专为静态网站而设计,用于存储图像,文本和其他不经常更改的元素。 但是,具有动态定价和实时库存查找功能的现代商店所需要的远远不止这些。

即使移动网络越来越快,而且我们拥有所有这些4G和5G速度,移动网站仍然保持相同的速度,通常每页加载大约3 -5秒。 这并没有变得更好 ,即使几乎所有主要的电子商务网站今天都使用CDN。

将CDN与Magento 2集成的挑战

  • Magento的本地版本不提供开箱即用的CDN集成,尽管您仍然可以使用您选择的CDN。
  • Magento Commerce (云)有一个内置的缓存模块,但它不是真正的CDN。 它缺少真正的CDN所具有的分布式接入点(PoP)。

Layer0 CDN-as-JavaScript可以取代您的CDN或与之协同工作。 我们有近100个PoP。 Layer0网站的边缘动态内容的平均缓存命中率为95%以上。

安排咨询对话,了解Layer0如何帮助您在Magento 2上实现次秒级页面加载。

我们随时为您提供帮助

Layer0使拥有一个快速,无头Magento存储超级简单,从开发和部署到轻松回滚。 您可以为任何现代无头前端完成此操作:NeXT,Nuxt,React,SAP/Spartacus,React Storefront, Vue Storefront—我们支持所有这些功能。

速度和转换提升。 当结合起来,转化率增加和有机流量提升为您的电子商务网站产生协同效应,这将直接转化为收入. 通过运行一个更快的商店,你不仅是越来越高的ERP。 在竞争更激烈的市场中,这意味着您的竞争对手正在失去流量到您的网站。 Layer0网站的转化率和搜索流量平均提高了15%-30。

简单性。 在Layer0,我们的目标是使Web变得即时而简单—即使我们支持无头趋势,但这并不是一项简单的任务。 Layer0上的网站通过我们的无服务器JavaScript平台将代码置于其工作流程的中心,开发人员的速度和企业敏捷性提高了20%。

协作。 每次编写新代码时,都会自动生成预生产环境。 您的QA人员和业务利益相关者可以在代码合并之前对其进行测试并提供反馈。

在12周内从Magento 1升级到Magento 2并获得次秒级网站。

真正的A/B测试。 A/B测试将减慢您的网站速度。 有一个网站优化速度,然后A/B测试毁了你的努力是没有意义的。 使用Layer0 (Edgio),您可以在您的网站上进行实验,但仍然可以即时进行。 例如,您可以为5%的用户执行Canary部署。 使用Layer0,您可以像编写应用程序一样编写路由规则,并且可以完全控制流量分割。

Layer0还提供了性能监控和仪表板来跟踪所有信息。

无限扩展。 即使在黑色星期五,Layer0也会自动扩展,以吸收您商店增加的流量。 每月有三分之一的美国购物者访问Layer0上的一个网站,您知道自己很好。

安全性。 Layer0已通过企业级PCI 1级DSS认证,具备WAF,DDoS和爬虫程序抵御功能,开箱即用。

如何成功的商店做它:Akira的即时Magento 2商店在Layer0

一个即时的电子商务网站可以对你的底线有巨大的影响. 我们已经多次与客户交流过。 例如,礼物和鲜花巨头1 -800花从其亚秒网站的转化率提高了50 %。 Venus Fashion是另一个例子,时装零售商从其网站加载的15.25%在一秒之内到Layer0的72.75%,导致24%的转化率提升。

时装零售商Akira通过Layer0网站将其转化率提升了37.25% Akira立即体验了先进技术的组合:

  • 使用React Storefront构建的快速电子商务PWA
  • 服务器端呈现和AMP支持
  • 预测性预取
  • 具有边缘计算功能的CDN即JavaScript

前两款产品可确保从登录到结账的超快页面速度。 最后两个选项通过预测购物者的下一次移动,从缓存的边缘预取JSON数据并将其流式传输到浏览器,确保网站比购物者领先5秒。 这样,用户就感觉整个站点已经在他们的电话上,不再有”页面加载”的概念。

无摩擦AMP支持更快的搜索流量和更好的SEO

Akira击败亚马逊,诺德斯特龙,Zappos和其他数十亿美元的竞争对手的关键短语。 如何实现? 这家时装零售商利用React Storefront的AMP转换技术,提供即时的首次搜索加载。

零售商网站的每个页面都会自动生成AMP版本。 这为零售商提供了所需的竞争优势,以超越电子商务巨头与更大型的团队和预算致力于搜索引擎优化.

SSR可实现更快的非搜索流量

Akira使用Layer0内置服务器端呈现功能为非搜索通道提供即时的首次加载。 显示,社交,电子邮件,推荐和其他非搜索流量的平均值仅为一秒的北部,后续页面加载时间为500毫秒。 在平均每页加载3 -5秒的市场中,这是一个相当大的竞争优势。

通过Layer0上的内置自动AMP转换,从搜索中即时加载第一页

您可以在此处阅读完整的 Akira案例研究

摘要

现代消费者是敏捷和挑剔的,可能会离开您的电子商务网站,如果有在经验中有轻微的打嗝. 随着Google对网站速度的日益关注,在线零售商没有任何借口提供低于标准的网站性能。

如果你被缓慢的网站速度困扰,是时候采取行动. 随着网页体验更新将于2021年初上线,速度较慢的网站将开始在搜索排名中下滑。 不管怎样,你的用户应该得到更好的体验,你应该得到更好的搜索引擎优化. 速度将继续为用户和搜索引擎的重要性,带来交通和转换提升作为次要胜利。

但为什么要花费巨大的努力来优化您的网站的速度,当你可以跳过竞争,并立即去? 如果您在Magento 2上有PWA或SPA,我们保证-500在Layer0 (Edgio )上的中位数页面速度。 如果您在Magento上有一个传统的网站(或任何其他电子商务平台),我们仍将保证这种速度的提高。

这是可能的,因为Layer0 (现在的Edgio)恢复了速度优化的概念,在购物者点击之前(通过预测性预取和边缘缓存)进行所有繁重的提升,而不是在点击后扰流以优化页面渲染。 这样,我们就能让您的网站比购物者领先5秒。

Tags

Just For You