Home 技术文章 秘密背后Blazingly快Shopify Plus商店
Applications

秘密背后Blazingly快Shopify Plus商店

About The Author

Outline

Shopify Plus是一个受欢迎的SaaS电子商务平台,吸引了一些世界最大的品牌,如特斯拉,维多利亚贝克汉姆美容,斯台普斯,奥利奥/亿滋和红牛. 这种情况不胜枚举,广泛采用也不足为奇–Shopify Plus易于使用,易于自定义。 它提供了大量的插件和API,并有一个令人难以置信的响应支持团队作为后盾。 您对电子商务平台还有什么期待? 无论与Shopify商店或其他,答案仍然相同:次秒级页面加载和SEO击败您的竞争对手.

即使是最轻薄和最美丽的Shopify Plus网站也不会与来自大型零售商的竞争对手竞争,除非运营商加倍努力优化网站以达到亚秒级的速度。

让您的Shopify Plus商店尽可能快是让您的商店在SERPS中排名更高,并通过卓越的无缝购物体验提高转化率的最简单方法之一。

Shopify让您交付产品,而不是体验

许多电子商务平台(如Shopify Plus,Magento或Salesforce Commerce Cloud)都采用后端和数据优先方法构建,很少关注实际客户体验。 他们关注的是SKU,而不是人员。 这给平台客户,系统集成商,设计人员和开发人员的网站速度优化带来了负担。

无论您的商店是在Shopify Plus上运行,还是在任何其他流行的电子商务平台或后端系统上运行,如果您想要提供最快的体验,您都需要实施以速度为中心的高级Web技术。 为此,你必须首先去无头。

无头电子商务的好处

无头电子商务体系结构是指站点前端设计(即表示层)与其后端基础结构分离的体系结构。 这有点像使用WordPress来管理移动应用程序的内容(对于它的价值,这是可能的与WordPress的REST API )。

传统的单片电子商务架构

实现无头已被确定为2020年及以后许多零售商的首要举措之一。 它允许零售商为其前端选择独立于后端的最佳解决方案,以便商店可以更快地运行,从而提高转化率和排名提升。 无头电子商务(也称为微服务架构)几乎是一种在竞争中占据优势的安全方式。

API层允许将站点前端与其后端分离

更具体地说,无头电子商务提供了几个好处:

1速度更快

实现无头是实施许多以速度为中心的技术的先决条件。 这可以通过将显示逻辑转换到客户端并简化后端以获得最佳性能来实现。 通过只关注内容的快速交付,前端可以更快,更快速的响应比一个离开了浏览器的辛苦工作。

2,选择自由

许多电子商务平台为用户提供专有前端。 Shopify Plus也没有什么不同,它基于Shopify的Liquid Templating语言提供一系列响应式主题。 通过无头,您可以完全摆脱供应商束缚的束缚,超越平台前端工具。 这将提高敏捷性,使您能够独立于电子商务平台的路线图开发前端。

3,后端独立

投资一个无头网站的未来证明了商店。 您拥有前端代码,并可以自信地开发和投资于它。 这可以让你把它移动到另一个,更便宜或更好的电子商务平台,只要你想要. 在这种情况下,即使您的商店与第三方工具集成了数十个,它们也不需要针对新的电子商务平台进行重写,您只需将旧平台的API与新平台的API进行交换。

4更好的搜索引擎优化

一个没有头的网站不仅仅是更快;它也有更好的搜索引擎优化. 使用无头网站,您可以选择如何处理URL,元数据,robots.txt文件以及技术SEO的其他方面。 Shopify Plus不支持开箱即用。

5,支持未来使用案例和端点

借助Progressive Web Apps (PWA)/单页应用程序(SPA)等无头前端,运营商可以让商店面向未来,自由添加新的端点,并开发其他功能。 您只需连接到API即可。 您可以将几乎任何设备或平台添加为端点,并通过无头方式结账。

最快的Shopify Plus Stores背后的秘密

实现无头是实施多种高级Web技术和优化技术的基础,这些技术有助于开发更快,响应更快的店面。 结合起来,它们可以帮助优化任何Shopify Plus网站,以实现最大速度,SEO和收入。

便携式PWA前端

通过无头和结合Shopify Plus与PWA便携式前端,您可以在移动设备上获得闪电般快速的网站浏览速度。 借助PWA,您的客户将享受即时页面转换的增强体验。 与PWA的浏览转换一样快,它们的首次加载往往比传统的多页网站花费更长的时间。 要解决这一问题并提供从着陆到结账的快速体验,请考虑在PWA中添加服务器端呈现和AMP支持。

服务器端呈现(SSR)

服务器端渲染是一项关键的Web技术,伴随着快速的PWA。 如果没有服务器端呈现,浏览器必须先下载,解析并运行所有JavaScript代码,然后才能在屏幕上呈现任何内容。 没有固态继电器的PWA很难在模拟3G上实现第一次有意义的绘制(TTFMP)低于2.5秒的时间。 结合具有边缘计算功能的现代CDN,使用SSR的站点可以实现几乎即时的TTFMP时间。

SSR确保来自电子邮件,社交媒体和转介的访客体验快速的首次加载。 借助SSR支持,PWA提供了快速的首页加载体验和超越首页的即时页面转换。

服务器端渲染还可带来更好的SEO。 电子商务业务依赖于SEO,唯一的方法是100%确保您的网站将被搜索和社交机器人和爬虫程序理解是将其翻译成HTML。

如果您为Shopify Plus构建一个JavaScript密集型电子商务PWA前端,这一点尤为重要。 您必须在服务器上呈现页面,因为爬虫程序和爬虫程序不能可靠地索引JavaScript内容。

Shopify Plus不提供内置SSR支持。

加速移动页面(AMP)

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

Shopify Plus不提供开箱即用的AMP或真正的SSR支持,这严重阻碍了您在移动设备上优化首页加载的能力。 您需要自行将这些功能添加到您的网站。 对于AMP和SSR,您需要前端的后端。 下面是有关这方面的更多信息。

前端(BFF)的后端

BFF在使用无头电子商务和基于微服务的架构API方面发挥着核心作用。 它是应用程序堆栈中的一个独立层,允许单个客户端(例如PWA或本机Android或iOS移动应用程序)更高效地使用共享API,而无需针对每个客户端进行优化。 它透明地”拦截”API调用,并转换传递的参数,使特定端点能够理解这些参数。

BFF是为前端进行服务器端渲染和AMP转换的理想场所。 BFF还为Shopify商店带来了许多其他好处:

BFF和速度
您的前端可能需要编排对多个服务的调用和/或重新格式化响应数据,以最适合页面设计,并且此代码需要在某个位置运行。 BFF允许您将此代码保留在前端捆绑包之外,使其保持小巧快速。 在大多数情况下,响应是可缓存的,因此它不是在每个用户的设备上对每个请求运行此shim代码,而是在云上运行,它可以扩展以满足需求,并且仅在出现缓存丢失时运行。

对于移动客户端,过多的HTTP请求在时间上花费很高,每次调用都会增加不必要的毫秒数。 为了尽量减少请求的数量,前端通常倾向于通过单个API获取相关数据。 这意味着有时后端将负责与UI相关的逻辑处理,以满足每个客户端的需求。 这是一种效率低下的方法。

实现前端的后端后端后,前端(移动,网络)只通过BFF访问后端微服务,每个客户端都获得单独的BFF服务。 使用BFF时,微服务之间的相互呼叫较少。 这是因为某些UI逻辑是在BFF级别处理的。

BFF和开发速度
BFF通过让不同的开发团队独立工作来提高开发人员的速度。 它允许开发人员添加新功能,而无需更改核心API。 如果API由Shopify Plus提供且无法更改,则此功能特别有用。

最大限度地减少供应商束缚
如果您需要将Shopify切换到另一个电子商务平台,前端的后端可以减少工作量和成本。 这在无头架构的灵活性方面提供了巨大的优势。

基于BFF的前端和后端去耦

具有边缘计算的预测性预取和CDN

预测性预取是一种高级功能,用于预缓存和呈现访问者最有可能在点击之前访问的页面。 具有边缘计算功能的现代CDN可让您将动态数据流式传输到边缘,然后在用户请求之前传输到其浏览器。 结合这些技术,您的Shopify Plus商店无论在何处点击,都能领先购物者5秒钟。

通过预取动态数据并将其流式传输到边缘,您可以缓存并即时为浏览Shopify商店的消费者等待的内容提供服务- JSON数据可转换为您库存的不同产品,其价格和信息。 但要做到这一点,您需要一个能够理解您的应用的成熟CDN。

Layer0 CDN-as-JavaScript将缓存命中率优化到前所未有的水平,并将智能带到边缘。 这有助于企业主通过将类似页面(例如,PDP,PLP和Cart)分类,而不是仅仅显示无尽的URL列表,从而了解趋势和优化机会。 这使您可以采取行动并查看网站加载时间的差异。

Layer0 CDN-as-JavaScript在边缘对动态内容的缓存命中率为95%以上,而普通电子商务网站的平均缓存命中率为15%。 这种差异与预测性预取相结合,使大型电子商务网站在购物者面前保持5秒领先,无论他们在哪里点击。

有多难与Shopify Plus去无头?

选择一个电子商务平台来运行您的商店应该考虑到该平台对无头网站的支持以及支持次秒级网站的技术。 许多电子商务平台都是开箱即用的单片平台(即,它们将前端与后端相结合)。

虽然Shopify Plus不显式支持无头架构,但它允许零售商运行无头商店,并使用不同的前端框架(如React StoreFront )或无头CMS (如Contentful ),这是许多无头Shopify构建所使用的。

Shopify Plus提供了一个坚实的StoreFront API专有集合,通过允许访问平台的内容和组件,实现无头化。

请注意,Shopify Plus不正式支持无头网站,也不提供许多以速度为中心的开箱即用功能和技术。 这并不奇怪–该平台旨在管理您的库存,定价和数据,而实施这些技术通常需要大量的努力。 然而,有几个警告,Shopify Plus仍然是一个很好的选择,因为它使零售商相对容易去无头和实施关键的速度为中心的策略.

Shopify Plus的优点

  • 通过Storefront API,Shopify Plus为产品和订单处理提供了一个体面的参考,并且API记录良好。
  • GraphQL API格式 Storefront API提供现代,面向未来的格式GraphQL。

Shopify Plus缺点

  • 没有现成的PWA框架 Shopify Plus本身不支持PWA。 但是,有些卖家在平台上运行PWA。 为了实现这一点,商店可能需要前端(BFF)的后端,它允许您在StoreFront API和PWA前端之间运行微服务。 这是一种优化API并避免为每个客户端创建单独API的方法(并最大程度地减少客户端逻辑数量)。
  • 没有AMP开箱即用 Shopify Plus不提供任何专有的Accelerated Mobile Pages (AMP)解决方案(虽然可以通过Shopify App Marketplace中的付费应用实现AMP )。
  • API覆盖范围 Shopify在产品方面有相当好的API,并且许多其他方面没有完整的API覆盖范围。 例如,当Shopify Plus控制面板允许卖家在网站导航菜单中设置项目时,没有API来获取这些菜单项。 无头Shopify Plus实施不提供一个干净的方式来访问它们,而无需一点手臂摔跤和变通办法。
  • 限制 Shopify Plus限制您作为单个用户可以发出的请求数。 Shopify Plus具有用于API调用的特殊标头,因此BFF层不会被视为单个用户。 但是,由于上述API覆盖问题,请求可能并不总是实际的API调用,BFF层仍将它们视为来自单个用户。 即使该层为许多用户代理流量,也会发生这种情况。

Edgio (Layer0)如何简化该过程

我们知道阅读所有这些PWA,SSR,AMP和BFF三个字母的技术首字母缩写词会让您头晕目眩,更不用说自己实施这些技术可能会有点麻烦。 Edgio (Layer0)以高性能,可扩展的方式为您处理所有这些问题,几乎不需要DevOps或维护。

在Edgio (Layer0),我们致力于帮助客户获得可见性,覆盖范围,收入和客户满意度,这是唯一一个能够保证数据库驱动的电子商务网站的次秒级页面加载的平台。

我们帮助复杂,动态的电子商务网站实现次秒级速度,同时提高开发速度和利润增长,并降低DevOps成本。

除非客户愿意,否则我们不会赢得胜利。 我们的产品组合中有即时Shopify商店,它们实现了信念的飞跃,确保了它们在竞争激烈的电子商务环境中的地位。

Planet Blue如何在Moovweb XDN上成功推出了一个即时Shopify Plus商店

Planet Blue在Layer0上从16秒的浏览过渡到500毫秒(Edgio)

Planet Blue已从一家单一商店的有机服装采购商发展成为一家国际设计师和全渠道服装零售商。 他们在n ü ç 上的即时Shopify Store使他们能够提供卓越的购物体验。

在tayer0上发布之前,Planet Blue的移动页面加载时间为10秒。 超过70%的零售商移动流量严重影响了他们的转化率。 Planet Blue了解到,要满足客户需求并保持竞争力,就需要全面改进其移动体验。 在Layer0上发布可将浏览时间缩短95%(桌面上为16秒→0.5秒,移动设备上为10秒→0.5秒),给人一种在线目录的印象,用户浏览网站时不会产生任何摩擦。

Planet Blue通过Layer0获得的结果:

  • 通过Layer0上的即时网站,转化率同比提升31 %
  • 16s→0.5s转换 使台式机上的速度降低了97%
  • 10s→0.5s转换 使移动设备上的速度降低95%
  • 平均每台设备的首页加载量减少60%以上
  • 在瞬间加载页面的情况下,客户满意度评级提高了20%以上

  • 使用React Storefront构建的快速电子商务PWA
  • 服务器端呈现和AMP支持
  • 预测性预取
  • CDN-as-JavaScript优化边缘动态内容的缓存命中率,以便商店提前5秒预测购物者的点击次数。

摘要

向无头商务架构过渡是许多零售商的首要举措—梅西百货,沃尔玛,Target,Nike,Airbnb, 还有更多的人已经做出了改变。 这一趋势之所以获得关注,主要有三个原因:它提供了摆脱电子商务平台前端工具的限制的自由,允许实施可提高网站速度和SEO的最佳Web技术,并允许轻松实现未来的用例。

有了上面讨论的几个警告,Shopify Plus非常适合建立一个无头商店和实施关键的以速度为中心的技术。 你能承受被抛在后面吗?

Tags

Just For You