Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to async or defer JS in Liquid?

I'm trying to improve site speed, and one thing that might be delaying render are these scripts:

  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
  {{ 'jGestures.min.js' | asset_url | script_tag }}
  {{ 'modernizr.min.js' | asset_url | script_tag }}

How can they be made to asych or defer? Or should I simply move them to the bottom? Also I have not made changes like this to my theme yet. Is it easy to revert changes in Shopify? I would just change it to the way it was before if any of the scripts were needed for the initial render, correct?

Edit: those scripts are in the HEAD section.

like image 1000
Jake 1986 Avatar asked Dec 14 '17 21:12

Jake 1986


1 Answers

You have to do it little differently.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" async></script>

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

Make sure you copy/download the theme so that you have a backup. also shopify stores revisions so that you can revert back.

enter image description here

like image 122
Mash R. Avatar answered Oct 01 '22 06:10

Mash R.