Storefront performance
You should optimize your app to minimize its impact on storefront performance. A fast storefront leads to higher conversion rates, more repeat business, and better search engine rankings.
Testing storefront performance
Anchor link to section titled "Testing storefront performance"Learn how Shopify tests the impact of your app on storefront performance, and how you can run similar tests.
How Shopify tests storefront performance
Anchor link to section titled "How Shopify tests storefront performance"The main tool used by Shopify to test performance of merchant stores is Lighthouse, 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. For apps that affect storefronts directly, we test the app's effect on store performance by measuring the Lighthouse score before and after installation of the app. The difference in score indicates whether the app improves or worsens store performance.
When you submit an app to the Shopify App Store, we test the app on a benchmark shop to determine its performance score. To be featured in the App Store or Shopify admin, your app must demonstrate low or no impact on store performance consistently across actual merchant stores over time.
Testing your app in Google Chrome
Anchor link to section titled "Testing your app in Google Chrome"- Start with a clean install of a supported Shopify theme, such as Express, without your app or any other apps installed.
- From the home page of your test store, open Developer Tools in Chrome (View > Developer > Developer Tools).
- In Developer Tools, click the Lighthouse tab.
Select Mobile from the device list, then click Generate Report.
Write down the performance score out of 100. This is your starting score.
Install your app on your test store and verify that it loads correctly.
Go to the Lighthouse tab, and click the Generate Report button.
Write down the new performance score. This is your ending score.
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.
Optimizing storefront performance
Anchor link to section titled "Optimizing storefront performance"Learn how to optimize your app's storefront performance.
Host assets on Shopify servers
Anchor link to section titled "Host assets on Shopify servers"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 fileGraphQL 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.
Use theme app extensions
Anchor link to section titled "Use theme app extensions"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.