Shopify Plus is a popular SaaS eCommerce platform which has attracted some of the world’s biggest brands like Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez and Red Bull. The list goes on and on, and the wide adoption is no surprise–Shopify Plus is simple to use and easily customizable. It offers a plethora of plugins and APIs, and is backed by an incredibly responsive support team. What else could you expect from an eCommerce platform? Well, whether it’s with a Shopify store or otherwise, the answer remains the same: sub-second page load and SEO that beats your competitors.
Even the sleekest and most beautiful Shopify Plus website will stand no chance against the crushing competition from bigger retailers–unless the operator goes the extra mile to optimize the site for sub-second speeds.
Making your Shopify Plus store as fast as possible is one of the easiest ways to get your store to rank higher in SERPs and lift your conversion rates thanks to a superior, seamless shopping experience.
Table of contents
- Table of Contents
- Shopify lets you deliver products, not experiences
- The benefits of headless eCommerce
- How hard is it to go headless with Shopify Plus
- How the Moovweb XDN can simplify the process
- The secret behind the fastest Shopify Plus stores
- How Planet Blue successfully launched an instant Shopify Plus store on Moovweb XDN
Shopify lets you deliver products, not experiences
Many eCommerce platforms like Shopify Plus, Magento or Salesforce Commerce Cloud were built with a backend- and data-first approach, and very little focus on the actual customer experience. Their focus is on SKUs, not people. This puts the burden of website speed optimization on the platforms' customers, system integrators, designers and developers.
Whether your store runs on Shopify Plus or any other popular eCommerce platform or backend system, if you want to deliver the fastest experience out there you’ll need to implement advanced speed-focused web technologies, and for that you must first go headless.
The benefits of headless eCommerce
A headless eCommerce architecture is one in which a site’s frontend design (i.e. the presentation layer) is decoupled from its backend infrastructure. It’s a bit like using WordPress to manage the content of a mobile app (for what it’s worth, this is actually possible with WordPress’s REST API).
Going headless has been identified as one of the top initiatives for many retailers in 2020 and beyond. It allows retailers to pick the best-of-breed solution for their frontend independently of their backend so that stores can run faster, driving conversion rates and search ranking improvements. Headless eCommerce, also known as microservices architecture, is nearly a fail-safe way to gain an edge over the competition.
More specifically, headless eCommerce offers a number of benefits:
1. Faster speeds
Going headless is a prerequisite for implementing many speed-focused technologies. This is possible through shifting display logic to the client-side and streamlining the backend for the best performance. By focusing only on speedy delivery of content, the frontend can be faster and more responsive than one that leaves the hard work to the browser.
2. Freedom of choice
Many eCommerce platforms offer their users proprietary frontends. Shopify Plus is no different and comes with a selection of responsive themes based on Shopify’s Liquid templating language. By going headless, you can completely rid yourself of the shackles of vendor lock-in and reach beyond the platform’s frontend tooling. This leads to higher agility and lets you develop your frontend independently of your eCommerce platform’s roadmap.
3. Backend independence
An investment in a headless website future-proofs the store. You own the frontend code and can develop and invest in it with confidence. This gives you the flexibility to move it to another, cheaper or better eCommerce platform whenever you want. In such a case, even if your store has dozens of integrations with third-party tools, they don’t need to be re-written for the new eCommerce platform–you only have to swap out the APIs of the old platform with those of the new one.
4. Better SEO
A headless site isn’t just faster, it also has better SEO. With a headless website you can choose how to handle URLs, meta data, robots.txt files, and other aspects of your technical SEO. This is not supported by Shopify Plus out of the box.
5. Support for future use cases and endpoints
With a headless frontend, the likes of Progressive Web Apps (PWAs)/Single-Page Applications (SPAs), the operator can future-proof the store and freely add new endpoints and develop additional features. All you need to do is connect to APIs. By going headless, you can add virtually any device or platform as an endpoint and checkout for your store.
The secret behind the fastest Shopify Plus stores
Going headless is the foundation for implementing a number of advanced web technologies and optimization techniques which help develop faster, more responsive storefronts. When combined, they can help optimize any Shopify Plus website for maximum speed, SEO and revenue.
Portable PWA frontends
By going headless and coupling Shopify Plus with a PWA portable frontend you can gain lightning-fast browsing speeds on the website on mobile devices. With PWA your customers will enjoy an enhanced experience of instant page transitions. As fast as PWAs browsing transitions are, their first loads tend to take longer than those of traditional, multi-pages websites. To combat this and provide an blazingly-fast experience from landing through checkout, consider adding server-side rendering and AMP support to your PWA.
Server-side rendering (SSR)
SSR makes sure that visitors from email, social media and referrals experience speedy first-loads. With SSR support the PWA provides an enhanced experience of lightning-fast first-page loads as well as instant page transitions beyond just the first page.
Server-side rendering also leads to better SEO. eCommerce businesses depend on SEO and the only way to be 100% sure that your site will be understood by search and social bots and crawlers is to translate it into HTML.
Shopify Plus does not come with built-in SSR support.
Accelerated Mobile Pages (AMP)
Shopify Plus does not offer AMP or true SSR support out the box, which significantly hinders your ability to optimize first-page loads on mobile. You will need to add these capabilities to your website on your own. For both AMP and SSR, you’ll want a backend for frontend. More about that below.
Backend for Frontend (BFF)
BFFs play a central role in using APIs in headless eCommerce and microservice-based architecture. It’s a discrete layer in your application stack that allows a single client, e.g. a PWA or native Android or iOS mobile app, to more efficiently use shared APIs without the need to optimize those APIs for each client. It transparently ‘intercepts’ API calls and translates the arguments passed to make them understood by a specific endpoint.
BFF is the perfect place to do server-side rendering and AMP conversion for the frontend. A BFF also brings a number of other benefits for a Shopify store:
BFF and speed
Your frontend may need to orchestrate calls to multiple services and/or reformat response data to best suit the page design, this code needs to run somewhere. A BFF lets you keep this code out of the frontend bundle, keeping it small and fast. In most cases, responses are cacheable, so rather than running this shim code in every user’s device on every request, it’s run on the cloud which can scale to meet demand, and only when there’s a cache miss.
For mobile clients, too many HTTP requests are expensive in terms of time, adding unnecessary milliseconds with each call. In order to minimize the number of requests, the frontend generally tends to obtain associated data through a single API. It means that sometimes the backend will be responsible for UI-related logic processing to meet the needs of each client. This is an inefficient approach.
With a backend for frontend implemented, the frontend (mobile, web) only accesses the backend microservices through the BFF, and each client gets a separate BFF service. With a BFF, there are fewer mutual calls between microservices. This is because some UI logic is processed at the BFF level.
BFF and development velocity
A BFF increases developer velocity by letting distinct development teams work independently. It allows the developers to add new functionalities without the need to change the core APIs. This is especially useful if the APIs are provided by Shopify Plus and cannot be changed.
Minimizing vendor lock-in
In case you ever need to switch Shopify for another eCommerce platform, a backend for frontend reduces the effort and costs. This offers a huge benefit in the form of flexibility of the headless architecture.
For a deep dive about the BFF technology head over to a post on our blog written by Mark Brocato, our VP of Engineering.
Predictive prefetching and CDNs with edge computing
Predictive prefetching is an advanced capability used to pre-cache and render the page that a visitor is most likely to visit, before they click on it. A modern CDN with edge computing capabilities let’s you stream dynamic data to the edge and then to the users’ browsers before they request it. When combined, these technologies let your Shopify Plus store stay 5 seconds ahead of the shopper, no matter where they tap.
By prefetching and streaming dynamic data to the edge, you can cache and instantly serve what consumers browsing your Shopify store are actually waiting for–the JSON data that translates to the different products you have in stock, their prices and information. But in order to do this you need a sophisticated CDN that understands your app.
How hard is it to go headless with Shopify Plus?
The process of choosing an eCommerce platform to run your store should factor in the platform’s support for headless websites and the technologies enabling sub-second sites. Many eCommerce platforms are monolithic out of the box (i.e. they combine the frontend with the backend).
While not explicitly supporting headless architecture, Shopify Plus does allow retailers to run headless stores and use a different frontend framework (such as React Storefront) or a headless CMS like Contentful, which is used by many headless Shopify builds.
Shopify Plus offers a solid proprietary collection of storefront APIs which make going headless possible by enabling access to the platform’s content and components.
Please note that Shopify Plus does not officially support headless websites and does not offer many speed-focused capabilities and technologies out of the box. This is not surprising–the platform is simply meant to manage your inventory, pricing and data, and implementing these technologies often requires lots of effort. However, with a few caveats, Shopify Plus is still a great choice as it makes it relatively easy for retailers to go headless and implement key speed-centered tactics.
Shopify Plus pros
- Great APIs for product info
With Storefront API, Shopify Plus offers decent reference for products and order handling, and the APIs are well documented.
- GraphQL API format
Storefront API is available in the modern, future-proof format GraphQL.
Shopify Plus cons
- No out-of-the-box PWA framework
Shopify Plus does not support PWAs natively. However, some merchants do run PWAs on the platform. To make this possible, the store may require a Backend for Frontend (BFF), which allows you to run microservices between the storefront API and the PWA frontend. This is a way to optimize the APIs and avoid creating separate ones for each client (and minimize the amount of client-side logic).
- No AMP out of the box
Shopify Plus does not offer any proprietary Accelerated Mobile Pages (AMP) solution (although implementing AMP is possible with paid apps from the Shopify App Marketplace).
- API coverage
While Shopify has decent APIs around products, there isn't full API coverage for many other things. For example, while the Shopify Plus control panel lets a merchant set the items in the site navigation menu, there isn't an API to get those menu items. A headless Shopify Plus implementation doesn't offer a clean way to access them without a bit of arm-wrestling and workarounds.
Shopify Plus puts limits on how many requests you can make as a single user. Shopify Plus has a special header for API calls so that the BFF layer isn’t counted as a single user. However because of the API coverage issues mentioned above, the requests may not always be actual API calls and the BFF layer will still count them as coming from a single user. This happens even though the layer it's actually proxying traffic for many users.
How the Moovweb XDN can simplify the process
We understand that reading about all those PWA, SSR, AMP, BFF three-letter tech acronyms can make your head spin, not to mention implementing these technologies on your own could be a bit of a hassle. The Moovweb XDN handles all of this for you in a performant, scalable way that requires little to no DevOps or maintenance.
At Moovweb, we are dedicated to helping our customers win visibility, reach, revenue, and customer satisfaction with the only platform that guarantees sub-second page loads for database-driven eCommerce websites.
We help complex, dynamic eCommerce websites achieve sub-second speeds, while increasing developmental velocity and bottom-line growth and reducing DevOps costs.
We do not win unless our customers do. We’ve got instant Shopify stores in our portfolio who made the leap of faith to secure their position in the highly competitive eCommerce landscape.
How Planet Blue successfully launched an instant Shopify Plus store on Moovweb XDN
Planet Blue has grown from a single-store purveyor of curated organic apparel to an international designer and omni-channel apparel retailer. Their instant Shopify Store on the Moovweb XDN allows them to deliver a superior shopping experience.
Prior to launching on the Moovweb XDN, Planet Blue’s mobile pages took 10 whole seconds to load. Considering that over 70% of the retailer’s traffic is mobile, it seriously impacted their conversion rates. Planet Blue understood that an overhaul of their mobile experience was needed to meet customer demands and remain competitive. By launching on the Moovweb XDN, they reduced navigation time by 95% (16sec → 0.5sec on desktop and 10sec → 0.5sec on mobile), giving the impression of an online catalogue with no frictions as users browse through the website.
Planet Blue’s results with Moovweb XDN:
- 31% YoY lift in conversion rate with an instant site on the XDN
- 16s → 0.5s transitions reducing speeds by 97% on desktop
- 10s → 0.5s transitions reducing speeds by 95% on mobile
- 60%+ reduction in first-page loads on average across devices
- 20%+ increase in customer satisfaction ratings with pages loading in the blink of an eye
Planet Blue was able to achieve sub-second speeds on the XDN speed with a combination of advanced technologies:
- A blazingly-fast eCommerce PWA built with React Storefront
- Server-side rendering and AMP support
- Predictive prefetching
You can read the full Planet blue case-study here.
Transitioning to a headless commerce architecture is a top initiative for many retailers—Macy’s, Walmart, Target, Nike, Airbnb and more have already made the switch. The trend is gaining traction for three main reasons: it offers freedom from the limitations of the eCommerce platform’s frontend tooling, allows to implement best-of-breed web technologies that boost website speed and SEO, and enables easy implementations of future use cases.
With a few caveats discussed above, Shopify Plus lends well for building a headless store and implementing key speed-centered technologies. Can you afford to be left behind?