CDN for Website

A Content Delivery Network (CDN) works by providing alternative server nodes for users to download resources like images and JavaScript. These nodes spread throughout the world, therefore being geographically closer to your users, ensuring a faster response and download time of content due to reduced latency.

While CDNs are an appropriate solution for most websites looking for speed improvements, not every site necessarily needs one. It’s important to understand how CDNs work and ultimately, if the benefits are worth the cost of adding one.

What is a CDN?

A CDN is essentially a network of geographically dispersed servers. Each CDN node (also called Edge Servers) caches the static content of a site like the images, CSS/JS files and other structural components. The majority of an end-user’s page load time is spent on retrieving this content, and so it makes sense to provide these “building blocks” of a site in as many server nodes as possible, distributed throughout the world.

When a user requests your site, the node closest in proximity to user will deliver the static content, ensuring the shortest distance for the data to travel (reduced latency), therefore providing the fastest site experience.

Why do I need a CDN?

To improve your user’s experience in terms of speed!

Ensuring a consistent experience for all your users is important.

A website may be hosted in a particular region, but have the majority of its users coming from an entirely different region – for example, if your site is hosted in America, GTmetrix might report fast speeds based on our default test location, but if a good chunk of your users come from Europe, their speed will not be as fast as you experience it to be.

Using a CDN is one of the easiest and fastest ways to boost your website performance.

In order to see where the biggest performance bottle necks are, you can start by having a look at a waterfall graph of your website. The example above comes from b2evolution.net (before optimization). Any modern web browser will let you display this for you own site by using its developer menu/tools. When you do this for your site, just remember to clear your browser cache before measuring, otherwise your results won’t really show what your visitors experience.

The waterfall graph shows one line for each file that is downloaded to display your page. Here are the color codes used by Safari:

  • The blue line is the main PHP/HTML file;
  • The green lines are for CSS files;
  • The yellow lines are for Javascript files;
  • Finally the purple ones are for images.

Pay attention to 3 important aspects here:

  • There are usually more files than you think that need to be downloaded to display a single web page.
  • All files don’t start downloading right away.
  • Each file has a long Latency time and a comparatively short Actual Transfer time.

How to use a CDN

You may already be using one without knowing it. For example: if you’re requesting some Javascript libraries like jQuery or Google Analytics from an external domain (not a file on your server). Those largely used scripts are already served through CDNs. Another frequent use of CDNs is the use of web fonts from an external domain. Here again you may already use the CDN of the font provider. (This is what happens for the first 2 CSS files in the graph above).

For your own files, you need to set up your own CDN.

Cost

Most CDNs are third-party paid services and can range from expensive, high-end setups for enterprise websites, to more cost-effective small/medium website oriented solutions.

The cost of a CDN also depends on bandwidth, region reach, and/or security/SSL needs. For example, if you find that most of your users come from North America and Europe, you can omit purchasing server nodes in Asia.

CDNs don’t have to be cost prohibitive, and can be accessible to website owners of various budgets.

Be the first to comment

Leave a Reply

Your email address will not be published.


*