App performance recommendations
Before you upload your app to the Shopify App Store, you must test your app's performance to verify that it doesn't reduce Lighthouse performance scores by more than 10%. To ensure that your app meets the specified requirements, review the best practices that are described in this topic.
Replace parser-blocking script tags with non-blocking tags
When you build your app, you should use
If the order of execution of the script tags matters, then use
<script src="https://cdn.shopify.com/app-code.js" defer></script> <script src="app-code.js" defer></script>
If the order of execution doesn't matter, then you can use
<script src="https://cdn.shopify.com/app-code.js" async></script> <script src="app-code.js" async></script>
Host static files on Shopify servers
Use the Asset API 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.
To verify that your app supports older browsers, you should also avoid using polyfill libraries.
Minimize your bundle size
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.
<script>console.log('hello world')</script> <link href="//example.com/app-css.css" rel="stylesheet">