Loading external Javascript into rails application

Question

I want to use a CDN to load in bootstrap and jquery in an attempt to improve site performance. With performance in mind, which of the following is the best way of doing this:

1. Add in a script tag directly into a html or layout file

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

2. Dynamically load the content into the middle of the asset pipeline as discussed by Daniel Kehoe here under 'Dynamic Loading'.

Answer 1

As I assume that what ever the link or different repository used for any file other than our code base, will reflect some issue of availability.

Here bootstrap js file will always depends on the speed of netdna domain server. Server down or failure will affect our performance as well as reliablity of our system. Such thing will not happen frequently but may be chance.

I will suggest as of my experience, the best way is to keep the same file on our server in compressed form to avoid such future issues and updated that file at regular interval as update release.

Reduce DNS Lookups

According to Yahoo! Developer Network Blog, it takes about 20-120 milliseconds for DNS (Domain Name System) to resolve IP address for a given hostname or domain name and the browser cannot do anything until the process is properly completed.

Merge Multiple Javascripts Into One

--> Folks you can combine multiple Javascripts like for example:

http://www.example.com/javascript/prototype.js
http://www.example.com/javascript/builder.js
http://www.example.com/javascript/effects.js http://www.example.com/javascript/dragdrop.js
http://www.example.com/javascript/slider.js

Into a single file by changing the URL to: http://www.example.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

Compress Javascript / CSS

There are also some web services that allow you to manually compress your Javascripts and CSS files online. Here are few we come to know:

compressor.ebiene (Javascript, CSS)

javascriptcompressor.com (Javascript)

jscompress.com (Javascript)

CleanCSS (CSS)

CSS Optimizer (CSS)