Performance

JavaScript Defer / Async

The defer and async attributes on <script> tags change how JavaScript loads relative to HTML parsing. defer loads the script in parallel but executes it after the HTML is fully parsed. async loads and executes as soon as it downloads, potentially interrupting parsing. Both prevent render-blocking.

Why It Matters for Shopify Stores

Any <script> tag in <head> without defer or async blocks the browser from rendering the page until that script downloads and executes. On Shopify stores, many app scripts are injected via ScriptTag API and loaded in <head> without these attributes. Adding defer to non-critical scripts (analytics, chat, reviews) can improve FCP by 1–3 seconds on mobile connections.

How to Check Your Store

View the page source of your store and check <script> tags in the <head>. Count those without async or defer attributes — these are your render-blocking scripts.

Use the free shopify app bloat calculator tool

How to Fix It

Add defer attribute to non-critical scripts. Don't add defer to scripts that other scripts depend on without careful dependency analysis. Shopify theme ScriptTag API scripts can be modified to use defer in your theme code.

Related Terms

Check your store's JavaScript Defer / Async with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit