BOOST your sales 50% with upsells Learn more

Increase sales by 50% Learn more

How to async load or defer a JS file in Shopify

Last Updated on by LAUNCHTIP

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.

Want bigger orders?

Unlock instant revenue from your Shopify store with SellUp. Set and forget upsells that work 24/7 on autopilot.

More To Explore

Join over 30,000 merchants growing their stores with LAUNCHTIP