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...
- Decreased Latency
- Increased Parallelism
- 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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://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…
- Type in 'about:config' into the Firefox's navigation TextBox
- Filter for the 'extensions.yslow.cdnHostnames' Preference Name
- Double-Click & enter 'ajax.googleapis.com,ajax.microsoft.com' into the dialog box
- 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…
227efdb7-6b2a-40d8-b5ff-5cba83325dd9|1|1.0
Blog
jquery, screencast
