How should I work regarding Bootstrap and Javascript links?

Question

How best to work with Bootstrap or Javascript?

1. Reference by CDN

   link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
   

2. Reference by downloaded file

   link rel="stylesheet" href="css/bootstrap.min.css
   

Answer 1

The two forms are complementary and both with their respective disadvantages.

Ideally, you should always prefer the version that is on the CDN, because, of course, it is on the CDN. A CDN file will normally be loaded much faster than one on the server itself, especially when it comes to Bootstrap and Jquery, which are used on the vast majority of websites. This happens because, if your client has already accessed any other site that uses the same file on CDN, the client will already have the version used downloaded on his computer and, thus, use it. Don’t worry, the browser does all the heavy lifting for you.

But if the client does not have the version already downloaded and the connection to the CDN server is unstable, your application will not be able to load properly. Depending on external applications, which we have no control over, is not always a good option. If the file is small and does not harm the loading of your application, you can use only the local version, pointing to the file on your own server.

If you want to use the advantages of both solutions, I advise you to import the file directly from CDN and create a fallback with Javascript so that if the file is not loaded successfully, import your local version. This way, if the CDN is available, it will use all the advantages of it, but when not, it will load the local version, even requiring more time to load the application, but avoiding that it is broken.

It is quite common to see this approach in jQuery import:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.10.2.min.js"><\/script>')</script>

In the first line the library is imported from what would be equivalent to CDN. If this request fails, the object window.jQuery will continue to be null, causing the second line to be created the script import of the local archive.

Note: nothing prevents you from using another CDN service such as fallback, but also he would have the same problems and ideally he would have to have another fallback to him; it depends a lot on the project that he is doing, but honestly I have never seen any application that uses multiple fallbacks and which was harmed by not using.

Additional readings

• About fallback for CDN
• Why CDN web addresses do not specify protocol?
• Use local files if CDN is Offline
• Serve libraries with CDN or Own Server?
• Creating a CDN - content delivery network
• Differences between Cache and CDN usage