Content delivery network – how you can improve the loading time of your website

Many websites and services today contain very large volumes of data in the form of images and video, among other things. A CDN, "Content Delivery Network", is a central part of how content such as images, audio and video is delivered on the web. The CDN offloads the server and thus provides high performance with minimal latency. Another great advantage is that it also makes editorial work easier.

What is CDN?

Imagine you are moving. Either you do the whole job yourself, or you get help from family and friends. The end result will be the same, but if you get help it will go much faster.

A CDN is a bit like your web server's "family and friends", that is, a bunch of other servers that help out when data is sent out to users. These servers are in turn connected in a super-fast global network and are specialized in serving content in the form of images, videos, code or documents quickly and securely. With this background you also understand why it is called CDN – Content Delivery Network – a network specially built to deliver content.

Offloading the web server, however, is only one of the many tasks a CDN has. When we speak with our customers about why they should use a CDN, it is above all the fantastic performance improvements we see and the powerful toolbox of support services you gain access to that we emphasize. Having a fast website or e-commerce can be a strong competitive advantage both in terms of user experience and in how Google and other search engines rank the site.

Without a CDN

Then you have a web server located on your premises or at an internet provider. It is solely responsible for a wide range of tasks that need to be performed when a page is served to a website visitor. It must not only serve the HTML page itself but also all images, fonts, code files (CSS, JavaScript, XML, JSON, etc.) and any videos on the site. It must do this from a central location (where it is hosted) via a single network connection. If you also have a CMS in which you manage your pages, the server must additionally fetch data from a database and execute code.

Most servers handle this fairly well. Sometimes the page may jump and flicker a bit before everything is in place, especially if there are many large images, but everything does arrive in the end.

With a CDN

But what if you are not satisfied with the page jumping and flickering? If you want lots of images and a page that loads lightning-fast? Then you should use a CDN. Your web server only needs to focus on what only it can do: serve the HTML page itself. Everything else is delegated to the CDN.

As an experiment we took a completely ordinary homepage on a completely ordinary website and looked at how the data volume was distributed across different types of files:

• HTML 12 kB
• JavaScript 95 kB
• CSS 18 kB
• Images 1000 kB
• Fonts 118 kB

In total it's about 1.3 MB (1300 kB) of data that must be sent from the server to the client when visiting this homepage. Properly implemented, the CDN could be responsible for 99% of all data, i.e. everything except the HTML page itself.

What makes it so fast?

The servers that make up a CDN are, at heart, ordinary servers, so you might wonder what makes a CDN so fast? There are several different factors that together create this marked performance increase.

"The content is delivered from a server located closer to the visitor"

The basic principle of a CDN is that you want to serve data from a server that, physically, is as close to the end user as possible. If the person browsing the site is in Västerås you would probably want the data served from a server in Stockholm. If it’s someone in Australia visiting the site you want the server to be in Sydney.

Without a CDN a user in Australia would have to load data from a server in Stockholm — on the other side of the globe. Along the way it must pass through many other cables, networks and routers. This takes time and puts load on the network.

With a CDN it would only take time the first time a user in Australia visited the website. On that first request the CDN server would fetch local copies of the files and all subsequent visitors would receive those copies from the local server in Sydney instead of having them sent all the way from Stockholm (again).

Storing local copies is called caching and it is a very important part of all technology on the Internet. Even the browser on your computer maintains its own cache where it stores files to avoid having to fetch new files every time you visit a page.

Network technology

In addition to a CDN server being located physically close to the end user and working with cached data, it is also specially configured to serve files quickly. It is connected to a very fast network and configured for speed, for example by serving all files over the HTTP/2 network protocol. A typical user notices none of this except that things are fast.

We say "server" in the singular, but in practice it involves multiple servers located in data centers, connected in clusters. One and the same page can therefore be served by several different servers in parallel. They are configured for load balancing, which means they work together and distribute the work evenly among themselves. So if one server suddenly gets too busy, the others step in and take some of the load off it.

Compression

Compression is about reducing the amount of data that is sent. You still have to send all the data in full, of course, but you can make sure it's in a format that is as compact and lightweight as possible.

A CDN always applies a certain amount of compression to the data traffic automatically, like most modern web servers. However, it is their toolbox for, above all, image compression that makes the CDN something beyond the ordinary.

Image handling with a CDN

An image is an image, right? Not quite. It can be scaled, cropped, compressed, rotated, masked and saved in a variety of image formats - JPEG, PNG, GIF, SVG, WebP, etc. You get access to all these functions when you use a CDN. Some functions can be set to happen automatically. For example, a CDN can detect if the visitor has a modern browser and serve an image in WebP format instead of PNG or JPEG. That alone yields an image file that is 25 - 35% smaller in file size than its equivalent in JPEG or PNG.

But the biggest savings come from adapting the images' size based on how large they need to be to look good on the individual user's device, known as responsive image handling. A mobile phone has a much smaller screen than a typical desktop computer, so it's unnecessary to send large images to the phone, which also often has slower network speeds. This does not happen automatically; the site developer defines a number of different image sizes that the CDN then serves the image in. The browser then determines which image size to load based on the size of the user's browser window.

If we go back to the typical homepage mentioned at the beginning, then with properly configured image handling you can save many precious kilobytes for mobile users.

To make the page look good on a very large screen (e.g. 2560 x 1440 pixels) you need to load 1.4 MB of image data. The same page shown on a smartphone with a display of 360 x 640 pixels only needs to load 734 kB of image data - just half as much. They are the same images with the same content, but their size and sometimes even their cropping have been adapted to the user's device.

Making things easier for the editor

For an editor it can save a lot of time. Previously it was common to have to export several different versions of the same image manually and upload each image separately to get a good result. With a CDN you avoid that. The editor only uploads the high-resolution version of the image and the CDN then generates all the sizes the image needs to work in the responsive design. If you need to manually review the cropping of images you can do it directly via the CMS. Or you can let the CDN’s AI handle this as well. For example, it can identify faces of people in the images and ensure the images are cropped with those as the starting point.

Don’t you lose control over the files?

If you let a global server network cache, serve, compress and handle both images and other data, don’t you lose control over the files?

• What happens if you update a file? How does the network know to fetch a new version instead of using the cached file?
• What happens if you delete an image? Does it remain anywhere then?
• How does GDPR work in practice if data on a server located in Europe is cached on a server located in the USA?
• What responsibility does the CDN provider have for ensuring their servers do not go down or get hacked?

All of these are questions you should ask before implementing a CDN. Fundamentally it does not differ that much from other cloud-based services. They are external servers located in large data centers distributed around the world. Most companies already use other cloud-based services today such as Google Docs, Office 365, Salesforce or Jira.

If your organisation is subject to special legislation regarding data handling, chances are you already have policies for using cloud-based services. If you are unsure, our recommendation is to review the specific CDN provider’s information. In general, it’s good to check whether the provider’s terms include a role as data processor within the agreement they offer, but the safest option is to contact them about GDPR-related questions.

Regarding caching, it is true that files can be cached for up to a year unless the CDN is told otherwise. That’s why a solution called "fingerprinting" is usually implemented. This means that if an image or other file is updated on a site, you also change the image’s digital fingerprint — in practice a string of characters. The CDN checks whether the character string has changed and thus knows it’s time to fetch a new version of the file. They also usually provide logged-in control panels with functions to manage caching and other aspects of their data handling for you as a customer.

Summary

• Content loads lightning-fast because it is delivered from a server located closer to the visitor
• A CDN server works with cached data and is specially optimised to serve files quickly
• The content is compressed which makes it load faster and removes the need for manual intervention
• It makes life easier for editors who only need to upload a high-resolution version of an image

Also read