Asynchronously load to eliminate render-blocking js & css?

Question

I've just spent a really long time googling... and only find half answers everywhere. I am using the google page speed insights to improve my website and it tells me to asynchronously load my javascript. I found a couple of codes, but they didn't explain how to load MORE than one js file AND how to load the css as well. I also couldn't find anywhere where it tells me in what order to load it. Can anyone help?

NOTE: I DID try to move the js to the footer, but then my mobile menu no longer works (which uses the expand.js file)

The Javascript files I need to asynchronously load are:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/h5.js"></script>
    <script language="javascript" type="text/javascript" src="js/expand.js"></script>

My CSS:

    <link rel="stylesheet" type="text/css" href="style.css">

The report says asynchronously load your JS files which mean put your JS scripts on different servers so they load faster. In laments terms this would stop making many requests to one server to load files. If you are loading Plugings then check if there is a CDN hosting for those JS scripts --- http://www.rackspace.com/knowledge_center/article/what-is-a-cdn — Tasos, May 16 '15 at 17:42
Ok, thats how i knew it, but its only one part of it loading JS files from different domains. However here is a solution on how to load JS files asynchronously --- http://screwlewse.com/2010/05/loading-your-javascript-files-asynchronously/ — Tasos, May 16 '15 at 17:58

score 1 · Answer 1 · answered Jun 05 '15 at 19:50

Asynchronous loading of scripts can get pretty complicated. Have you tried using the async attribute? E.g.:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async language="javascript" type="text/javascript" src="js/h5.js"></script>
<script async language="javascript" type="text/javascript" src="js/expand.js"></script>

However, this can cause undesired race conditions. All this means is the rest of your site is not going to wait for these three JavaScript files to load before loading other resources. This may or may not improve the speed of your site depending on what is contained, and can produce some wonky results in terms of dependency management which you'll have to account for in your scripts.

It is usually recommended by the big G to create two small files: a CSS and a JavaScript file to be included in your <head/> which contains all the styles and logic for the above-the-fold content (or better yet: inline them, even though this increases the DOM size). Source.

If you mark the scripts as async, then they can load and execute in any order. Use "defer" instead to make them always execute in the correct order. — Macil, Jun 05 '15 at 21:13

score 1 · Answer 2 · edited Oct 14 '16 at 19:51

How To Asynchronously load Javascript File?
Well to load javascript file you just need to include "async" attribute in <script> tag i.e.

<script src="your path" async></script>

Now this script will be downloaded in background while it will not cause JS rendering issue.
Note: If you're using some jquery plugin i.e. image zoom or any thing else, it will take an extra time to load but after that it will work properly.

Why to use "DEFER" keyword with "ASYNC" ?

You can also use defer attribute along with async attribute. <script> tag with async attribute forces file to be downloaded in background and execute as soon it is downloaded. but async with defer attribute forces <script> tag to execute once entire site is loaded.

<script src="" async defer></script>

How To Asynchronously load CSS file? If you want to load your CSS file asynchronously first you have to place provided <script> in your head file and then you can use loadCSS() function to load you CSS file asynchronously.

<script>
// https://github.com/filamentgroup/loadCSS
!function(e){"use strict"
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this)
</script>

Now you just have to use loadCSS function.

<script>
 loadCSS("https://www.yourCSSLinkHere.com");
</script>

In this way you can load your CSS and JS file Asynchronously.

You can use HTTP/2.0 to overcome speed issue because HTTP/2.0 allows your file to be downloaded parallel but HTTP/1.0 won't allow your file to be download parallel, in other way HTTP/1.0 follows FIFO(First In First Out) rule.

Asynchronously load to eliminate render-blocking js & css?

2 Answers2