I often get questions that indirectly relate to Shopify’s CDN, so l’ll explain exactly what it is and what you need to know about it.
What is a CDN
Ok, before we get into it let me first explain what a CDN is. CDN stands for Content Delivery Network. The aim of a CDN is to make your website load quicker by serving your site from a location closest to the person viewing your site.
A CDN is a network of servers located all over the world and each of those servers hosts a copy of your website.
So, if I visit your site from the UK, rather than my request going all the way across the Atlantic Ocean to the ‘origin server’ in, let’s say the US, and back again, it will actually go to a server in the UK which holds a copy of your site.
The underlying mechanics of a CDN are quite complicated but in simple terms, you have an origin server that holds the master copy of your site. When you make an update (say adding a new product, changing a price, adding a blog post etc.) the origin server sends out the update to all the CDN servers.
Do I need to use a CDN with Shopify
You do not need to use or set up any 3rd party CDN with Shopify as Shopify does it all for you. Shopify has its own Content Delivery Network which is automagically there for every single Shopify store.
You don’t need to do anything. If you have a Shopify store then you are on Shopify’s CDN.
So if Shopify’s CDN is there invisibly in the background doing its stuff, why on earth do I care, why are you telling me this stuff Jon?
Well, there are a few important things worth knowing about Shopify’s CDN.
What does Shopify’s CDN do
Firstly, Shopify’s CDN works like any other CDN. Serving your site from a location closest to the user. But it also does some clever stuff with images and it’s the images part that is worth understanding.
Shopify’s CDN and what it does with images
When you upload an image to your store, be that a product image, a banner, an image in a blog post or whatever, that image gets stored on Shopify’s CDN. But it then does a few clever things.
Image Resizing
Let’s say the image you have uploaded is a JPEG file and is 2048 x 2048 pixels in size. Shopify’s CDN will take that file and automatically create versions of it in various different sizes, e.g. 200, 400, 600, 800, and 1,200 pixels wide.
When someone visits your site they will get served the most appropriately sized image based on the device they are using and their connection speed.
For example, if I’m on a mobile phone with a slow connection then I will get served a much smaller image size than if I was on a large screen desktop machine with a fast Internet connection.
You can see all of this image resizing going on if you inspect an image on your store using Chrome’s Dev Tools. The above screenshot is showing just one image, but you can see it is available in widths of; 180, 370, 540, 740 … etc. pixels. You can also see that it is served from //cdn.shopify.com/s/files … which is the URL for Shopify’s CDN.
Image Compression
Shopify will also automatically do some image compression to make your images smaller in Kb terms. The amount of compression it does is fairly minimal though so it’s worth bearing in mind that you should still be optimizing the size (in Kb) of your images either before you upload them or by using an app like BulkImageEdit which optimizes images already in Shopify.
Overly large images are one of the most common things I see on Shopify stores and is usually one of the main reasons for people complaining that their Shopify store is slow to load. Shopify’s CDN does little to rectify this.
Image Format
Shopify’s CDN also automatically creates a copy of your images in the WebP format. If the visitor’s browser supports it then Shopify’s CDN will serve your image as a WebP file. If WebP is not supported, then it will serve the image in the original format (JPEG, PNG etc.).
WebP is a relatively new (2010) image format created by Google. It produces a smaller image size (Kb) than JPEG or PNG whilst maintaining the same image quality. With Safari finally adding support for it in late 2020 it is now supported by all modern browsers.
Can I Switch Off Shopify’s CDN or Change it in Any Way
The short answer to this is no. There are no options to switch off Shopify’s CDN and since you don’t have direct access to it you cannot make any changes to it or configure it. For 99.9% of people, this is fine, it just works away in the background and there is no need to be able to change it.
If for some reason you desperately do want to change the configuration of Shopify’s CDN there is kind of a way of doing it and that is to run your own Cloudflare CDN alongside Shopify’s.
This is called ‘Orange to Orange’ or ‘O2O’ by Cloudflare and is only available on Cloudflare’s Enterprise plan. But as I’ve mentioned, 99.9% of people can ignore this option and just stick with things as they are.
