Why put Javascript, CSS, and images on another server?

Question

On most sites I noticed that they use another server to load scripts, CSS and images. Because they use?

Answer 1

It’s a technique called CDN. This technique consists of ordering the file from a widely used server. You can import for example a jQuery script from the Google server.

But why?

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

The downside is that to work perfectly the requested Urls need to be equal (so that the browser understands that the file is already cached). Also if your site is the first to request a certain URL, there will be no cache, and loading will be slower 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 ceases to be requested, returning an error 404. But you can treat this with a check that loads a local version in this case.

Take 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>

Answer 2

There are several ways to implement this type of solution, the most common currently (and which you are probably referring to) is called CDN (Content Delivery Network). Although it is being widely used in the WEB medium nowadays, this practice is not only advantages, and its use should be considered taking into account your project and how you think to make your application available.

Cases where to use:

• Web applications in general
• Websites in general
• Blogs in general

Cases where not to be used:

• Intranet system, where the server is within the company itself. In these cases it is worth not using Cdns, since the CSS and Javascript files would be on a server of the network and the delay / traffic would be minimal. Furthermore, if the internet goes down, an intranet system should continue to function fully, if you are using CDN, this guarantee would no longer exist.

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

Advantages of the CDN:

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

Bandwidth saving: Each time a user requests the files of your project that are in CDN this request goes to the CDN server and not yours, which, in large scale, saves you a lot of data transfer.

Saving server resources: While this problem can be solved with caching (on the client and/or server side), it can still be that it helps you save server resources, as it will not need to worry about delivering the files to each request, this work is passed on to CDN.

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

Disadvantages:

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

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

Fall CDN, your project breaks: If the CDN goes off the air for any reason whatsoever, the user who accesses your site will not receive the files, which will likely affect the functioning of your project.

Answer 3

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.

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.

Answer 4

'Cause it makes uploading the site faster.

If you have a little time, take a test.

Call google Jquery and your server Jquery, on the network Google Jquery will

load faster than Jquery from your server.

You should only be aware of the permission, if a person access your site in Iran, google’s 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>

Answer 5

About using Google’s CDN Jquery, it may not be the best option anymore. There is a CDN Jquery that is better for Brazilian sites, because it has servers distributed throughout the country. (The other Cdns only have servers in SP)

In this post they explain better, worth taking a look: https://www.gocache.com.br/cdn/cdn-jquery-brasil/