Faster Response Times with Headless Shopify

Headless Shopify implementations can make use of Jamstack’s well-known ability to deliver faster response times. Because of the way headless setups work, frontends will typically have the ability to load much faster for the end user. This is down to the fact that headless Shopify stores don’t require constant connections or frequent network requests to retrieve product or page data, as this is effectively “cached” during a build stage. Static site implementation is commonly used for headless Shopify stores, which involves fetching all the product data up front (during what’s known as a “build” stage), and subsequently creating the required product and category pages. When users try to load these pages, their browser returns something they already exists.

In contrast, non-headless implementations will typically build the page at the time the user requests it. In simpler terms, using static site generation for your headless Shopify store effectively “caches” all the data, allowing pages to be delivered at incredible speeds. Users are no longer waiting for a server to process requests and query a database; they are instead served with a pre-built page that includes all of the information they expect to see. This is one of the key benefits to headless setups, in that they provide the ability to prebuild and aggressively cache content where desired.

A typical use case for this is for pages that are not frequently updated, or don’t require a real-time network request to be sent. For example, a Shopify store that adds new products once a week could benefit from static site generation with a headless setup, because page content would remain the same for a whole week, until new products are added to the shop’s lineup.

You can serve pages that are largely cached for the time period between product updates or additions, and the site will rebuild itself once an update is made. This leads to the faster response times, as large amounts of the site have been prebuilt and cached ahead of the end user’s request. Of course, even with a static site implementation, some aspects of the store will always return real-time information; such as stock status, the user's cart object, and account pages such as order history.

But these requests are few and far between, contrasted to the incomparable number that would be required to constantly generate pages as a user navigates through a traditional, non headless e-commerce store. When you multiply those requests by the number of users visiting the store, it’s easy to see how this quickly racks up; ultimately demanding more of a server due to the frequency of network requests. With a headless Shopify store, you can vastly reduce the number of real-time network requests that are made by a user, by serving pages that are pregenerated and have been cached ahead of time.

Headless storefronts come with all the perks of Jamstack, which means that if you opt for real-time data fetching (perhaps your store’s content is updated too frequently for static site generation to make sense), there are still performance benefits to gain.

For a start, headless Shopify stores boast the ability to selectively define which data is fetched at runtime (real time data fetching as the user browses the site), and which data is fetched at build time (in order to pre generate the page so it can be served without the requirement to fetch the data live). So even if your headless approach does not make use of static site generation on the whole, you’re able to reduce overall runtime network requests by selectively storing some of that data from the earlier build process. That’s still going to know a difference to overall show performance and response times.

Furthermore, though, various frameworks utilized for headless Shopify development support pre-fetching of data during runtime. Gatsby is a good example here. Gatsby has long supported pre-fetching: It does this by identifying which links on a page the user hovers over, and starts fetching the data before the user even clicks the link. This activity is imperceivable to the end user, meaning that they aren’t even aware it’s happening. This is a real winner when it comes to response times, as the page subsequently loads significantly faster once the user actually clicks. This is a game changer for user experience, reducing perceived load times.

The Jamstack approach overall lends itself to improved response times and more aggressive cacheability, so it’s likely that your Headless Shopify Developer will be utilising additional techniques besides prefetching data and optimising build time vs runtime data fetching.

One such example is gatsbys impressive image compression and lazy loading (blur up) functionality. For headless Shopify sites that utilize build time data fetching, images can be downloaded and optimized through compression, and served to the end user through Gatsby's image plugin. Not only does this reduce response time through lazy loading of the image, it means that the file is served by the same origin as the storefront itself, (rather than using the Shopify URL for the original image), and this can reduce the time lost to the additional DNS lookup. Factor in a headless CMS as well, and you could be losing time for each additional DNS lookup.

It’s good to note that it’s not always as straight forward as this, as browsers are known for also rate limiting the number of simultaneous requests to the same host, which effectively throttles the overall download speed of these resources required to serve the page, but it’s good practice to trial the various options for image/asset compression to determine which provides the optimal overall download speed for key pages.

Overall, it’s easy to see how headless architecture can utilize multiple techniques to optimize page speed for the end user, providing superior developer tooling for improving the user experience.

A note on caching

With a number of individual layers to headless architecture, your options for caching are significantly improved compared to standard Shopify.

Besides the performance level of your Shopify Liquid theme, there isn’t a whole lot you can do to improve response time on Shopify-hosted sites. In general, Shopify does a reasonable job of delivering pages at a good, reliable speed, but your options for caching aren’t configurable.

With Headless Shopify, you have a variety of options available:

These strategies allow headless storefronts to cache far more than simply assets and images, offering opportunities to further optimize pagespeed and response time.

Building a more interconnected stack, with deep integrations with Headless Shopify

Fundamentally, the Jamstack approach fosters high-level integrations and API-based methodology. After all, this is key to developing modern, interconnected experiences.

Integrating your solution with existing CRMs and ERPs, as well as third-party platforms and tools, can provide a Headless Shopify implementation that provides far more than just a superior storefront. Marketing automation, deeper insights and analytics, and new opportunities for data processing are just some of the higher-level components that can make up an efficient Headless Shopify structure.

Leveraging Webhooks to build more interconnected experiences with Headless Shopify

The two fundamental capabilities of the APIs that Shopify provides are the ability for headless storefronts to retrieve data from Shopify (about your store and products), and to send data back (to process an order, for instance).

This is great for the majority of data requirements that headless Shopify stores will need at first.

However, Shopify additionally provides a web hook functionality for developers to implement further advanced functionality into your overall build and its workflows and pipelines.

Think of Shopify webhooks as notifications. They provide the ability to receive information as-it-happens, and are sent from Shopify to your third party application, without your application requesting the information directly or continually.

This allows us to do some really cool things with headless Shopify. The most basic example would be triggering a rebuild of the storefront automatically, whenever product information is updated. This offloads an additional step, meaning that the store owner nor your developer are required to manually push updates to the site (even if it were static) in the form of rebuilding and deploying. Your Shopify developer can implement this to so that it happens automatically, each time a notification is sent by the Shopify webhook.

Webhooks allow far more complex and impressive workflows to be triggered, however.

They can be integrated within your headless Shopify setup to push data to different endpoints, including various third party applications that you may be using. Popular requests are to implement automatic notifications with a separate headless CMS, third party CRM, or even mailing lists.

Lots of powerful things can be done using the webhooks functionality, but in the context of headless Shopify, it provides an ability to automate functions and trigger external workflows upon a vast array of events that may occur within Shopify.

A note on Shopify Apps

Fear not, Headless Shopify can still be compatible with your existing Shopify Apps. In reality, it depends entirely on the function of your Apps and whether they are responsible for enhancing backend or frontend functionality.

Any Shopify Apps that are aimed at enriching the administration and management experience of your Shopify store will generally be more-or-less compatible with your new Headless setup.

The same can't be said for frontend-related apps, as these wouldn’t be interacting with your new decoupled storefront.

Obviously, your development partner will need to assess your existing apps to identify which will continue to enhance your Shopify administration experience well into your journey toward decoupled Jamstack architecture.

Implementing powerful solutions for User Management & Authentication with Headless Shopify

Due to the level of flexibility that comes with headless shopify, e-commerce stores have greater control of how users are managed and how they authenticate.

While Shopify does provide some ability to store user data, it’s often preferred to implement a custom authentication flow on a Headless Shopify store, given the newfound control

You can achieve better results with an alternative tool, such as Auth0, for authenticating users and storage of user data. This puts the authentication process in the hands of your store, ultimately providing more control.

If you have an existing userbase elsewhere, integrating SSO (Single Sign-on) with your existing application is also a possibility, eliminating the need to implement separate authentication for users of your Headless Shopify store.

Of course, enriching the authentication process with social login is possible, too.

Overall, authentication of users and the storage of user data can become infinitely more flexible for Headless Shopify stores. Using a secure, managed authentication solution such as Auth0, another provider, or a custom user database provides greater flexibility and control to store owners, and can potentially offer additional benefits to end users depending on the implementation.

Enjoy next-to-no setup for Headless Shopify with our proficient Headless Commerce Development Team.

Shopify makes it super easy to get started with Headless Commerce, and this is true for both merchants and developer partners, providing options to kickstart development of your Headless Shopify store through abundant APIs and starters.

For merchants, there’s practically nothing to do in order to prepare your existing Shopify site for a move to headless. There arent any complicated settings adjustments to make, besides creating and enabling some security tokens with the possible addition of webhook configuration. These tasks can be carried out by your developer or agency partner, so as a store owner there generally won’t be much required of you. By and large, how you’ve been managing your products, inventory and orders in Shopify won’t change, and you can continue to add products and adjust collections just as you would have before.

For developers, Shopify provides various APIs for consuming and sharing data to and from your Shopify store. Shopify provides multiple APIs, such as the Storefront API, GraphQL Admin API, REST Admin API, etc. Shopify's GraphQL APIs are a popular choice for headless commerce development, due to their high performance. GraphQL is a performant query language that fits well into any Headless Storefront setup.

Each of Shopify's APIs provides a different core functionality and are intended for slightly different use cases. This means that developers are empowered with the tools to create functional headless e-commerce stores with Shopify.

Additionally to the APIs provided, Shopify provides various starters (Hydrogen is Shopify's latest addition), for an improved developer experience which is particularly useful for kickstarting a project’s development.

In summary, Shopify makes it easy on both store owners and developers to utilize the strengths of headless commerce, by requiring minimal setup by merchants on the Shopify side.

Introduce powerful business logic layers with Headless Shopify.

When introducing new layers into your architecture, a great deal of additional possibilities are introduced.

Merchants are able to perform deeper levels of commerce logic in a layer between the frontend and Shopify’s backend.

When users take actions on a headless Shopify store, developers are able to implement additional functions or logic prior to sending a request to Shopify, creating room to build higher levels of custom functionality into your application.