October 18, 2015 10:35 am

How to Improve Website Performance by using a CDN

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:

How to Improve Website Performance by using a CDN

  • 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

One solution can be to reduce the number of files, but this is easier said than done. To reduce the number of files you might have to change the design of your site – which you surely would not want to do. You can try to concatenate Javascript files and CSS files – this is complex and makes maintenance harder.

Files don’t download simultaneously

Your browser does not know what to download until it gets and parses the HTML markup of your file. Even after that there may be CSS or Javascript files which reference other files. This would increase the latency time. Other than that, browsers generally have a built in mechanism which prevents them from overburdening a single server (one domain) with too many request – generally after sending 5 requests browsers wait for responses before sending any more requests.

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.

Imagine all your Javascript files, CSS files and Images have been replicated on a network of servers across the globe. Now when someone visits your website, the following happens:

  • 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
  • Testing

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.

Testing

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories: