The Shopify platform
Learn about the infrastructure that Shopify provides to make the online store, and your theme, faster.
Shopify provides merchants a world class content delivery network (CDN) run by Fastly and Cloudflare. Using a CDN means that your online store will load quickly around the globe, despite the Shopify servers being in North America.
Files delivered over the Shopify CDN are minified and compressed automatically using Brotli, Zopfli, and gzip, reducing the size of the files the browser must download. Requests use HTTP/3 and TLS 1.3 to further enhance request performance and security.
Short delays for images in your store
Using a CDN means that all of your online store images are cached at thousands of servers around the world. When you make changes to your images, Shopify informs the CDN that the images have changed. To do this, Shopify uses the
asset_url filter, which automatically appends version numbers to all of the urls it generates. For example, a version number appended to the end of a url might look like this:
If you link to an image without using the
asset_url filter and upload a new version of the same image, then the image on your online store might not change to the new version for a day or more.
CSS syntax to ensure automatic updates
If you reference an image directly in your CSS, then the url will be static and will not carry the asset version that Shopify updates automatically.
To make sure that your images are automatically updated, change your CSS syntax to include the
For example, if your CSS looks like this:
then change it to look like this:
Storefront Renderer (SFR) is a server-side renderer that handles storefront requests. SFR is dedicated to serving storefront requests as fast as possible.
Our storefront renderer significantly improves performance for cache misses - instances where a page or other requested data isn’t found in the cache memory and has to be retrieved from other cache levels or the main memory.
Shopify automatically minifies theme CSS when it is requested by the storefront. Minified CSS files are cached until the next time the underlying file is updated. The browser downloads less data, resulting in shorter load times.