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.
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.
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 cdn.shopify.com. 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:
- If you’re developing a theme, put the files inside the
assetsdirectory. - Otherwise, go into Shopify’s admin panel.
- Select Online Store -> Themes in the sidebar.
- In your theme click on Actions -> Edit code.
- Scroll down to the Assets directory in the sidebar and click on Add new asset.
After adding a new file, you can change its reference in the theme code shown below:
Before:
<link rel="stylesheet" href="https://external-domain.com/style.css" />
<script src="https://external-domain.com/script.js"></script>
<img src="https://external-domain.com/image.jpg" />After:
<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.
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 cdn.shopify.com domain as possible.
However, remember not all of the files can be moved to cdn.shopify.com, especially when it comes to third party apps and tools.