Why Use CDN Javascript And CSS Hosted Libraries

Having a website that load super fast is very important. One of the factors used by search engine giant Google, in ranking website on SERP is speed. website that load fast tend to rank higher on search engine result page.

One way we can make our website load fast is the use of Content Delivery Network, say a user from south africa, is visiting your website hosted in an US server, it take several seconds for his request to travels to USA server and then receive a response. but with a CDN service, your cache copy of your website is served to the visitor from the CDN server closest to the user.

Most website on the web comprises of cascading stylesheet (CSS) and JavaScript files. mind you, the presence of these files have considerable impact on website loading time.
Hosting these files on your website server can increase your site loading speed as the files are downloaded each time a user is visiting pages of your website which in turn lead to unnecessary bandwidth consumption.

It is best practise that JavaScript files like jQuery, MooTools and CSS files be hosted on a CDN so as to decrease their impact on website loading speed rather than hosting them on your site server.

Good And Bad Practice

All too often, I find code similar to this when inspecting the source for public websites that use jQuery;
[javascript]<script type=”text/javascript” src=”/js/jQuery.min.js”></script>[/javascript]

this shows that jQuery.min.js code resides in folder “js” on their server.
however, loading jQuery for instance from Google Hosted Libraries is considered the best practice as you reduce your own
bandwidth costs and ultimately help your website to load faster because the user has probably already
cached a copy of jQuery locally as a result of a visit to another website also using the Google CDN.

rather than use the above bad practice, you should include jQuery to your website via;
[javascript]<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>[/javascript]

What are hosted libraries

Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries and CSS files.

List Of hosted libraries websites

Below are popular list of website offering content distribution network for the most popular, open-source JavaScript libraries and CSS framework.

  • Google Hosted Libraries – The Google Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries such as AngularJS, Chrome Frame, Dojo, Ext Core, jQuery, jQuery UI, MooTools, Prototype, script_aculo_us, SWFObject and Web Font Loader.
  • Microsoft Ajax Content Delivery Network – The Microsoft Ajax Content Delivery Network (CDN) hosts popular third-party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications. For example, you can start using jQuery which is hosted on this CDN simply by adding a
  • Jsdelivr.com – jsDelivr is a free CDN (Content Delivery Network) where any web developer can host their files, including CSS, fonts, JavaScript, jQuery plugins, etc.
    jsDelivr is a public open-source CDN where anyone can submit a project to be hosted and delivered by our network. it doesn’t look at the popularity of the project to approve it for inclusion in jsDelivr. Plus a lot more types of projects are allowed, like CSS frameworks, fonts, WordPress plugins etc.
    If you are on WordPress, they have a plugin that can offload your CSS and javascript files to their CDN.
  • CDNJs – Unlike to other hosted libraries that of Google or Microsoft, they only host the most popular libraries whereas CDNJS host the other stuff too with over 145 libraries wich is almost 15 times of libraries hosted at Google. CDNJS is powered by CloudFlare.
  • Bootstrapcdn.com – if you’re looking for a CDN to host Bootstrap, the folks at NetDNA have graciously provided a free one.
Don’t miss out!
Subscribe to My Newsletter
Invalid email address