Improving your online store performance

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

To learn how your online store is performing today, view your Web Performance report.

Factors you can't control

These factors might affect the performance of your store, but can't be controlled by any settings or adjustments that you can make to your Shopify store. This includes factors from your customers, such as their device or internet speed, as well as factors from Shopify, such as updates to Shopify's infrastructure.

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 isn't experiencing any outages or degraded performance.

Shopify infrastructure

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

Shopify is constantly making improvements to its code and infrastructure. Some of these improvements might be reflected in your performance metrics.

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

Content delivery network (CDN)

CDN stands for content delivery network. The CDN stores your images and other files, such as the content in your Shopify admin's Content > Files page. The CDN is where Shopify provides merchants a world-class CDN run by Cloudflare that ensures that your online store loads quickly around the globe. You can check the CDN status on the Cloudflare 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 object

The `` Liquid object injects assets used by a variety of online store features, including performance analytics and optional features such as dynamic checkout buttons. Loading this object 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 performance 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:

  • Deactivate app features you don't use, or remove the app if you don't need it. Consider the balance between online store features and speed.
  • If you're removing an app, then consider removing code that was added as part of the app install process. Most apps will remove their code automatically for you, but you can check with the app's developer to make sure. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name. Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.
  • Consult your app developer.

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 web performance.

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 activated, might also affect your store performance. 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 loading 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 web performance.

For example, if you want to order the products in a collection by price, then 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 isn't optimized, then you can take the following steps:

  • Run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
  • Hire a Shopify Partner to help you to find inefficient or useless code.

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, then 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 aren't currently onscreen.
  • Many themes also load a specific size of an image based on the screen size it's displayed on.

However, these safeguards don't 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.

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 select a mono, serif, or sans-serif font family. You can still use font styles, such as bold or italic, when you use any of these font families.

The font that displays on your customer's computer depends on their operating system. Below are some examples of the fonts that might be used to render text when you select a system font family:

  • Mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console
  • Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro

Troubleshooting tools

You can use the following tools to investigate your online store's performance.

If you're a developer, then you can further optimize your theme for performance using Shopify tools and best practices. Learn more on Shopify.dev.

PageSpeed Insights

Shopify's Web Performance dashboard report uses Core Web Vitals to measure how real users experience your online store. You can run your own reports using Google PageSpeed Insights to view more detailed metrics for pages in your store.

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.

Get support with online store performance

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 Partner. Learn more about hiring a Shopify Partner.

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

Ready to start selling with Shopify?Try it free