Shopify Plus是一个广受欢迎的SaaS电子商务平台,吸引了一些世界最大的品牌,如特斯拉,维多利亚贝克汉姆美容,斯台普斯,奥利奥/亿滋和红牛。 该列表还在继续,广泛采用并不令人惊讶–Shopify Plus易于使用,易于自定义。 它提供了大量的插件和API，并由响应速度惊人的支持团队提供支持。 您还能从电子商务平台期待什么？ 无论是与Shopify商店或其他,答案保持不变:亚秒页面加载和搜索引擎优化,击败你的竞争对手.
即便是最光滑，最漂亮的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模板语言的响应主题选择。 通过无头，您可以完全摆脱供应商束缚，超越平台的前端工具。 这将提高灵活性，并使您可以独立于电子商务平台的路线图来开发前端。
3.后端独立性
对无头网站的投资可确保商店满足未来需求。 您拥有前端代码，并且可以自信地开发和投资它。 这可以让你移动到另一个,更便宜或更好的电子商务平台,只要你想要. 在这种情况下，即使您的商店与第三方工具集成了几十种，它们也不需要为新的电子商务平台重写-您只需将旧平台的API与新平台的API交换出来。
4.更好的搜索引擎优化
无头网站不仅速度更快，而且还具有更好的搜索引擎优化(SEO)。 借助无头网站，您可以选择如何处理URL，元数据，robots.txt文件以及技术搜索引擎优化(SEO)的其他方面。 Shopify Plus开箱即用不支持此功能。
5.支持未来的用例和端点
借助Progressive Web Apps (PWA)/ Single-Page Applications (SPA)等无头前端，运营商可以让商店顺应未来发展，自由添加新端点并开发其他功能。 您只需连接到API即可。 您几乎可以将任何设备或平台添加为端点，并通过无头方式结账。
最快Shopify Plus商店背后的秘密
实现无外设是实施多种高级Web技术和优化技术的基础，这些技术有助于开发更快，响应更迅速的店面。 结合起来,他们可以帮助优化任何Shopify Plus网站,以获得最大的速度,搜索引擎优化,和收入.
便携式PWA前端
通过去无头和耦合Shopify Plus与PWA便携式前端,你可以获得在移动设备上的网站上的闪电般的快速浏览速度。 借助PWA，您的客户将享受到更好的即时页面过渡体验。 与PWA的浏览过渡一样快，他们的初始加载时间往往比传统的多页网站更长。 要解决这一问题，并提供从登录到结帐的极速体验，请考虑在PWA中添加服务器端渲染和AMP支持。
服务器端呈现(SSR)
服务器端渲染是一种与快速PWA配套的关键Web技术。 如果没有服务器端呈现,浏览器必须下载，解析和运行所有JavaScript代码,然后才能在屏幕上呈现任何内容。 没有SSR的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代码,而是在云上运行,云上可以扩展以满足需求,并且只有在缓存未命中时才会运行此Shim代码。
对于移动客户端，太多的HTTP请求在时间上非常昂贵，每次调用都会增加不必要的毫秒。 为了最大限度地减少请求数，前端通常倾向于通过单个API获取关联数据。 这意味着有时后端将负责UI相关的逻辑处理,以满足每个客户端的需求。 这是一种效率低下的方法。
实施前端后端后端后端后端(移动端，Web)只能通过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和购物车)，而不是仅仅显示无穷无尽的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不提供任何专有的加速移动页面(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 (Edgio)上从16秒浏览过渡到500毫秒
Planet Blue已经从一家精选有机服饰的单一商店供应商发展成为一家国际设计师和全渠道服装零售商。 他们的即时Shopify Store在n ü ç 上使他们能够提供卓越的购物体验。
在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秒预测购物者的点击量。
摘要
过渡到无外设商务架构是许多零售商的首要举措，包括梅西百货，沃尔玛，塔吉特，耐克，Airbnb等。 这一趋势越来越受欢迎有三个主要原因：它提供了电子商务平台前端工具的限制，允许实施同类最佳的Web技术，从而提高网站速度和搜索引擎优化，并允许轻松实施未来的用例。
Shopify Plus在上面讨论了一些注意事项,很好地帮助建立一个无头商店和实施关键的以速度为中心的技术。 你能负担得起被抛在后面吗？
