Why put JS, CSS and images on another server?
On most sites I noticed that they use another server to load scripts, CSS and images. Why do they use it?
5 answers
Is a technique called CDN . This technique consists of requesting the file from a very 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 Google jQuery, and enter your site that is also using the same URL to request, it will already have cached and therefore increases performance considerably since it will not need to use again. Just as if your site is the first, it will already cache the file you requested in the browser so that it does not have to be requested again on other sites.
The disadvantage is that to work perfectly the requested URLs need to be the same (so that the browser understands that the file is already in the cache). Also, if your site is the first to request a certain URL, there will be no cache, and loading 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 ceases to be requested, returning a 404 error. But you can treat this with a check 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 CDN (Content Delivery Network). Although it is being widely used in the web environment nowadays, this practice is not only advantages, and its use should be thought out taking into account 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 to be used:
-
Intranet system, where the server is within the company itself. In these cases it is more worthwhile not to use CDNs, since the CSS and JavaScript files would be on a server of the network itself and the delay / traffic would be minimal. In addition, if the internet goes down, an intranet system should remain in full operation, if you are using CDN, this guarantee 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 as 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 CDN:
- Band;
- saving server resources;
- faster delivery of resources.
Band economy: 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 you a lot of data transfer.
Saving server resources: Although this problem can be solved with caching (on the client side and / or server), yet in some extreme case it may be that it helps you save server resources, since it will not have to worry about delivering the files to each request, this work is passed on to the CDN.
Faster delivery of resources: Large CDN providers often have servers in various parts of the world, which ensures lower latency for requests and sending files to the user.
Disadvantages:
- drop in Project security;
- CDN drops, your project breaks.
Drop in Project safety: If the CDN you are using is hacked or untrusted and you have the files modified, you will be distributing "fraudulent" and possibly dangerous files to your users.
CDN drops, your project breaks: If the CDN goes off the air for any reason, the user who access 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 a maximum of 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 for using an external server in this case is to take advantage of your browser's cache.
Because it makes the site load faster.
If you have a time make a test.
Calls google's jQuery and your server's jQuery, in 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 website in Iran, google Jquery will not load, in case 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 no longer be the best option. It has a JQuery CDN 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, it is worth taking a look: https://www.gocache.com.br/cdn/cdn-jquery-brasil /