How to load JS and CSS Asynchronously (without breaking any page)

By: Sunil Kumar |  In: Web Developement  |  Last Updated: 2017/10/18

How to load JS and CSS Asynchronously (without breaking any page)

Some of you might say-

This is an easy task. Everyone can do it.

But I have seen a lot of web developers struggling to load CSS and js asynchronously. It’s not easy to load CSS and js asynchronously without breaking any page.

In initial days I was also struggling with this problem and after a lot of research, I found a way to do this easily without any struggle.

Here I will discuss the same technique anyone can use to load CSS and js asynchronously all without breaking Google Analytics and other scripts you might already have installed.

Head.js

head.js is the only key behind all this scene. It’s the only js you need to call inside your head section (All other js will be called asynchronously).

While head.js has a number of components – media queries and dynamic CSS among them – the reason it initially became popular, and the reason I’m talking about it now, is its basic, core functionality

Head.js also helps you in rendering your pages. As all the js and CSS loaded asynchronously, your page will load amazingly fast which will improve your page speed also.

Also if you call all your js and CSS in the head, a user will see an empty page since all the resources being loaded completely.

That’s unacceptable.

Head.js alleviates this problem by giving you asynchronous script loading. Your application JavaScript, your fonts, jQuery, Google Analytics… everything that got put into your head that stopped your page from loading now loads at the same time as the rest of your content. Your user sees a page faster and is happier as a result.

Let’s Do the job

To get the job done we need to get the head.js. you can get the minified head.js link from CloudFlare. Copy that link and call this in your head section.

 <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.core.min.js'></script>

Loading Other CSS/JS(Direct)

Manage your library’s dependencies. Load JavaScript and StyleSheets in parallel but execute them in the correct order.

Need to quickly load a CSS or JS file?

head.load():

// Load up some JS
head.load("jQuery.js", function() {
    // Call a function when done
    console.log("Done loading jQuery");
});

// Load up some CSS
head.load("bootstrap.css");

Loading Other CSS/JS(Conditional)

On document ready, if the user is using IE8, you need to load 2 scripts, or otherwise, load a different script, then wait for them to finish loading, then fire a callback, and then load/apply a stylesheet? Yeah right..

Easy:

// head.ready(document, callback)
// head.test(test, success, failure, callback)
   head.ready(document, function() {
       head.test(
             (head.browser.ie && head.browser.version === 8),
             ["file1.js", "file2.js"],
             ["other.js"],
             function() {
                 // run callback

                 head.load("file1.css");
             }
        );
  });

Of course, you can use each of those functions (ready, test, load) individually too.

Fixing the issues

$(document).ready() :

This is the easiest thing to correct. $(document).ready() now fires before all your scripts have finished loading since each script is loaded asynchronously and separately.

So you’ll either see weird behaviour from it, or it won’t execute at all (since $ will be undefined, as jQuery has yet to load). Simply replace all instances of $(document).ready() with head(). head() is called by head.js when your scripts have loaded. Something like this would make sense:

  head(function() {
  // Do anything
})

Conclusion

And that’s all there is to it! With these simple tips (and simple fixes) you will be able to load all of your CSS and JS Asynchronously without breaking any page or functionality and the plus point is your pages will be incredibly, ridiculously fast.

Also Read:

15 Tips to Speed-up Your Website Amazingly

Comments


Leave a Comment

Your email address will not be published.

*


Sunil Kumar


I am the owner of acmeextension. I am a passionate writter and reader. I like writting technical stuff and simplifying complex stuff.
Know More

Join more than 10,000 others Web Developers


%d bloggers like this: