How to speed up your Shopify store to boost conversions

By Steve Sewell

Shopify is an incredible platform to build an online business. The platform comes with an entire ecosystem of apps and partners to give you tools to build and customize your store.

But, what you might not know is that many changes you make to your store actually come with a performance cost. Whether it's a new app you added, or a new feature an expert added to your store, each change has the potential to slow down your store. This site performance slowdown can reduce your conversions, potentially outweighing the benefits of the changes that were made.

The conversion paradox

The more apps and changes you add to try and improve conversions for your store, the more you might be hurting your conversions due to the incremental performance cost of adding the additional tools and code. We call this phenomena the conversion paradox.

Below we break down the common culprits that slow down your Shopify storefront and hurt your conversions, and what you can do about them.

Culprit #1 - Theme code bloat

The cause

As a general rule of thumb, the more features and functionality you add to your store's theme over time, the higher the likelihood of accumulating bloat. Every code addition has an incremental performance cost, which also means an incremental decrease in conversions.

Solution #1 - Developer audits

Generally speaking, your theme needs regular performance audits - looking for unused and suboptimal code. Agency partners area a great resource for this area and can be hired to do this work and significantly improve your storefront's performance.

Another alternative is doing a fresh, optimized store build, either as a new Shopify theme or a headless site, which can give you a clean slate to re-optimize your storefront's performance and boost conversions.

Solution #2 - No-code CMS

Using a no-code content management system (CMS) like Builder.io can allow you to add rich functionality that connects to your theme but largely lives outside of it. This means that content that is no longer used is cleaned up automatically, so no maintenance is required.

Visually editing a storefront in Builder.io

Culprit #2 - Apps

The cause

For the same reason theme code can bloat your store, excessive apps can as well.

Most apps are not as optimized for your store as if a developer wrote the code by hand. For example, an app widget (e.g. for related products, reviews, etc) needs to be coded in a way to handle all possible store and customization scenarios.

This is in contrast to how a developer would write code optimized for your specific store setup, only including the features and customization needed. Without these customizations, apps end up needing to include a lot more code than your store actually needs, which slows your site down.

Solution #1 - Custom developer integrations

One solution here is for developers to hand optimize code, by integrating directly with an app's APIs and avoiding the additional code bloat that comes with downloading widgets per app at runtime in the browser. This can significantly improve performance, but requires significant developer investment to create, and dependence on developers to continue to maintain and update.

Solution #2 - HeadlessApp.Store

To be able to benefit from the higher performance of API-driven integrations without the drawbacks of integration and maintenance cost, we spearheading a solution called HeadlessApp.Store.

This public, open source project leverages an exciting new technology called JSX Lite that automates generating high performance code from prebuilt, API-first integrations. Choosing HeadlessApp.Store integrations gives you more control and performance, with or without developers.

Culprit #3 - Legacy Technology

One of the most amazing aspects of Shopify is all the power and capability it provides out of the box, with near infinite customizability.

The only downside of this approach is the technology you are using to power your storefront today is the same as when Shopify first launched back in 2006. Web technology has come a long way since then and the out of the box Shopify setup does not tap into the latest advancements in web performance.

Solution #1 - Go headless

The performance and conversion benefits of building a headless storefront are clear. But there is a cost - it takes a lot of developer investment to create a great headless storefront. If you are doing > $5m in GMV, you should seriously consider it.

If you are not there yet, consider using headless tools today to get some of the benefits and make the transition easier in the future, as described below.

Solution #2 - Use headless tools

Using a headless content management system, like Builder.io, allows you to start reaping some of the benefits of going headless on your store today without fully going headless. This is because Builder uses optimized code generation leveraging the latest frontend technologies to speed up your store, whether headless or Shopify hosted.

Because this content can live on a headless storefront or Shopify-hosted store, it makes the migration to headless simple and seamless, as well.

Summary

Most performance issues in Shopify stores come from adding apps and extra functionality. These customizations have the potential to hurt your store's conversions. Luckily, most of these performance problems can can be mitigated with developer help and other solutions that automate development best practices.

For a free consultation on how you can improve the performance of your Shopify store, reach out to us.