Why Gatsby + Shopify is the perfect ecommerce stack

August 22nd, 2020

When it comes to ecommerce, site speed isn't just a nice bonus or added convenience - site speed is everything.

A study done by Amazon, and another done by Akamai in 2017, found that for every 100 milliseconds it takes for an ecommerce site to load, you can expect to lose 1% in sales.

The "milliseconds" is not a typo - for each additional second in load time, that's 10% in lost sales!

When I first heard these statistics, I was floored.

Who knew that having a site that is just a second faster could mean the difference between profitability and bankruptcy?

So if I'm an online store owner who understands this importance and wants to build the fastest online store humanly possible, how can I accomplish this?

Sounds like a job for GatsbyJS.

Why Gatsby?

Gatsby sites feel insanely fast primarily because Gatsby is used alongside React, a cutting-edge frontend technology used to build SPAs (single page applications) that make for the snappiest UI/UX experiences on the web - Facebook, Twitter, and many other tech titans use React on their frontends.

Additionally, Gatsby builds and pre-renders your website pages on the server, instead of sending them to be rendered by the client. This means the entire site is processed into static files that are on standby, ready to be served instantly. This further increases page load speed.

Perhaps just as important is that unlike generic React apps, Gatsby maximizes SEO because all of your site's content (markup, html tags, etc.) is already rendered on the page and ready to be indexed by the Google's search algorithm.

In short, Gatsby more or less allows you to make the most performant website that can possibly be made today. Though there are plenty of Hondas and Toyotas out there, Gatsby is one of the few Ferrari's of modern web development.

Fun fact: the blog you are currently reading is a Gatsby site - go ahead and click around and tell me it's not fast...

Why Gatsby is perfect for selling online

Not only is Gatsby lightning fast, it also has a wealth of plugins that handle many ecommerce specific tasks really well - things like optimized image-handling (important if you have many product images) and easy integrations with CMSs (including Wordpress, Contentful and Sanity).

Because Gatsby website pages are pre-rendered instead of having to fetch their content every time a user requests a page, Gatsby sites scale effectively out of the box. If you build an ecommerce site with Gatsby, you can worry less about your site crashing at the exact moment you stand to make the most money. You will be rewarded for attracting a huge surge of customers, rather than punished for it.

When it makes sense to reach for Gatsby

The only catch is that if you are an entrepreneur trying to sell product online and you don't know how to code a Gatsby site yourself, it is going to cost you to hire a developer/agency to build one for you. If you are just starting out, it makes more sense to get started at little cost using a basic Shopify theme that will give you a fully functioning site with checkout.

However, if you have already had success selling products online and are doing tens of thousands in monthly sales, you should seriously consider making the move to a headless setup. Depending on your brand and the quality of your current site, you could be in for an insane increase in conversions - I have personally seen companies who make the switch to headless increase their conversions by over 30%!

What does making this switch mean for the store owner?

Thanks to some awesome Gatsby plugins, if the owner is using Shopify to manage their products already, they don't need to change a thing.

They keep all of their product photos, prices, inventory, etc. in Shopify just as before - the only difference is that instead of all that product data getting sent to some slow, rigid Shopify theme, it gets routed to a custom built Gatsby frontend - something the developer takes care of.

And from the developer's perspective, it is the same experience as building any React site. There are also some awesome libraries out there that handle a lot of ecommerce specific frontend tasks (adding/removing items to the cart, etc.) and even allow you to use Shopify's full-featured checkout page if you don't feel like building one out from scratch.

Last word

Whether you know how to code and want to make your first ecommerce store as fast and performant as it can be, or you're a brand that's already had some success and you're looking to take your conversions to a whole new level, Gatsby & Shopify gets my vote as the best way to go.

© 2020 All Rights Reserved