Increase Your Website Performance by Hosting jQuery with a CDN
1 min read

In the following screencast I will demonstrate how to speed up your website by using a Content Delivery Network (CDN). Specifically, I will be swamping out a local copy of jQuery with one hosted by Google. You can host a variety of files (example: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject, YUI, etc...) with a CDN as well, but the following screencast only shows jQuery being hosted.

First of all, you might be wondering "What is a CDN and why do I need to use one?". If so, you are in luck because Encosia wrote a great blog post concerning this question and here is what he came up with. A CDN provides...

  1. Decreased Latency
  2. Increased Parallelism
  3. Better Caching

For a detailed explanation of the above 3 concept please read his detailed blog post. Now without further ado, here is the screencast.

In the above screencast, I showed how you can replace your local reference of jQuery (see line 4 below) with a version of jQuery that is hosted on a CDN (such as line 5 from Google or line 6 from Microsoft).

<head id="Head1" runat="server">
    <title>Test Page</title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.log('jQuery has been loaded & document is ready!');
        });
    </script>
</head>

It is worth to not that even after updating your update to use Google or Microsoft as your CDN, YSlow will still not recognize those files as being hosted on a CDN. YSlow only recognizes itself, Yahoo, as a known CDN. The good news is that you can register other CDNs (such as Google &| Microsoft) deep inside of Firefox's configuration. In order to update this setting you can follow these instructions…

  1. Type in 'about:config' into the Firefox's navigation TextBox
  2. Filter for the 'extensions.yslow.cdnHostnames' Preference Name
  3. Double-Click & enter 'ajax.googleapis.com,ajax.microsoft.com' into the dialog box
  4. Restart Firefox and re-run YSlow
    As I mentioned above, there are many files on CDNs that are available for you to reference in your project. The two CDNs that I highlighted in the above screencast are…

Edit post on GitHub


I’ve Been MVP’ed
Quickly Testing Various jQuery UI Themes on Your Website