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;
- 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
For your own files, you need to set up your own CDN.
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.