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
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
Share Improve this question asked Jul 21, 2009 at 11:34 Ole SpaarmannOle Spaarmann 16.8k29 gold badges106 silver badges167 bronze badges5 Answers
Reset to default 5Personally 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
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.
place your javascripts the end of the page, just before < /body>
Definitely place this blocking script at the end of your page, before </body>
.
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 remend reading the web page optimization rules from this page: http://code.google./speed/page-speed/docs/rtt.html.
Or read either of Steve Souder's books: "High Performance Websites" and "Even Faster Websites"
Just put the <script>
elements at the end of the document (just before the </body>
tag).