Understanding Render-Blocking Scripts
When a browser loads your Shopify store, it reads HTML from top to bottom. Every time it hits a <script> tag, it pauses, downloads the file, executes it, then continues. On a typical Shopify store, this can add 1–3 seconds to your Time to First Byte (TTFB) and Largest Contentful Paint (LCP).
The Difference Between defer and async
defer tells the browser: download this script in parallel, but execute it after HTML is fully parsed. Scripts with defer execute in order. async tells the browser: download and execute as soon as it's ready, regardless of HTML parsing. Use defer for most Shopify scripts. Use async only for independent analytics scripts like Google Analytics.
How to Add defer to Your Shopify Theme
Open your Shopify admin, go to Online Store → Themes → Edit Code → theme.liquid. Find your <script> tags and add the defer attribute. Example: change <script src="app.js"></script> to <script src="app.js" defer></script>. Always backup your theme first.
Scripts You Should NOT Defer
Some scripts must load synchronously: jQuery (if other scripts depend on it), scripts that modify the DOM before it renders, and any script your theme requires in the <head> for critical functionality. Test thoroughly after adding defer to any script.
Testing Your Changes
After making changes, run your store through Google PageSpeed Insights and check the 'Eliminate render-blocking resources' audit. Also test all store functionality: checkout, product galleries, cart, and any app features. If something breaks, restore your backup and defer scripts one at a time.
Advanced: Conditional Loading
The most powerful technique is conditional loading — only loading scripts on pages that need them. Instead of loading your product review app script on every page, load it only on product pages using Shopify's template detection in Liquid. This is included in our Standard and Premium packages.