fbpx

Add 30% to your sales 💰 with upsells!Get App

Get 30% sales increase 💰 with upsells!Get App

How to async load or defer a JS file in Shopify

How to async load or defer a JS file in Shopify

Last Updated on May 19, 2020 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.

Related Posts
Leave a Reply