How to prevent external JS to block your site from loading?

Question

Hi,

how do I prevent slow loading external js files from blocking the loading process of the whole website (because the browser processes 2 requests only at a time)?

Let's say I want to include the sharethis button but the server is encountering heavy load and needs to long to serve my request, how can I force the rest to load anyway. Or should I add the external scripts after the site has loaded already?

I'm using RoR with jQuery.

Best, Ole

Answer 1

You should dinamycally load the external Javascripts by using $(document).ready() function of jQuery.

You'll have to create the <script> elements, and append them to your document.

Answer 2

place your javascripts the end of the page, just before < /body>

Answer 3

Just put the <script> elements at the end of the document (just before the </body> tag).

Answer 4

Personally I would load the extra items after the ones that you need.

For example add the code to bottom of the page so that jQuery has already loaded and then load them from jQuery like below

$(document).ready(function(){
  $.getScript("urlofscript");

});

Details of getScript() here

Answer 5

definitely place this blocking script at the end of your page, before .

Or if you want to lazily load it / don't actually need the script for the page to load, then the document.write() option is good.

I also recommend reading the web page optimization rules from this page: http://code.google.com/speed/page-speed/docs/rtt.html

or read either of Steve Souder's books: High Performance Websites and Even Faster Websites