JS files async loading in the right way. How to?

Question

I have couple of CDN files what I call in header

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

and after all my js files what are depending on this libraries, but google's page speed complains that those scripts are blockers on page load. So I tried to put everything before body closing but in this case I will have all scripts broken because they depend on jquery.

I tried to use defer but like that the same problem as in footer. How do I load async javascript libraries to not break the hole?

there must be something else wrong, jquery wouldn't break – towc Jun 07 '16 at 12:39 — towc, Jun 07 '16 at 12:39
could you please share the console logs as well? – Nitesh Goyal Jun 07 '16 at 12:40 — Nitesh Goyal, Jun 07 '16 at 12:40

score 2 · Answer 1 · answered Jun 07 '16 at 12:39

2

General solution is to use async module load like RequireJS. Here's a jQuery integration case: http://requirejs.org/docs/jquery.html

Considering "but in this case I will have all scripts broken because they depend on jquery." you could add check in your JS code like:

$(document).ready(function(){
  //your jQuery-based code
})


//if jQuery loading failed
if(!window.jQuery){

}

answered Jun 07 '16 at 12:39

shershen

9,875
11
39
60

there are a lot of scripts included I just want to optimize the page load not to refactor the hole code – fefe Jun 07 '16 at 12:48
i've listed to ways - refactor with AMD or quick patch with ```!window.jQuery```. – shershen Jun 07 '16 at 12:53

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

You might want to have a look at the number of files from the same host. Look at this.

edited May 23 '17 at 10:27

Community

1
1

answered Jun 07 '16 at 12:42

EinarI

627
1
9
14

score 0 · Answer 3 · edited May 23 '17 at 10:34

What you would like to achieve is AMD (Asynchronous Module Definition)

Asynchronous module definition (AMD) is a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired. Read more: https://en.wikipedia.org/wiki/Asynchronous_module_definition

There are a bunch of frameworks for that:

RequireJS - http://requirejs.org
Dojo Toolkit - https://dojotoolkit.org

Or you can load JS files manually, using this method (not recommended): https://stackoverflow.com/a/7719185/1502230

JS files async loading in the right way. How to?

3 Answers3