Why put JS, CSS and images on another server?

This is a technique called CDN . This technique consists of requesting the file from a heavily used server. You can import a jQuery script from the Google server, for example.

But why?

Well, if the user has already entered a site that requested the jQuery of Google, and enter your site that is also using the same URL to request, it will already have cached and therefore increases performance considerably since you will not have to use it again. Just as if your site is the first, it will cache the file you requested so it does not have to be re-requested on other sites.

The disadvantage is that to work perfectly the requested URLs must be the same (so the browser understands that the file is already in the cache). Also if your site is the first to request a particular URL, there will be no cache, and the load will slow down at least on this first visit since the request will be to an external server.

Another disadvantage is that if the server hosting the file is offline or inaccessible at the time of the request, the file is no longer required, returning a 404 error. However you can handle this with a scan that loads a local version in this case .

See an example:

<script src="//code.jquery.com/jquery-1.2.1.min.js"></script>

<script>
    window.jQuery || document.write('<script src="jquery-1.2.1.min.js">\<script>');
</script>

There are several ways to implement this type of solution, the most common one currently (and which you are probably referring to) is called Content Delivery Network (CDN). Although it is being widely used in the WEB environment today, this practice is not only advantages, and its use must be thought taking into consideration your project and how you think about making your application available.

Where to use:

• Web applications in general
• Sites in general
• Blogs in general

Cases where not used:

• Intranet system, where the server is inside the company itself. In these cases it is worth not to use CDNs, since the CSS and JavaScript files would be in a server of the own network and the delay / traffic would be very small. What's more, if the internet were to fall, an intranet system should continue to run, if you are using CDN, that guarantee would no longer exist.

• Project that values by extreme performance, where you want to reduce the number of requests to the maximum, compiling all your JavaScript and CSS files into one, in this case how you are generating a custom file (with its functions and plugins together) you would not be able to use a CDN (unless you created one, but there you go, one of the advantages of using CDN, which we will see below).

Advantages of CDN:

• Bandwidth savings;
• Saving server resources;
• Faster delivery of resources.

Bandwidth savings: Each time a user makes a request for the files of his project that are in the CDN this request goes to the CDN server and not yours, which, on a large scale, ends up saving a lot of data transfer.

Server resource saving: Although this problem can be solved with caching (on the client side and / or server side), still in some extreme case it may be that it helps you to save server resources, since it will not have to worry about delivering the files every time request, this work is passed on to the CDN.

Faster delivery of resources: Large CDN providers usually have servers in various parts of the world, which ensures slower latency of requests and sending files to the user.

Disadvantages:

• Drop in project security;
• Drop the CDN, your project breaks.

Fall in project security: If the CDN you are using is either hacked or not trusted and files are modified, you will be distributing "fraudulent" and possibly dangerous files to your users.

Drop the CDN, your project breaks: If the CDN goes out of the air for any reason whatsoever, the user that accesses your site will not receive the files, which will probably affect the operation of your project.

Images and CSS

Browsers are recommended, in the HTTP / 1.1 specification, to make at most 2 parallel downloads per host. If you have 4 images hosted on the same host, they will be downloaded two by two. If you have 4 images hosted on 2 different hosts, they will be downloaded simultaneously.

The same goes for CSS.

Scripts

Scripts are never downloaded simultaneously. The main reason to use an external server in this case is to take advantage of your browser's cache.

Because it leaves site loading faster.

If you have time take a test.

Call Google's Jquery and Jquery from your server, on the network Google's Jquery goes

load faster than your server's Jquery.

You should only be aware of the permission, if a person accesses your site in Iran, google Jquery will not load, if this happens use the code below

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>

About using Google's CDN JQuery, it may not be the best option. It has a JQuery CDN that is better for Brazilian sites because it has distributed servers all over the country. (The other CDNs only have servers in SP)

In this post they explain better, it is worth taking a look: link