Django: Bootstrap CDN or loading Bootstrap files from local server?

Question

I am trying to make my first website. I am using Django for it. I have a question related to the inclusion of css/js from Bootstrap.

What is the difference between installing it and linking it using BootstrapCDN?

What happens if that link is no longer accessible? Will it affect the website?

Can't I just include those files in statics directory?

I have this in base.hml file of my app:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'flatly.css' %}">
<link rel="stylesheet" href="{% static 'main.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 1

The main point and reason for using CDNs for loading any files (not just Bootstrap files) as opposed to hosting those files on your server is SPEED!

CDNs can drastically increase the speed/performance of your website.

That is because of 2 things:

1. CDNs allow more files to be loaded in parallel i.e. at the same time! While if you host the same files on your own server, they will be loaded one after the other and depending on how many files (including image files etc.) your web page has to load, that alone can make a huge difference in performance.

2. Files that are used on MANY websites (such as Bootstrap files for example) are already cached in the browser of your website visitors! So, they don't have to load them at all which is an even greater gain in speed/performance. This assumes that you are using CDNs that are used by thousands or hundreds of thousands of websites to load the same files (because the browser will only use cached files if the URL/path to those files on your website is identical to the CDN URLs that another website, previously visited by the user, also uses).

Also, you can include a small piece of JavaScript or jQuery that checks whether or not the external CDN file is available and if the CDN happens to be down for some reason, then and ONLY THEN that piece of JavaScript would load the corresponding files from your local server.

Answer 2

A quick answer: you can use both it won't affect "link is no longer accessible" don't worry those are official CDN's and most of the people uses cdn for those css and js.

So first way is that you include all the static files from your own domain (localhost or static storage) in this case all the request for those static files will be handled by your server. If you are using localhost it won't affect you much but when you host it on server it will drain a little bandwidth traffic of your server.

On the other hand if you use cdn then you will save space as well as bandwidth of your server