Use 3rd party library from CDN or embed and host it on your server?

3 minute read  

With any sizable website/app, you should already be using a handful of 3rd party libraries or frameworks in your code. When the time comes to host a Production site, you need to make a decision to:

  1. Embed 3rd party libraries and host them together with the site, or
  2. Reference them using external CDN

Most of the time your should reference them using external CDN. However there are cases where it’s better to include/embed them in your own code and host them together with the site.

Let’s take a closer look at the pros and cons of both options and when it’s better to use one vs the other.

EMBED AND HOST 3RD PARTY LIBRARIES

Pros

  • You’re in control of those 3rd party libraries
  • The versions of those libraries are exact
  • You have the ability to modify and extend the libraries, if the licenses allow
  • You can bundle all libraries together into a single file through a build process to reduce the number of HTTP requests to your server
  • No need to concern about the availability (up-time) of the 3rd party CDN if it ever goes down. The 3rd party libraries are always available together with your code whenever the site is live.
  • You can build a self-contained website/app that is hosted locally without Internet access

Cons

  • End-user experience: potentially slower speed for the initial site loading due to additional HTTP requests, if you don’t use any build process to bundle libraries into a single file
  • Extra load that your server have to handle to process the additional HTTP requests
  • Extra bandwidth you have to pay to serve those libraries

REFERENCE 3RD PARTY LIBRARIES USING CDN

Pros

  • End-user experience: potentially much faster speed for the site loading due to users already have those popular libraries cached on their browsers
  • Reduce the load on your server
  • Reduce the cost for your bandwidth

Cons

  • Small or un-popular libraries may not have the CDN option
  • May not offer a particular/exact version of a library
  • Very difficult (not worth it) to modify or extend the library if it’s referenced through CDN
  • Even though the chance is slim, the CDN may go down and will render your site unusable
  • Require Internet access to load the libraries

WHEN TO CHOOSE ONE VS THE OTHER?

Most of the time you should reference 3rd party libraries using their CDN. Make sure to always reference an exact version of the libraries you’re using e.g.

<link rel="stylesheet" href="https://cdn.com/libraryA-v1.2.min.css">
<script src="https://cdn.com/libraryB-v1.3.min.js"></script>

Only embed and host them on your server if you meet these conditions:

  • The library doesn’t have a CDN option
  • You cannot target an exact version of the library through CDN
  • You need to modify or extend the libraries
  • Your site/app is self-contained, locally hosted, and doesn’t have Internet access (e.g. a kiosk app)

Optional: How about doing both?

To go the extreme route to get the best of both options, people have figured out how to use CDN for speed improvement with a fallback to use local copy of the libraries for jQuery and Bootstrap. The idea here is to:

  • Reference the 3rd party library using the CDN option normally
  • Then check if the library is loaded (the check will vary depending on the particular library)
  • If the library is not loaded through the CDN, we’ll write into the HTML document a line of code that will load the embedded 3rd party libraries from our server

E.g. jQuery

<!-- jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- jQuery fallback from our server -->
<script>
  window.jQuery || document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>')
</script>

E.g. Bootstrap JS

<!-- Bootstrap JS from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Bootstrap JS fallback from our server -->
<script>
  if(typeof($.fn.modal) === 'undefined') {document.write('<script src="/js/bootstrap-3.3.7.min.js"><\/script>')}
</script>

E.g. Bootstrap CSS

<head>
  <!-- Bootstrap CSS from CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <!-- Bootstrap CSS fallback from our server -->
  <div id="bootstrapCSSTest" class="hidden"></div>
  <script>
    $(function() {
      if ($('#bootstrapCSSTest').is(':visible')) {
        $("head").prepend('<link rel="stylesheet" href="/css/bootstrap-3.3.7.min.css">');
      }
    });
  </script>
</body>

As you can see, the check to determine if a particular library (JS/CSS) has loaded from the CDN varies depending on that library and what global variables have been defined in the library. There isn’t a consistent and generic way to perform the checks for all libraries. For the purpose of employing KISS principle for maintainability, I don’t recommend this option of doing both.

Published:

Leave a Comment