Performance best practices for Shopify apps

Consider the following best practices for optimizing the performance of your app.

Theme app extensions allow developers to extend themes in a way that protects theme code integrity and provides better app development and merchant experiences.

Apps built in the theme app extension framework don't edit theme code, which decreases the risk of introducing breaking changes to the theme, makes it easier to iterate on the content of the integration, and provides for a better merchant experience.

All files inside the assets/ folder are automatically served from Shopify's CDN for fast, reliable asset delivery. Reference your assets by using either the javascript and stylesheet schema attributes or using the asset_url and asset_img_url Liquid URL filters.

For app embed blocks, take advantage of their ability to only load scripts on specific pages.

Parser-blocking scripts block the construction and rendering of the DOM until the script is loaded, parsed, and executed. They also create congestion on the network and significantly delay page rendering. This impacts metrics like First Contentful Paint and Largest Contentful Paint. You should use defer or async attributes on script tags to avoid this.

If the order of execution of the script tags matters, then use defer:

If the order of execution doesn't matter, then use async:

Deliver as much as you can from the Shopify content delivery network (CDN). Using the same host for your assets avoids unnecessary HTTP connections and allows the server to prioritize delivery of blocking resources using HTTP/2 prioritization.

In a Shopify context, you can do this by using the AssetREST Admin API resource to host your static files on Shopify's servers and have them delivered by our globally available CDN.

CDNs are accelerated web servers with built-in caching, compression, fast performance, and global distribution. Using Shopify’s CDN also reduces network congestion.

If you need to use JavaScript, consider avoiding introducing third-party frameworks, libraries, and dependencies. Instead, use native browser features and modern DOM APIs whenever possible. Including JavaScript libraries in your package can lead to large bundle sizes, slow load times, and a poor experience for customers.

Frameworks such as React, Angular, and Vue, and large utility libraries such as jQuery have significant performance costs. A store's load time is degraded even further when multiple apps try to install the same framework multiple times on the same store.

Avoid introducing polyfill libraries for very old browsers (anything that doesn't support async/await). If you use a browserslist, then you can target browsers with a > 1% marketshare.

CSS parses and renders much faster than JavaScript, so wherever possible, you should use CSS features for building interactivity. You can find more information on the internet by searching the phrase “using CSS instead of JavaScript”. One example is the blog 5 things you can do with CSS instead of JavaScript by Juan Martín García.

Your minified JavaScript bundle size should ideally be 16 KB or less.

Your page might contain code for a component or resource that isn't always used. You can load these resources using an import on interaction pattern to avoid loading, parsing, and executing unnecessary code.

Defer loading your JavaScript bundle entirely until a user interacts with the parts of your app that require the bundle.

To optimize performance, the app entry point should amount to less than 10KB of JavaScript and less than 50KB of CSS on a page, and load itself on interaction. Make sure that you optimize your bundle sizes by minimizing your code.

A store's theme is responsible for user interactivity. Your app should change the theme only slightly. If you need to inject more JavaScript, then make sure it loads without blocking the browser.

Browsers can't render a page until the stylesheets are downloaded, parsed, and applied. Inline script tags run only after the stylesheets are loaded. When a remote stylesheet is included before an inline script tag, the stylesheet blocks the script tag from running.

Always include the inline script tags before the stylesheets, like in the following example:

The tool used by Shopify to test app performance is Lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. It's available in the Developer Tools panel of Google Chrome, so you can test your app directly in the browser.

When you submit an app to the Shopify App Store, the app's tested on a benchmark shop to determine its performance score. To be published in the Shopify App Store, your app must not reduce Lighthouse performance scores by more than 10%.

1. Start with a clean install of a supported Shopify theme, such as Express, without your app or any other apps installed.
2. From the home page of your test store, open Developer Tools in Chrome (View > Developer > Developer Tools).
3. In Developer Tools, click the Lighthouse tab.

4. Select Mobile from the device list, then click Generate Report.

   

5. Write down the performance score out of 100. This is your starting score.

   

6. Install your app on your test store and verify that it loads correctly.

7. Go to the Lighthouse tab, and click the Generate Report button.

8. Write down the new performance score. This is your ending score.

9. Divide your ending score by your starting score. The result is your app's performance ratio.

   For example, if your starting score was 84, and your ending score was 72, then you would calculate 72 / 84 to see that your app’s performance ratio is 0.85.

• Learn how to submit your app to the Shopify App Store.