Introduction

The subject of what method to serve your static files has been a long discussion with neither side accepting to take the fall. At best, the subject gives developers more understanding of both methods and helps them choose a method depending on the situation.

Self-hosting, in simple terms, means storing all of your static files (HTML, CSS, JS) on your own server. A CDN (Content Delivery Network), on the other hand, is a distributed network of servers and data centers spread around a location. The idea behind this is to provide higher availability of content by reducing the physical distance between a server and a user.

This article is concerned about importing external resources via a CDN vs having them served locally from your server.

It is not uncommon for developers to link to static assets that are hosted at a public URL. A very common example is linking to bootstrap or jQuery from one of the many URLs that house the file.

There are a few reasons as to why this is a preferred method but on top of this list would be its ease of setup. Pulling the resource via its CDN is as simple as copying a line of code or the whole boilerplate- as seen on bootstrap's official docs. To me, this feels like a conversion strategy for visitors interested in checking out the framework since anything extra might make a visitor procrastinate.

Why Use a CDN?

There are a lot of perceived benefits of using a CDN:

• Cross-Domain Caching
• Faster Loading Speed
• Lower Bandwidth Cost
• Ease Of Use

Cross-Domain Caching

As answered by Cloudflare: "Caching is the process of storing copies of files in a cache, or temporary storage location, so that they can be accessed more quickly. Technically, a cache is any temporary storage location for copies of files or data, but the term is often used to describe Internet technologies". See detailed explanation here.

Generally speaking, third-party content seems to be less well cached than first-party content. This is because the first-party content is usually stored on the user's device. While the third-party content is stored on a server, which is often located in a different geographical location.

Faster Loading Speed

The only thing that matters, in the end, is the speed of loading your website. Closely related to speed is the number of files being loaded. Opening new TCP connections to get CDN-hosted versions of assets comes with a price- the cost of a new TCP connection. Before data can be sent, transmission between client and server must be made.

Looking back at the code snippet shown above:

In the snippet, four files are hosted across two different origins. That is two extra TCP connections. The cost of these extra connections varies depending on network latency, network congestion, DNS resolution, and a host of other factors. By simply moving our assets to our own infrastructure, we completely remove any extra connection overhead.

Another penalty here is loss of prioritization. All resources within the same TCP connection carry a priority. The browser and server work together to create a dependency tree so that more important assets are fetched sooner than the less important ones. If assets are fetched from multiple domains, several TCP connections have to be opened up. We cannot cross-reference any of the priorities within these connections so we lose the ability to deliver assets in a well-designed manner.

Lower Bandwidth Cost

Web hosting services charge for data that is transferred to or from the origin server. If some parts of this data are cached within a CDN, a lesser amount of data would be transferred from the host server thereby reducing bandwidth consumption from your servers. That being said, this would be a useful strategy for a website that generates a lot of traffic since most hosting plans offer limited bandwidth.

For a website not as busy, the compressed file size (gzipped) of bootstrap is 20kb. See more listings of popular CSS libraries here. It's not very costly if speed is of the essence. Lowering bandwidth cost would always be a tradeoff between cost and speed and is something to consider if resources are limited.

Ease Of Use

As stated in the opening of this article, getting started using bootstrap or jQuery's CDN is as easy as copying one line of code.

REMARKS:

• If you need a CDN for your jQuery or bootstrap, there are chances that you would need a CDN for other things too. In this case, you should get yourself a CDN and move files over.
• To get the best of both worlds, i would recommend setting up a fallback to the local version anytime a CDN is being used.