Using the Shopify CDN for better performance

Using the Shopify CDN for better performance

Loading assets into the browser as fast as possible is key to good website performance. Users further away from your servers can experience slower load times due to the distance between the user and the server. For this reason, content delivery networks, or CDNs, were created.

CDNs store content on multiple, geographically dispersed servers to reduce the distance between a user and a server. Shopify provides the infrastructure for a content delivery network (CDN), but themes are not always set up to use it correctly.

In this post, we are going to discuss both the risks and benefits of CDNs from the performance standpoint as well as walk you through the process of moving external files to Shopify's network.

Death by a thousand domains Jump to heading

CDNs reduce delays in delivering assets to the end user. However, if that CDN is hosted with a separate domain (sometimes referred to as an external domain), that can introduce a connection overhead.

When a browser requests a file from a domain, it first has to figure out where to get that file from. It goes through a process of domain name server lookup (like a phonebook), then a connection to the server, then finally a security handshake.

Below you can see a network request waterfall from WebPageTest. The bars outlined in red show the time the browser spent connecting to the extra hosts, which in this case takes over half a second. Not all requests need to pay that tax as this additional work usually has to be done only once or twice per domain during the page load.

Screenshot of the requests waterfall from WebPageTest with multiple critical requests coming from external domains
Example of a site where almost every single critical resource comes from a different domain, having a negative impact on rendering time.

You should aim for using as few domains other than your store one as possible – we recommend two at most. Connection speed is not the only problem with multiple domains. When you have more of them, you increase the chance that a significant part of your website will not work if one of those domains goes down.

Screenshot of the requests waterfall from WebPageTest with one of the external requests failing to load
Example of a site where one of the external render-blocking resources takes a long time to load and fails, delaying rendering of the page.

In a perfect world you would be able to move all your important CSS, JavaScript, and images so that only the Shopify CDN is used. Third party tools that provide services like content personalization, tag management or marketing often come with their own files hosted on their own domain/CDN. Some can easily be copied and hosted on the Shopify CDN. However, not all 3rd Parties allow this and moving may result in outdated content or customer-facing errors. Be sure to consult the documentation or support before making these changes.

How to move files to the Shopify CDN Jump to heading

You may have already noticed that the majority of the resources on your store already come from This is because both files inside the theme's assets directory and images you upload in the admin panel are automatically optimized and served from the CDN.

For everything else like external code dependencies or hard coded images, you need to follow the below steps:

  1. If you’re developing a theme, put the files inside the assets directory.
  2. Otherwise, go into Shopify’s admin panel.
  3. Select Online Store -> Themes in the sidebar.
  4. In your theme click on Actions -> Edit code.
  5. Scroll down to the Assets directory in the sidebar and click on Add new asset.
creenshot showing a dialog for adding a new file inside the assets directory
You can either upload a new file or create an empty one and edit its contents afterwards.

After adding a new file, you can change its reference in the theme code shown below:


<link rel="stylesheet" href="" />
<script src=""></script>
<img src="" />


<link rel="stylesheet" href="{{ 'style.css' | asset_url }}" />
<script src="{{ 'script.js' | asset_url }}"></script>
<img src="{{ 'image.jpg' | asset_url }}" />

Remember to make sure the name of the file matches the one you uploaded and test the changes before publishing them!

When done correctly, you should be able to see a nice performance improvement thanks to the smaller number of external domains the browser has to connect to.

Screenshot of the requests waterfall from WebPageTest with all of the critical requests coming from Shopify CDN
Example of a site where every critical resource comes from Shopify’s CDN resulting in faster rendering performance.

Conclusion Jump to heading

Hosting theme files on external domains may have a negative impact on its performance. Shopify comes with its own Content Delivery Network that can optimize your online store resources and serve them to your users as fast as possible. Aim to have as much content served from the domain as possible.

However, remember not all of the files can be moved to, especially when it comes to third party apps and tools.

Read similar articles tagged...

Back to blog