Code Responsible

Skip navigation

Let Google Host Your JQuery

google and jquery

At some point you’ve probably used or seen the link to Google’s hosted JQuery file. It’s good practice to use Google AJAX Libraries content delivery network to serve jQuery, rather then hosting your own version of JQuery. There are a few benefits over hosting JQuery on your server: increased load time, increased parallelism and better caching.

Increased load time

Google’s AJAX Libraries are on a CDN (Content Delivery Network). Which means their files are hosted on a large distributed system of servers deployed in multiple data centers across the Internet. Since Google’s JQuery file is spread out across these data centers it will help speed up the initial load time for a user accessing your website.

Increased parallelism

Browsers prevent overloading a server by limit the number of connections that can be made simultaneously. The limit is different for each browser but it can be as low as two connections per host. So by using the Google AJAX Libraries CDN will eliminate at least one of the requests to your site.

Better caching

A major benefit to using Google’s AJAX Libraries is the caching, which may prevent your users from having to download jQuery at all. The browser may already have a cached version. This will help make your website’s load time a lot faster.

There are a lot of websites already using Google CDN to load JQuery that all the references being made to the same URL, the browser won’t waste time re-requesting the file if it’s already cached.

Implementation

Now you may be wondering “what happens if the website has troubles connecting to Google”. There are ways to add a fail safe just incase. Below is perfect example of that. The browser will first try to load JQuery from Google’s CDN. If for some reason that doesn’t work, JavaScript will add a copy from your server. Just make sure you add the JQuery file to your server and add the proper path.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write("<script src='js/jquery.min.js'>\x3C/script>")</script>

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

2 Responses to “Let Google Host Your JQuery”

Leave a Reply

Comment Form