How to load JQuery faster?

Question

I am having aspx which has jquery. Due to delay in loading jquery I am facing some style issues. Please can anyone tell me how to load jquery very fast.

Answer 1

LABjs is a script loader that allows you to load scripts in a dependancy order, so you can start by loading jQuery and not block other scripts from loading. You would only block those scripts that are jQuery dependant. This may help you increase the page load speed.

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance.

Answer 2

I read a Blog post by Sam Saffron from Stackoverflow on this topic today. I didnt try out the authors tipps yet though so I cant confirm.

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

the tl;dr; is to push jquery to the footer of the page and define a $.ready function in the header which captures all the scripts that couldnt yet be run because jquery didnt load until the actual $.ready function is loaded.

Answer 3

Make sure that jQuery file is delivered with content expiry headers set, so it can be cached by the browser.

Answer 4

Put your script after all of your CSS files(). And you can load it like so:

 <script id="script-batch" type="text/javascript">
        (function(d){
            var js = d.createElement('script'); js.async = true; js.defer = true;
            js.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
            d.getElementsByTagName('head')[0].appendChild(js);
        }(document));
 </script>

First of all it will load your jQuery from the Google CDN, which is one of the fastest around. Secondly it is async across browsers and will not block anything else loading on your page.