App performance best practices and guidelines
Consider the following best practices for optimizing the performance of your app.
Include a viewport meta tagAnchor link to section titled "Include a viewport meta tag"
If your app can be embedded, then it might be rendered in a WebView when it's accessed from the Shopify mobile app. To define the scale at which your app is rendered on initial load, you should add a meta tag to the HTML file that serves your UI.
If you don't add this meta tag, then Shopify injects it for you. This ensures that merchants can use your app on mobile devices, but it results in your app UI rendering twice: once zoomed out, and once at the correct scale.
Avoid parser-blocking scriptsAnchor link to section titled "Avoid parser-blocking scripts"
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
async attributes on script tags to avoid this.
If the order of execution of the script tags matters, then use
If the order of execution doesn't matter, then use
Reduce your dependency on external frameworks and librariesAnchor link to section titled "Reduce your dependency on external frameworks and libraries"
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
await). If you use a browserslist, then you can target browsers with a > 1% marketshare.
Load non-critical resources on interactionAnchor link to section titled "Load non-critical resources on interaction"
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.
Minimize your bundle sizeAnchor link to section titled "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: