Shopify Plus is a popular SaaS eCommerce platform that 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? Whether 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.
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 burdens website speed optimization on platform 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, you’ll need to implement advanced speed-focused web technologies. 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 possible with WordPress’s REST API).
Traditional, monolithic eCommerce architecture
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 ranking improvements. Headless eCommerce, also known as microservices architecture, is nearly a fail-safe way to gain an edge over the competition.
An API layer allows the decoupling of a site’s frontend from its backend
More specifically, headless eCommerce offers several 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 the 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 has 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 confidently develop and invest in it. This allows you 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 rewritten 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, metadata, robots.txt files, and other aspects of your technical SEO. Shopify Plus does not support this out of the box.
5. Support for future use cases and endpoints
With a headless frontend like Progressive Web Apps (PWAs)/Single-Page Applications (SPAs), the operator can future-proof the store, freely add new endpoints, and develop additional features. All you need to do is connect to APIs. You can add virtually any device or platform as an endpoint and checkout for your store by going headless.
The secret behind the fastest Shopify Plus stores
Going headless is the foundation for implementing several advanced web technologies and optimization techniques that help develop faster, more responsive storefronts. 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 traditional, multi-page websites. To combat this and provide a blazingly-fast experience from landing through checkout, consider adding server-side rendering and AMP support to your PWA.
Server-side rendering (SSR)
Server-side rendering is a crucial web technology that accompanies speedy PWAs. Without server-side rendering, the browser must download, parse, and run all the JavaScript code before rendering anything on the screen. PWAs without SSR struggle to achieve a time to first meaningful paint (TTFMP) below 2.5s on simulated 3g. Coupled with a modern CDN with edge computing capabilities, a site that uses SSR can achieve nearly instant TTFMP times.
SSR ensures 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 and 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.
This is especially important if you build a JavaScript-heavy eCommerce PWA frontend for Shopify Plus. You must render your pages on the server because crawlers and bots don’t reliably index JavaScript content.
Shopify Plus does not come with built-in SSR support.
Accelerated Mobile Pages (AMP)
Google AMP is an open-source framework for creating super-fast mobile web pages by simplifying the HTML and enforcing stringent limitations on CSS and JavaScript. The average AMP page loads in 500 milliseconds from search. These pages are cached and pre-rendered on the Google server, which is how they are delivered quickly.
Shopify Plus does not offer AMP or true SSR support out of 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 is below.
Backend for Frontend (BFF)
BFFs play a central role in using headless eCommerce and microservice-based architecture APIs. 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 use shared APIs more efficiently without optimizing them 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 many other benefits to 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, and 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. 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
If 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 the flexibility of the headless architecture.
BFF-based frontend and backend decoupling
Predictive prefetching and CDNs with edge computing
Predictive prefetching is an advanced capability used to pre-cache and render the page visitors are most likely to visit before they click on it. A modern CDN with edge computing capabilities lets you stream dynamic data to the edge and then to the users’ browsers before they request it. 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 waiting for–the JSON data that translates to the different products you have in stock, their prices, and information. But to do this, you need a sophisticated CDN that understands your app.
Layer0 CDN-as-JavaScript optimizes cache hit ratios to unheard-of levels and brings intelligence to the edge. This helps business owners decipher trends and opportunities for optimization by categorizing similar pages as such (for example, PDP, PLP, and Cart) instead of just displaying an endless list of URLs. This lets you take action and see a difference in website load times.
Layer0 CDN-as-JavaScript has a 95%+ cache hit ratio for dynamic content at the edge, while the average eCommerce website has an average cache hit ratio of 15%. This difference, along with predictive prefetching, keeps large eCommerce websites 5 seconds ahead of the shopper, no matter where they tap.
How hard is it to go headless with Shopify Plus?
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, making 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 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 a 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, and 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.
- Throttling Shopify Plus limits how many requests you can make as a single user. Shopify Plus has a special header for API calls, so 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 proxying traffic for many users.
How Edgio (Layer0) can simplify the process
We understand that reading about all those PWA, SSR, AMP, and 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. Edgio (Layer0) handles all this for you in a performant, scalable way that requires little to no DevOps or maintenance.
At Edgio (Layer0), 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 that 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 went from 16-second browsing transitions to 500 milliseconds on Layer0 (Edgio)
Planet Blue has grown from a single-store purveyor of curated organic apparel to an international designer and omnichannel apparel retailer. Their instant Shopify Store on the ç allows them to deliver a superior shopping experience.
Before launching on tayer0, Planet Blue’s mobile pages took 10 seconds to load. Over 70% of the retailer’s mobile traffic seriously impacted their conversion rates. Planet Blue understood that an overhaul of its mobile experience was needed to meet customer demands and remain competitive. Launching on Layer0 reduced navigation time by 95% (16sec → 0.5sec on desktop and 10sec → 0.5sec on mobile), giving the impression of an online catalog with no friction as users browse through the website.
Planet Blue’s results with Layer0:
- 31% YoY lift in conversion rate with an instant site on the Layer0
- 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
- A blazingly-fast eCommerce PWA built with React Storefront
- Server-side rendering and AMP support
- Predictive prefetching
- CDN-as-JavaScript to optimize cache hit rates for dynamic content at the edge so the store can predict the shopper’s clicks 5 seconds ahead.
Summary
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 for the implementation of 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 to building a headless store and implementing key speed-centered technologies. Can you afford to be left behind?
