Examples of CDN use

Learning objectives

You know examples of how a CDN can be used.

The use of content-delivery networks depends on purpose and role of the web applications that use them. Applications that rely on static resources such as client-side code, HTML, styles, and images can offload content to CDNs, which increases the performance of the applications. This holds also for media platforms and services such as YouTube and Netflix, which use CDN servers for storing and distributing the content.

For further details on Netflix CDN, see Why Netflix Built Its Own CDN and A look under the hood of the most successful streaming service on the planet.

Content-delivery networks can also provide an additional layer of security on the application, as they can be used to protect websites from denial of service attacks. For further information, check out Cloudflare's learning resource on DoS and DDoS attacks.

As a concrete example of CDN use, let's first remind us of how we styled applications in the Web Software Development course. There, we relied on content-delivery networks for retrieving data. Although it was not explicitly discussed at that point, the choice was deliberate, as it allowed offloading static content from the server responsible creating the dynamic content. As an example, when taking Bootstrap into use, we added the following link to the page heading:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

Similarly, when using Milligram, the following links were added to the page heading:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">

When we consider the links, the CDN that we used for Bootstrap is jsDelivr, while for Milligram (and the content it requires), we used Cloudflare and Google Fonts. Although it might not be clear from the URL, Google Fonts also uses a CDN to serve the font definitions. One of the interesting aspects of jsDelivr is that it can be used as a CDN for third party services. It can be used to, for example, create a CDN for content on GitHub and for unpkg. This, in turn, would allow deploying static content on GitHub, and use the content through jsDelivr. On the other hand, Cloudflare can be used as a proxy, where all traffic are directed through Cloudflare, potentially also hiding the location of the application.

As an example of Cloudflare being used as a CDN, first visit the address https://holy-pine-5084.fly.dev/. The address https://holy-pine-5084.fly.dev/ hosts a simple application that shows an image (the page is intentionally created on the server using server-side rendering, although it could also be a static site). The application works so that on request to the root path of the application, the count used to select the displayed image increases by one, and thus the image changes during page reloads. When we make a request to the site, we receive (for example) the following response:

curl -v https://holy-pine-5084.fly.dev
* Trying 2a09:8280:1::3:91c0:443...
* Connected to holy-pine-5084.fly.dev (2a09:8280:1::3:91c0) port 443 (#0)
...
<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/papercss@1.8.1/dist/paper.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
  </head>
  <body>
    <div class="container paper">
      <h1>Current image: 1</h1>
<img src="/static/1.jpg" />
<p>Image author <a href="https://unsplash.com/@alanking">https://unsplash.com/@alanking</a></p>      
      <p><em>All images from <a href="https://unsplash.com/" target="_blank">Unsplash</a> unless otherwise noted.</em></p>
    </div>
  </body>
</html>

Whenever the address https://holy-pine-5084.fly.dev/ is visited, the image is also retrieved from https://holy-pine-5084.fly.dev/. In terms of the loading times (depending on traffic and omitting browser cache), from one location in Finland, the time that the image would take to load is in the range from 100 ms to 170ms, as outlined in Figure 1.

Figure 1 -- Load times for an image from fly.dev.

To start using Cloudflare as a CDN for the application, we would need a domain. Fortunately, we have just the perfect one -- scalable.website. To take the domain into use in Cloudflare, we would configure Cloudflare DNS servers for the domain, and proxy the traffic through Cloudflare, potentially also configuring certificates. In addition, configurations to match our needs would be added -- as an example, for the above application, we would wish that the requests to /static would be cached, while the requests to the root path of the application would not be cached (i.e. the request to root path would go to the actual application). In addition, would we wish to do so, we could also adjust the caching times for the specific contents.

Once this is done, we can also try out the response times from Cloudflare for the same image. As shown in Figure 2, now the loading times are between 60 and 100ms (again, from a single location in Finland).

Figure 2 -- Load times for an image from scalable.website (using Cloudflare).

Similarly, although the content is the same as we receive from the address https://holy-pine-5084.fly.dev/, the concrete IP address differs for the scalable.website.

CDNs and certain countries

Note that some countries and governments seek to limit access to information. One way to do this is to block CDNs as they can be used for masking information sources. When taking a CDN into use, workarounds may be needed for some countries. For additional details, see e.g. When Your CDN-Hosted Site Hits The Great Wall of China — a Workaround Story.