Webinar 👉 Visually Build at Scale with Builder.io & Netlify on 12/1
☰
Use Cases
Pricing
Blog
×
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☰
How to speed up your Shopify storefront to boost conversions
February 22, 2021
Written 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.
Share
