Improving your online store speed

Several factors impact your online store speed, some of which you can control.

If you don't know how fast your online store is performing today, then you can view your Online store speed report.

Factors you can't control

Your customer's device, network, and location

Customers who visit your store live around the world and have different devices and internet connections. This means that your store might load faster or slower for them depending on these factors.

If a customer contacts you about the speed of your store, then ask your customer to check that they're on the latest version of their browser, they have recently cleared their cache, and their Internet service provider is not experiencing any outages or degraded performance.

Shopify infrastructure

Shopify hosts your online store on fast, global servers and doesn't limit your store's bandwith. You can check the status of your Shopify store on Shopify Status.

Below are some features that affect the speed of your online store.

Content delivery network (CDN)

CDN stands for content delivery network. Shopify provides merchants a world-class CDN run by Fastly that ensures that your online store loads quickly around the globe. You can check the CDN status on the Fastly status page.

Local browser cache

Your store caches, or saves, some elements on your customer's local storage temporarily. The next time your customer visits your online store, the browser can load resources from the cache instead of sending another request to the server.

Shopify sets browser caching for cacheable resources in your store to one year for each file. Files that can be cached include image files, PDFs, JS files, and CSS files.

Server-side page cache

In addition to local browser caching, Shopify caches pages on the server side. The first time a page is loaded, it might be slower, but later page loads are faster because customers are receiving a cached copy.

The assets inside the content_for_header Liquid tag

The {% content_for_header %} Liquid tag injects assets used by a variety of online store features, including performance analytics and optional features like dynamic checkout buttons. Loading this tag and related assets has an impact on the speed of your store. Shopify is optimizing the tag and its assets to make it faster.

Factors you can control

Below are some factors that might impact the speed of your online store, and how you can address them.

Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.

If you think that an app is slowing down your store, then take the following steps:

Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.

If you think that something in your theme is slowing down your store, then take the following steps:

Theme or app features

Certain features, when enabled, might also affect your store speed. For example, some quick view pop-ups pre-load information from every product page when a collection page loads. Loading extra data your customers aren't using can impact your store speed without adding value.

If you think that a feature is slowing down your store, you can take the following steps:

Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.

For example, if you want to order the products in a collection by price, you should do that before you loop through the products in your collection, and not as part of the loop code. This is because the order of the products does not change for each product, and calculating the order of the products adds processing time to the request.

If you're concerned that your code is not optimized, then you can take the following steps:

Images and videos

Oversized images and images that are hidden from view can interfere with loading other, more important parts of a page. If users have to wait for large images to load, they might perceive your store to be slow.

Shopify adds some safeguards to prevent you from overloading your online store with images or videos. For example:

  • You can't have more than 50 products on a collection page or 25 sections on your home page.
  • Many themes defer loading images that are not currently onscreen.
  • Many themes also load a specific size of an image based on the screen size it's displayed on.

However, these safeguards do not entirely prevent images or videos from impacting your online store's performance.

If you think that images are slowing down your store, then take the following steps:

  • Review the image optimization guide.
  • Keep slideshows of featured images to 2-3 slides, or use one featured image.
  • Consult your theme developer for their advice on the best way to use images with their theme.
  • Hire a Shopify expert for further assistance.

Fonts

You can choose from several fonts for the text in your online store. However, if you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.

To avoid downloading a new font to your customer's computer, you can use a system font. A system font is a font that is already installed on most computers. You can use the following system fonts in your Shopify theme:

  • Lucida Grande
  • Trebuchet MS
  • Garamond
  • Palatino
  • Times New Roman
  • Courier New
  • Monaco

You can still use font styles, such as bold or italic, when you use any of the fonts above.

Troubleshooting tools

Below are tools you can use to investigate your online store's speed.

Lighthouse

Shopify's Online store speed report uses Lighthouse to measure the speed of your store. You can run your own Lighthouse report using Google PageSpeed Insights to view more detailed metrics for pages in your store. To learn about what these metrics mean, refer to the Google Lighthouse performance scoring documentation. You can also hire a Shopify expert to help you understand the metrics and suggest improvements.

Shopify Theme Inspector for Chrome

The Shopify Theme Inspector for Chrome is a profiling tool that uses a flame graph to display Liquid render performance. This tool helps you to identify the lines of code that slow down pages in your online store. Learn how to use the Shopify Theme Inspector.

Where to get support

If you use a free theme from Shopify, then Shopify support might be able to assist you with basic performance improvements.

If you use a third-party theme and need assistance, then you must contact your theme developer or hire a Shopify expert.

If you have a development team or agency partner, you can also reach out to them for further assistance.

Ready to start selling with Shopify?

Try it free