×

Developers

Developers

Product

Use Cases

Pricing

Resources

Company

Get StartedLogin

Developers

Builder for Developers

Developer Docs

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Product

Pricing

Login

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Made in Builder

‹ Back to blog

How to speed up your Shopify storefront 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 Shopify storefront.

But, you might not know that many of the changes you make to your storefront actually come with a performance cost. Whether it's a new app you added, or a new feature built for you, each change has the potential to slow down your storefront. The irony is that the resulting performance slowdown can reduce conversions, potentially outweighing the benefits of the update you originally made.

The conversion paradox

The more apps and changes you add to your Shopify storefornt as you attempt to improve conversions, 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 Shopify storefronts and hurt conversions, and lay our 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 Shopify storefront theme over time, the higher the likelihood of accumulating code bloat. Every code addition has an incremental performance cost, which also means an incremental decrease in conversions. Put differently, every line of code added to your Shopfiy Storefront comes with a cost.

Solution #1 - Developer audits

Generally speaking, your Shopify theme needs regular performance audits - looking for unused and suboptimal code. Agency partners are a great resource 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 ecommerce website. Either way, you will have 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.

Try out the Builder.io Theme Builder app for Shopify to see just how easy it is to create and update your Shopify storefront with Builder drag-and-drop editor.

Visually editing a storefront in Builder.io

Culprit #2 - Apps

The cause

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

Most apps aren't as optimized for Shopify storefronts as custom code. For example, a third-party app widget (e.g. for product recommendations, reviews, etc) needs to be able to handle all possible store and customization scenarios. This is in contrast to custom code, which your developers optimize for your specific storefront and use case.

Developers write code optimized code, which only includes the features and customization needed for your specific use case. Third-party apps, on the other hand, need to be able to address a wide range of scenarios to be useful. As a result, these apps end up including a lot more code than your Shopify storefront actually needs, which slows down your storefront.

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 your Shopify storefront's performance, but requires significant developer investment to create and maintain.

Solution #2 - HeadlessApp.Store

The HeadlessApp.Store was built to solve the conversion paradox, so that ecommerce stores can have all of the functionality they need without impacting performance or relying on development cycles.

The HeadlessApp.Store lets you benefit from the higher performance of API-driven integrations, without the drawbacks of integration and maintenance cost.

This public, open source project leverages an exciting new technology called JSX Lite that automates the generation of high performance code from prebuilt, API-first integrations. HeadlessApp.Store integrations give you more control and better 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 well known. This is why the future of ecommerce is headless. But, there is a cost to going headless- it takes a lot of developer investment to create a great headless storefront.

If you are doing $5M or more in GMV, you should seriously consider it. If you are not there yet, consider using headless tools to get some of the benefits and make the transition easier in the future - see how 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 storefront without fully going headless. This is because Builder uses optimized code generation leveraging the latest frontend technologies to speed up your storefront, regardless of if it is headless or Shopify-hosted.

Builder content can live on a headless storefront or Shopify-hosted store, which makes the migration to headless architecture simple and seamless. Meaning to say that you can go live now with the Builder Theme Studio for Shopify-hosted ecommerce sites and transition to the Builder headless CMS seamlessly, once you re-write a headless storefront.

Summary

Most performance issues in Shopify storefronts stem from excessive code from apps and functionality. These customizations can seriously hurt your storefront's performance and your bottom line.

Shopify storefront performance issues can can be mitigated with developer help and other solutions that automate development best practices which ensure your theme code as optimized as can be.

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

Read more on the blog
Shopify Online Store 2.0 + Builder = Magic
Death by Closure (and how Qwik solves it)
A first look at Qwik - the HTML first framework

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

DEVELOPERS

Builder for Developers

Developer Docs

Github

Mitosis

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service