Recently, we have seen website deployment take a new shape, moving from traditional hosting methods to cloud servers. However you choose to host a site, there is a constant need for optimization. One way to achieve this is through content delivery networks (CDNs).
What are CDNs?
CDNs are a geographically distributed group of servers, configured to work together efficiently to provide fast delivery of internet content. According to Builtwith, it is estimated that CDN’s serve 69 percent of websites viewed on mobile devices today.
There are three types of CDNs: private, public, and hybrid.
- Public CDN: public CDNs involve using a CDN provider’s server infrastructure to fulfill your content delivery needs. We’ll talk more about CDN providers as we progress through this article
- Private CDN: a private CDN requires developing and hosting your website on your own servers. Benefits range from control over your CDN locations to increased security and privacy. Challenges include having the required technical skills and acquiring sufficient IT infrastructure
- Hybrid CDN: hybrid CDNs are a blend of hosting some of your site on a private CDN, as well as leveraging public CDN providers
If you are familiar with website deployment, you might think to yourself, “how is this different from a typical web host?” Let’s take a look.
CDNs vs. traditional web hosting
Traditional web hosting services allocate space on a provided server for your website to store files, code, images, etc., thereby allowing your website to be available publicly via the internet. That’s all there is to web hosting!
In most cases, there is no offer for security, faster performance, or high availability, which some CDNs provide by default. This usually leaves websites prone to malicious attacks (specifically DDoS) and without any optimization.
CDNs, on the other hand, provide caching. They do not host web content and cannot replace the need for the traditional web hosting services. However, they cache a copy of the website content on the network edge thereby making it more accessible, and in turn improving website performance. You can read more about caches here.
Further down this tutorial, we will go into more detail of what CDNs are and how their benefits can be maximized.
How do CDNs work?
Enough of the buzz, how do I get my website connected with a CDN?
CDNs use something called a point of presence (POP). POPs are servers with multiple geographical locations where cached versions of your website content is stored.
For a CDN to work, it needs to be the default inbound gateway for all incoming traffic. This requires modifications to the DNS configuration of the website.
Today’s CDN vendors offer step-by-step instructions to get you through the activation and configuration phase. They also provide assistance via their support team. The entire process comes down to a few copy and pastes, and voila: we have a website configured with CDNs.
What problems do CDNs solve?
Latency. That’s the million-dollar answer.
Latency is the annoying delay that occurs between the moment you request to load a webpage and the moment its content appears on screen. This can be caused by a number of factors ranging from poor internet connection to how the webpage was developed.
However, one major cause is the delay in fetching the requested content from the hosting servers, which could be a long way from where you, the user, are located.
So how does the CDN reduce latency? The primary goal of a CDN is to shorten the distance between the user and the web hosting server, improving content rendering, speed, and performance. Note that while the CDN is pulling content from the web hosting server, it stores (caches) a copy of this content, making it faster for the next user within the same location.
Benefits of using CDNs
Aside from optimization and improving load time by caching content, CDNs have tons of other benefits.
Availability is a measure of how long your website and its content stays accessible over a given period of time. In a website where a CDN is not used and traffic is being served directly from the web server, as more traffic hits the site, servers must be scaled up in order to handle these demands as they come. In the event that the traffic overwhelms the capacity of the servers, the site goes down.
When CDNs are used (and the website content is being cached on the CDN edge servers), as traffic increases, the content is being served from the CDN, hence little to no traffic gets to the server directly. Also, if by any chance the web servers are down, users would still be able to access content that is cached on the CDN
Improved website load time
A highlight of CDNs is that they bring your website content physically closer to your users. It allows faster loading times, thus reducing bounce rates.
Improved website security
Because CDNs are the first point of contact for all incoming traffic, they are also the first point of contact for malicious attacks and therefore the first line of defense against them.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to use the React children prop with TypeScript
- Explore creating a custom mouse cursor with CSS
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
CDNs provide standard security features by default that can prevent malicious attacks to a certain degree, with optional advanced security add-ons like DDoS protection and firewalls.
How is the CDN cache updated?
One major factor that helps CDNs optimize speed is their ability to cache content for long periods of time. For this reason, it is important to know how to regulate the content in the CDN edge networks so that your website visitors are always getting the most up-to-date version of your site. How then do we ensure that the content of the CDN is a mirror of what we have in our server?
Let’s look at an example. In an ecommerce store, the website utilizes a CDN and has cached a couple of clothing items and shoes that users typically search for. Soon, this ecommerce store will be running a discount sale for only 24 hours. But the retention period set on the cache is 72 hours.
If the cache is not forced to refresh, many users would miss out on the sale because they are served from the CDN that now holds the outdated data. How do we update the content?
Different CDN providers have different settings and configurations to help with this, but typically we can use the following:
- Cache control headers: these are headers passed within the configuration to control the behavior of the CDN
- The expires header: here we set a specific date and time when the content of the cache is no longer valid
Expires: Mon, 25 May 2021 21:31:12 WAT
- Purge the cache: some providers have an option where you can call their APIs such that if there is a change between what is on the web server and on the CDN, the cache should be purged
To properly configure and integrate your website with a CDN, you need a provider. Here is a list of some providers that can make setting up a CDN relatively simple without breaking the bank.
- Cloudflare combines novice-friendly ease of use with expert-level features and functionality. With this setup, you just need to update the name servers to point to Cloudflare
- Fastly is a highly configurable CDN in the sense that it can be tweaked to fit most, if not all, of your site’s specific needs. However, setup can be tricky
- KeyCDN offers very low prices, and with free SSL, this is a great provider for experimenting with CDNs
- Akamai has impressive performance and wide coverage, however it isn’t so beginner-friendly
Please note this list is not exhaustive, nor based on any particular sentiment or interest.
Should your website use a CDN?
With what we’ve learned so far, it can be tempting to say yes! But that isn’t always the case.
If yours is a small business that operates solely within a particular region and your user base is local, a CDN might be overkill.
For example, you’re a knitter based out of Singapore and you make cardigans for sale with local shipping only. You set up a website so your clients can see new designs and place their orders. In this case, your business operates from a localized website and your user base is also concentrated around where your website is hosted.
Implementing CDNs in this scenario would be unnecessary because a local server will already provide efficient service to your clients.
CDNs are amazing and can be a useful part of your web development toolbox. CDNs help with scalability, which leads to user retention and return. A survey carried out by KeyCDN on website latency shows that websites with CDNs have an 83 percent decrease in latency. Ultimately, this means more first-time or returning customers are retained, and your business makes more money.
I hope this tutorial has clarified in detail what you need to know about CDNs and whether or not they are a good choice for your websites.
Get set up with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID
- Install LogRocket via npm or script tag.
LogRocket.init()must be called client-side, not server-side
- (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin
$ npm i --save logrocket
import LogRocket from 'logrocket';
Add to your HTML:
<script>window.LogRocket && window.LogRocket.init('app/id');</script>