Merchant Stack Daily

Should Shopify app scripts use defer or async?

Use defer for most scripts. Use async only for independent third-party scripts where order does not matter. Either is better than a script that blocks the page.

What Shopify says

Shopify's performance guidance says to use defer on non-critical scripts and async only for independent third-party scripts where execution order does not matter.

How to apply it

List every script tag in theme.liquid. Anything that needs the page first, like a widget, gets defer. Standalone trackers can use async. If a script has no owner, remove it.

Source: Shopify, Theme performance best practices. Reviewed Sep 23, 2026.

Frequently asked questions

What is the difference between defer and async for a script?

Both attributes let a browser download a script without blocking page parsing. A deferred script waits and runs in order after the HTML is parsed, in the sequence the scripts appear. An async script runs the moment it finishes downloading, in whatever order downloads complete. Order dependent code needs defer; independent code, like most analytics, is safe async.

Which is better for Shopify app scripts?

Defer is the safer default for anything that touches the page, because order is guaranteed and execution waits until the document is ready. Async suits fully independent scripts that do not read the DOM state other scripts set or get read by them. Many app slowdowns blamed on script weight are really execution order problems, and defer fixes them without removing a single feature.

Can a merchant change how an app loads its scripts?

Usually not directly, because the app controls its own tags, but merchants can ask the developer, and good developers answer with specifics. Where an app offers embed settings or theme app extensions, loading behavior is cleaner by design. The practical merchant levers are choosing apps built on modern extension patterns and removing apps whose scripts block rendering for a widget used on one page in ten.