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

资料来源：nngroup.com

速度更快，无摩擦的电子商务商店可以在单个会话中向用户展示更多产品。 这反过来又提高了转换率。 在理想的场景中，商店及其界面应远离喧嚣，仅作为一个良好的购物体验的背景。

此外,像大多数电子商务商店,你最有可能提供的产品在一个市场的人们是非常敏感的价格. 更糟糕的是，您的竞争对手可能以相似的价格提供相同的产品。 在这种情况下,你的搜索引擎优化排名和网站体验可能是少数几个剩余的方式来区分自己。 这两者之间的联系比许多卖家意识到的更多。

Google支持快速网站

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

谷歌搜索结果的第一页收到了近95%的Web流量,剩下的SERP页面只有5%。 虽然谷歌一直对他们的RankBrain算法和它的不同组件是如何加权的超级模糊,但我们确信,从2021年开始,速度将在搜索排名中发挥关键作用。 这很可能是谷歌历史上第一次在影响搜索结果的特定信号上打开和服。

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

提供卓越的体验，而不仅仅是产品

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

无论您的商店是在Magento 2还是任何其他流行的电子商务平台或后端系统上运行，如果您想提供最快的体验，您都需要实施以速度为中心的高级Web技术，为此，您必须首先无头操作，构建便携式前端。

如需全面了解什么是无头电子商务以及为何它是即时页面加载的基础，请观看此网络研讨会。

阅读背后最快的Magento网站的关键战术.

Speedy Magento 2商店背后的技术

网站速度对于电子商务尤为重要，因为网上购物本质上是一种非常视觉的体验。 商店通常是图像沉重的网站，购物者最不希望看到的是商品页面加载缓慢，图片颗粒状和摇晃。

优化Magento 2商店的速度时,您可以实施一系列战术,使其更快——使用轻量级主题,优化图像,删除渲染阻塞Javascript代码等 你可以有一个整个团队优化你的网站,但问题是所有这些标准的速度优化技术涉及微调的事情,通常发生后点击. 使您的网站真正快速需要在客户点击任何东西之前运行的技术组合。 您需要从反应到点击转变为预测(稍后将详细介绍)。

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

一旦你没有头与Magento 2电子商务网站,你可以使用一个便携式前端构建的速度,像一个渐进式Web应用程序(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的基础上构建复杂的渐进式Web应用程序。 不幸的是,PWA Studio仅适用于Magento 2.3或更高版本,大多数卖家尚未升级到这些版本。

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

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

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

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

在Magento 2上交付PWA前端的挑战:

• Magento本土提供的PWA并不是真的更快。 您需要适当的基础设施才能快速发展。 有时，PWA甚至可能会在没有支持它的正确技术(例如服务器端渲染和带有边缘计算的CDN)的情况下减慢您的网站速度。 很多大商店都犯了这个错误。 这听起来有点违背直觉,但这是真的——你进入PWA以获得速度,但你最终可能会放慢你的网站速度。 我们的分析显示，提供PWA的美国前500家电子商务网站加载速度不会比非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连接的框架)是一个比PWA Studio中供应商生产的Magento框架更好的选择。

Magento 2的第三方前端框架

开放源代码和供应商提供的前端选项是免费的，但供应商生产的前端不可移植。 当然，您可以通过一些努力将其带到另一个平台，但它的设计显然不允许这样做。 供应商提供的前端(如使用PWA Studio构建的前端)是由电子商务平台构建的，旨在获得PWA答案，而不是因为他们打算让您在重新平台时随身携带。

当寻找一个PWA前端,将与您的Magento 2商店工作,你理想地寻找一个同构框架,即一个渲染相同的页面在两个版本. 你不必写两次,你写一次。 第一页在服务器端呈现，导航在客户端呈现。

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

• Next.js–Vercel为PWA创建的一个很好的反应框架，
• Nuxt.js–与Next.js相同，但基于Vue，
• React Storefront–基于Next.js，但附带了更多店面功能，小部件和连接到Magento，Shopify和SAP (Hybris)等特定平台的连接器。 Layer0是开源PWA框架React Storefront的主要贡献者。
• Angular (角度)–启用通过服务器端渲染创建便携式PWA前端。

这四个框架提供客户端和服务器端渲染。 这意味着第一个加载没有速度平衡—商店中的第一个加载和所有后续加载都将是快速的。 此外,我们知道Google喜欢渲染时间短的页面,这使得商店等繁重的应用程序在没有SSR的情况下更少地定位自己。

复杂的电子商务网站通常很重JavaScript,需要Google付出更多的努力来爬行和理解这些网站。 他们会说这没关系,但Google不喜欢客户端渲染。 如果您的内容未正确显示，可能会出现错误和问题。 理想情况下,您应该寻找一个PWA框架,它可以直接在服务器端渲染,而Magento’s PWA Studio则不能。

底线:您在Magento 2.3上使用PWA Studio获得的本地PWA体验不会带来巨大的速度提升。 但在Layer0上启动Magento PWA Studio会让你更快的网站。

建立一个更快的Magento 2

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

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

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

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所具备的分布式入网点(POPS)。

Layer0 CDN-AS-JavaScript可以替换CDN或与其并行工作。 我们有将近100个POP。 Layer0上的网站发现边缘动态内容的平均缓存命中率为95%以上。

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

我们随时为您提供帮助

从开发和部署到轻松回滚,Layer0使快速，无头Magento存储变得超级简单。 您可以为任何现代无头前端执行此操作：Next，Nuxt，React，SAP/Spartacus，React Storefront，Vue Storefront—我们支持所有这些前端。

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

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

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

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

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

Layer0还附带了性能监控和仪表板来跟踪这一切。

无限规模。 即使在黑色星期五，Layer0也会自动扩展以吸收增加的门店流量。 每月有三分之一的美国购物者访问Layer0网站，您就知道您是很好的买家。

安全。 Layer0是企业就绪型PCI 1级DSS认证，开箱即用，支持WAF，DDoS和爬虫程序抵御。

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

即时电子商务网站可以对您的盈利产生巨大影响。 我们已经在客户身上多次见到这一点。 例如,礼物和鲜花巨头,1-800-Flowers看到了50%的转化从其亚秒网站。 Venus Fashion是另一个例子,时装零售商从15.25%的网站加载在一秒之内到72.75%的Layer0上,导致24%的转化率。

时装零售商Akira将其转化率提高了37.25%，在Layer0上的亚秒级网站。 Akira立即经历了先进技术的组合：

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

前两个确保从登录到结账的页面速度快如闪电。 最后两种方法通过预测购物者的下一步，从缓存JSON数据的边缘预取JSON数据并将其流式传输到浏览器，确保网站领先购物者5秒钟。 这样，用户就会感觉整个网站已经在手机上，不再有”页面加载”的概念。

无摩擦AMP支持可实现更快的搜索流量和更好的搜索引擎优化

Akira在关键短语方面超越了亚马逊，诺德斯特龙，扎波斯和其他价值数十亿美元的竞争对手。 怎样做？ 这家时装零售商利用React Storefront的AMP转换技术，从搜索中即时交付首批加载。

零售商网站的每个页面都会自动生成AMP版本。 这为零售商提供了超越电子商务巨头所需的竞争优势，其团队规模远远超过了搜索引擎优化的预算。

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

Akira使用Layer0内置服务器端渲染功能为非搜索通道提供即时的初始负载。 显示，社交，电子邮件，推荐和其他非搜索流量平均值仅在一秒以北，随后的页面将在500毫秒内加载。 在平均每页加载3-5秒的市场中，这是一个相当的竞争优势。