The Shopify platform

Learn about the infrastructure that Shopify provides to make the online store, and your theme, faster.

Anchor to Shopify CDNShopify CDN

Shopify provides merchants with a world-class content delivery network (CDN) backed by Cloudflare. Using a CDN means that your online store loads quickly around the globe.

Files delivered through the Shopify CDN are minified and compressed automatically using Brotli and gzip, which reduces the size of the files the browser must download. Requests use HTTP/3 and TLS 1.3 to further enhance request performance and security.

Asset URLs are moving from the shared cdn.shopify.com domain to the storefront's own domain, under a /cdn path on the domain that served the page, for example /cdn/shop/files/hero.jpg for shop files and /cdn/fonts/ for fonts from the Shopify font library. Same-origin URLs are the default for storefront requests, which improves performance by maximizing connection reuse in the browser.

Some requests still use cdn.shopify.com, including theme editor previews, some Shopify platform assets, and some regions. Your theme doesn't choose between the two: the platform renders the appropriate URL for each request. Reference assets with Liquid URL filters like asset_url and image_url rather than hard-coding a domain, so your theme picks up the store-domain URLs automatically.

For guidance on taking full advantage of the CDN in your theme, see Serve assets from Shopify CDN.

Anchor to Short delays for images in your storeShort delays for images in your store

Using a CDN means that all of your online store images are cached on 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 that it generates. For example, a version number appended to the end of a URL might look like this: ?v=1384022871.

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.

Anchor to CSS syntax to ensure automatic updatesCSS syntax to ensure automatic updates

If you reference an image directly in your CSS, then the URL is static and won't carry the asset version that Shopify updates automatically.

To make sure that your images are automatically updated, change your CSS syntax to include the asset_url filter.

For example, if your CSS looks like this:

then change it to look like this:

Anchor to Server-side renderingServer-side rendering

Storefront Renderer (SFR) is a server-side renderer that handles storefront requests. SFR is dedicated to serving storefront requests as fast as possible.

The storefront renderer significantly improves performance for cache misses, which are cases where a page or other requested data isn't found in cache memory and has to be retrieved from other cache levels or from main memory.

Anchor to MinificationMinification

Shopify automatically minifies CSS files, as well as JavaScript files that use valid syntax to ES5, when the storefront requests them. Minified JavaScript and CSS files are cached until the next time the file is updated.

Minification reduces the amount of data that the browser downloads, which results in shorter load times.

Shopify delivers the original version of a JavaScript or CSS file if it meets one of the following criteria:

• The minified file would be larger than the original file. This might happen if a file is already minified with better compression.
• It has the extension .min.js or .min.css.

Anchor to Speculation rulesSpeculation rules

To improve buyer experience on Shopify stores, Shopify automatically injects speculation rules in supporting browsers.

The default rules aim to provide the largest speed gains without introducing issues with data usage, caching, or analytics. Themes can add extra rules of their own based on specific requirements and opportunities. See Use the Speculation Rules API for implementation guidance.

Anchor to PolyfillsPolyfills

Shopify automatically includes the es-module-shims polyfill library in the storefront when needed. This library enhances compatibility for modern JavaScript module features, primarily import maps, across different browsers.

Import maps are a standard web platform feature that you can use to control how JavaScript modules are resolved, similar to server-side package managers. Although they're widely supported in the latest versions of major browsers, older browser versions might lack native support for import maps or other newer module features that es-module-shims polyfills, such as multiple import maps in the same document.

In your theme code, you can use features like <script type="importmap"> tags and standard <script type="module"> tags without needing to manage browser-specific compatibility concerns for module loading yourself. Shopify makes sure this polyfill is included, and maintains it as long as necessary to support a reasonable range of browser versions used by buyers.

Anchor to Pagination limitsPagination limits

Shopify limits pagination of arrays of objects to 25,000 objects. Paginating deep into large arrays is resource-intensive and can slow down other requests. To keep all requests performant, a limit of 25,000 balances performance with practical use cases.

Pagination above 25,000 items suggests that you can find a more suitable design to help buyers narrow down their search to a manageable number of items before paging through all results. If you're constrained by this limit, then see how you can add filters to your store.

Shopify also enforces this limit on count queries. Counts are accurate up to 25,000 items. For arrays with more items, the count returns 25,001, which signals that there are more than 25,000 items in the array.

See Limit pagination depth for implementation guidance.