Make your website faster - Use a CDN 💨⚡️
Tags: webdev, performance, systemdesign, architecture
Published: 2024-02-21 18:25:16

If your website is hosted in Cape Town, South Africa, and your users are located all over the globe, the time it takes to load for a user in New York is much longer than for a user in Johannesburg. The data has to travel a longer distance to reach the user in New York. It would be great if you could move your website closer to your users. Be at multiple places at once. That is precisely what A Content Delivery Network (CDN) does.

> If you prefer the video version, here is the link 😉

{% embed https://www.youtube.com/watch?v=gMifT7d-7Z8 %}
 

## Data propagation

When you use a CDN, you deploy your website file on the **Origin Server**. The Origin server hosts the most up-to-date version of the website. Your website files must be copied from the origin server and transferred to the Edge Servers. The **edge servers** are located at very strategic points around the globe. Usually on principal data routes, at the intersection of the main internet backbones, and closer to Internet Service Provider infrastructure. 

### Push CDN

Two approaches exist to copy the files from the Origin Server to the Edge Servers. In the first approach, you (or the origin server) send the new website files to the edge servers. That option is the **push** approach. The push approach is more flexible but not ideal for data that changes often. Netflix uses this approach in their Open Connect CDN to push new content to the Edge Servers during low network traffic hours.

![Push CDN Caching animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al1prirxx1wa1osw1a4g.gif)

### Pull CDN

The second option is the **pull** approach. The Edge Servers pull the data from the Origin Server. This is the most common method. Usually, this can be done automatically and needs configuration with the CDN provider. The data pull happens at regular intervals or when the file is requested for the first time. The pool approach is suitable for data that changes often. For example, a news website can use this method to pull the latest news articles from the Origin Server.

![Pull CDN Caching animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eorayvlgx7kv7wemg35v.gif)

The data cached on the edge server can have a **Time To Live** (TTL) value. This is the time the data is considered valid. After this time, the data is considered stale, and the Edge Server will pull a fresh copy from the Origin Server. TTL value can be a few seconds or days, depending on the use case.

Once the data is on the Edge Servers, the end users should be able to access the data from those servers and get a faster response time.

![CDN client accessing edge server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr96g5c9wehgbo4n2mg6.gif)

But how does the user's browser know it should get the data from the Edge Server, not the Origin Server? 

## DNS Resolution

Without a CDN, when a user wants to access your website, the user's browser sends a DNS request to the DNS server. The DNS server returns the IP address of the Origin Server. 

![Single IP DNS resolution animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97c5yup740zshbzbybe0.gif)

With a CDN, your website now has multiple IP addresses—one for each Edge Server. When the user's browser sends a DNS request, the DNS server returns the Edge Server's IP address closest to the user. The user's browser sends an HTTP request to the Edge Server and gets the data.

![Multi IP DNS resolution animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9f3shl580okxub7yaic.gif)

That explanation is a massively simplified version of what happens. In reality, A CDN network can have multiple layers. For example, the CDN network can be organised into a hierarchy with a main Regional Server on top of the hierarchy and then a set of Edge Servers closer to the end users. Load balancers might be involved. Routing can be done via Anycast, a routing technique that sends data to the nearest server with the same IP address. 

The critical point is that the "N" in CDN stands for Network, and the servers work together to deliver the content to the user most efficiently. The fact that it's a network makes it so powerful and enables more than just faster load times.

## Power of the Network

A CDN  does more than deliver content. It can also protect your website from [DDoS](https://en.wikipedia.org/wiki/Denial-of-service_attack#Distributed_DoS_attack) attacks. The CDN network can detect this and block the malicious traffic before it reaches the Origin Server. Usually, CDN providers have measures in place to detect and mitigate DDoS attacks. However, the mere fact that there are multiple servers around the globe makes it harder for an attacker to take down your website.

And, of course, because you now have a network of servers working together, the overall traffic load is distributed across the Network. This means that the Origin Server is not overwhelmed with requests and can focus on other tasks. And if a given Edge Server is overwhelmed, the traffic can be rerouted to another Edge Server. By using a CDN, you can make your website more resilient and scalable.

We've taken a website as an example, but a CDN can be used for various content types. You could use a CDN only for your media content and leave the rest of the website on the Origin Server. Some CDN providers offer data transformation services. For example, they deliver images in different formats and sizes depending on the user's device. Traditionally, CDNs are used for static content but can also be used for dynamic content. For example, a CDN can cache the result of an API call and serve it to the user.

---

Even if things can get quite complex, the main idea is simple;

1. You put copies of your data across multiple strategic locations around the globe in Edge Servers. An edge server is simply a [proxy server](https://www.youtube.com/watch?v=oy1I02V4JKs) with a [cache](https://www.youtube.com/watch?v=DbSuaxPxqXo).
2. Users get the data from the closest location, which is faster.

---

As a bonus, here are some links to some of the most popular CDN providers

- [Akamai](https://www.akamai.com/solutions/content-delivery-network)
- [Cloudflare](https://www.cloudflare.com/application-services/products/cdn/)
- [Amazon CloudFront](https://aws.amazon.com/cloudfront/)
- [Google Cloud CDN](https://cloud.google.com/cdn?hl=en#how-it-works)