javascript - How to async or defer JS in Liquid? - Stack Overflow

admin管理员组

文章数量:1221920

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

  {{ '//ajax.googleapis/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.

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.

• javascript
• shopify
• liquid

Share Improve this question Follow asked Dec 14, 2017 at 21:09 Jake 1986Jake 1986 60211 gold badge1010 silver badges2626 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 18

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.

本文标签： javascriptHow to async or defer JS in LiquidStack Overflow