Headless commerce ROI calculatorCalculate on "Headless commerce ROI calculator"

Back to overview

Why Is My Shopify Store So Slow? (5 Potential Culprits)

Kaya Ismail • 14 July 2022

At some point in their company’s growth, many Shopify store owners ask, “why is my Shopify store so slow?” While the answer isn’t always straightforward, there are some common truths about Shopify’s themes and underlying programming language.


Slow loading times can have a detrimental effect on the customer experience, so solving for speed should always be a priority.

Why is my Shopify store so slow?

1. Shopify Is Held Back By jQuery

When using modern JavaScript libraries and frameworks, most developers will consider React, Vue, and Angular at the top of the list. One library which is no longer as popular, however, is jQuery. 


jQuery has been around since 2006, and many websites still use it today as the library helps simplify HTML DOM traversal and manipulation. According to BuiltWith, jQuery is still used by over 79% of the top 1 million websites, yet that usage has been trending downwards over the last two years in particular.

However, jQuery is no longer the primary choice for modern developers to add JavaScript to websites and applications. While jQuery relies on direct interactions with the DOM, other libraries like React offer a virtual DOM instead, enticing many developers to bypass jQuery. Consequently, jQuery has become outdated and results in slower Shopify themes. 


2. Shopify’s Liquid Templating Language Is Inefficient 

Another issue is Shopify’s templating language Liquid. Written in Ruby, Liquid is the foundation for all Shopify themes as it allows dynamic content to be loaded onto the website.

However, some themes use overly complex code that can slow down your Shopify store. Since Liquid is specific to Shopify, it can be difficult to customize, and even basic tasks can be challenging to execute. It also means that the number of developers with expertise in Liquid is limited, and creating a bespoke website is almost impossible. 

In addition, Liquid is a very inefficient programming language for rendering. Instead, developers may favor modern frameworks and libraries like React or React Native. 


3. Shopify’s Server-Side Rendering Problem

Another issue with Shopify stores is that Shopify uses Server-Side Rendering (SSR) instead of Static Site Generation (SSG). When someone visits a page on a Shopify store, the HTML is generated on the server and sent to the client to view in the browser. This makes eCommerce stores slow, expensive to scale, and weakens security as with server-side rendering, frequent requests between the client and server enable gaps that hackers can exploit. 


Having to generate pages every time also negatively affects scalability. The more users that visit your eCommerce site, the more compute power and dedicated servers are required, which means higher hosting costs.


On the other hand, static sites can solve these security and scalability problems. Static sites are pre-built and delivered to the browser exactly as the files are stored on the server. Since they don’t need to be rendered every time a visitor comes to the site, it allows them to handle higher traffic volumes and reduce hosting costs. Less frequent communication with the backend boosts static site security as well and is a crucial component of adopting headless commerce and Jamstack. 


4. Your Store’s Unhealthy Diet of Shopify Apps

Many Shopify stores use an assortment of apps and themes that allow you to customize the store. However, in most cases, these apps aren’t optimized for performance, leading to unresponsive pages until all of the apps are loaded. 


Loading times are also increased due to how eCommerce stores use third-party tracking scripts. Each app adds code to your Shopify store, which the browser needs to process before it can be rendered on the page. Alone this can be not easy to manage, but when Shopify’s server-side rendering process is added into the mix, it takes much longer to load. While Shopify apps can be beneficial when used sparingly, installing additional plugins to track, personalize, or localize your content adds to loading times. 


5. Cascading Issues Making Shopify APIs Slow

Slow API calls are another problem that can slow down a Shopify store. The reality is that Shopify APIs on their own aren’t slow at all, but one of the other issues we’ve mentioned can present themselves as slow API calls. 


APIs enable different software applications to communicate by sending data to each other. To facilitate this data exchange, requests are sent to the server, processed, and then returned to the application requesting it via an API. In order to manage the number of requests, APIs set rate limits to prevent the server from being overloaded. 


Shopify APIs work using what is known as the leaky bucket algorithm to manage those requests. It allows applications to make unlimited requests in infrequent bursts and manage API calls responsibly. 


As a result, Shopify APIs can be incredibly fast, allowing them to circumvent many speed issues. However, to get the most out of them, the APIs should be used as part of a headless commerce setup or a frontend as a service tool. 


How Frontend as a Service Tools Speed Up Shopify Stores

If you’re suffering from a slow-loading Shopify store, it can cause potential visitors to abandon their search, which results in lost traffic and decreasing revenue. However, frontend as a service tools can help to alleviate these challenges and speed up your store. 


Every eCommerce store has a frontend that the site visitor sees and a backend where all the nitty-gritty details are managed. Frontend as a service tools are separated from your eCommerce store and connect to the backend using APIs. Instead of using Shopify themes and apps, you can use Shopify to manage the eCommerce details such as inventory, payments, and processing orders. Meanwhile, a frontend as a service tool can manage all of your design and coding needs and allow you to embrace concepts like headless or composable commerce


Adopting a frontend as a service tool can remedy many issues plaguing Shopify stores. Modern frameworks like React and Vue can be used instead of jQuery, and content can be rendered as static sites rather than using server-side rendering. This allows your APIs to maintain their speed and facilitates connections with other tools that help to improve the customer experience.  


Instant Commerce: Frontend as a Service For Your Shopify Store

If you’re ready to speed up your Shopify store with the help of a frontend as a service tool, look no further than Instant Commerce. Our no-code solution makes it easy to set up a headless storefront, using pre-built components, in just a few days. The component-based approach allows Shopify merchants to introduce headless commerce without constantly depending on developers to support them. 


With Instant Commerce managing the frontend experience and Shopify the backend eCommerce functionality, you can speed up your store, increase conversions and improve the user experience.  Discover how to get more out of Shopify by reading: Headless commerce with Shopify: the complete guide.

Sharing

Get weekly updates

Become better at increasing conversion

All things headless commerce, eCommerce best-practices, and Instant Commerce updates.

We won’t put any spam in your mailbox, promised.

Author / Writer
Kaya Ismail
Content Marketer

We use cookies!

Our website only uses essential cookies to ensure its proper operational behaviour and minimum tracking cookies for our online analytics. For more details on cookies, read our privacy policy.