How to Async Load or Defer a JS File in Shopify

Last Updated on October 21, 2025 by Dan S
Originally Published May 19, 2020.

A quick and simple post. Remember to back up your theme and if you don’t fully understand this, we suggest contacting a Shopify Expert.

Async loading is usually something that is suggested with “increasing page speed”. You have most likely read a guide saying speed helps SEO, ran a speed check on your store and now you are working through the points. The first few were easy like compressing images and removing unwanted apps. The async one stopped you in your tracks.

This is because it requires thorough knowledge of the scripts your store is loading and then it also requires you to replace these with a snippet of code to load these asynchronously. If you do it incorrectly, you can cause your site to load incorrectly or not at all.

The code:

<script src="{{ 'example.js' | asset_url }}" async></script>

This allows you to find all those snippets and replace {{ 'example.js' | asset_url | script_tag }} so that they load async.

Attribute	Execution Timing	DOM Dependence	Best Use Cases
`async`	Immediately after loading	Independent	Analytics, ads, third-party trackers
`defer`	After DOM parsing completes	Order-sensitive	Theme scripts, cart functionality

Before editing, use Shopify’s Theme Check app to identify script dependencies and Shopify’s Theme App Extensions for non-destructive modifications.

For Shopify Plus Stores

Utilize Theme App Extensions to load scripts only on specific pages, minimizing performance impact
Implement conditional async loading for geolocation-specific scripts

Note: When using Strict Content Security Policies (CSP), async-loaded scripts may require proper CSP directives with nonce or hash values for inline scripts.

2025 Performance Priorities

Use defer instead of async for any script affecting Core Web Vitals (LCP, INP)
Implement code splitting using modern bundlers for dynamic imports
Prioritize deferred loading for all non-essential scripts in <head>

Monitor your store’s performance using Shopify’s built-in web performance dashboard to identify async/defer candidates and track improvements.

No-Code Options

SpeedBoost ‑ Fastify and similar apps offer automatic async loading with dependency mapping
Modern Shopify themes like Dawn (currently version 15.4+) are optimized for performance with proper script loading built-in

Enjoy faster page speeds and better SEO results, but always test changes thoroughly, preferably on a duplicate theme first!