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).
The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
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.
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.
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.
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.
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.
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
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.
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.
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.
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:
Learn more →Cache-Control: max-age=3600;Expires: Mon, 25 May 2021 21:31:12 WATTo 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.
Please note this list is not exhaustive, nor based on any particular sentiment or interest.
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.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
React’s next era, AI code review tools, and more: discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the December 3rd issue.
Aurora Scharff discusses React’s async coordination primitives, and how React’s new era signals a fundamental shift in how devs build software.
Explore TanStack DB’s new feature, Query-Driven Sync, and how you can leverage it to build efficient, scalable React applications.
Error boundaries catch only render-time failures, which isn’t enough for modern async UIs. Signals treat errors as reactive state, giving you consistent handling across your app.
Hey there, want to help make our blog better?
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.
Sign up now
