Using a CDN (Content Delivery Network) is one of the fastest and the easiest ways to remove performance bottlenecks for most websites. Performance bottlenecks appear primarily due to these reasons:
- Usually there are more files than you think which need to be downloaded to display a web page.
- Not all files start downloading at the same time.
- Every file has some Latency time which is generally long and a Transfer time which may be short.
Too Many Files to Download
Files don’t download simultaneously
Files may have some latency time before download
Latency issues may be caused by the time taken to send requests to a server – something along the lines of 10-200 ms. Apart from this, the server might need to process the request and generate the response before sending it back to the browser e.g. in case of a PHP request, some heavy processing may be involved before sending the response to the browser. The response would be sent back on the same path – another 10-200 ms. Not only this, the response and all data needs to be downloaded by the browser – this is the actual transfer time.
So how does a CDN help you get past all this?
A CDN instead of using a single web server for delivering all the files that make up your site, uses a network of servers to do the job.
- The request gets routed to the nearest server, hence the latency which we discussed above (10-200 ms) which occurs twice – during send request and receive response – gets reduced.
- Since files are split across different CDN zones, your browser can send multiple requests for different files and there would be no waiting for server responses before sending new requests. This causes a further reduction of latency.
- Also since edge nodes are closer to the user, the end-to-end bandwidth would get improved thus further reducing the actual transfer time.
How to use a CDN?
Firstly, if you are using some Javacript libraries such as jQuery you are already using a CDN since these scripts are generally served through CDNs. But for your own custom files – JS files, CSS, images you need to setup your own CDN.
How to setup a CDN?
The main steps for setting up a CDN are:
- Signing up for a service with a CDN provider
- Identifying the files which you would be moving to the CDN
- Moving files to the CDN
- Deciding how to name urls
- Ensuring your webpages are calling files from the CDN
Signing up for a service
There are many CDN providers out there, you just need to narrow down to one of them and subscribe for a service Identifying the files which are to be hosted on a CDN. You would be using a CDN to serve things such as CSS, JS files and images. You need to compile a list of these assets. The generally principle is that your webhost serves HTML and the rest of assets come from the CDN.
Moving files to the CDN
For most CMS systems such as WordPress, CDNs have automatic steps which can be followed to move all files to the CDN. For others you need to figure out how to move the files. However, the basic premise is the same. You need to have your files on a network from where they can be loaded to the CDN, which in-turn can replicate those files across their CDN network.
Deciding how to name urls
Once your files are up on the CDN serves they would be having different urls than they once did e.g. if your old file was at “example.com/main.css”, it might now be located at a url such as hsggte122771663782yt/main.css. You can make use of these urls but they don’t seem to look so nice. So you can instead choose a name you like (e.g. cdn.example.com) and use something called CNAME to redirect users to this name.
Ensuring your webpages are calling files from the CDN
Though this may look complicate, but it is quite easy especially if you are using a CMS system such as WordPress. For WordPress all you need to do is install a plugin like W3 Total Cache and enable the CDN in that plugin. Any blog using a caching system can be very easily configured to use a CDN.
For the purpose of testing whether your files are being downloaded from the CDN in the correct manner you can go to the dashboard and check for the usage of your files. Apart from this, you can test out your website from different locations using a service such as webpagetest.org. Though all these things might sound complicated, and it does require a bit of learning but it’s all worth the effort once you start looking at the benefits you can get out of this.