Adding a CDN and HTTPS

I was on this site the other day, and was curious to see how fast the site loaded on a regular 3G network. I first did some research on perf tools, but decided it was easier to get the metrics I wanted through WebPageTest.

I ran a “Simple Test” simulating a mobile device on “Regular 3G” network:

Without CDN

While 1.6s isn’t exactly bad, a faster load time leads to a much better user experience. Can we do better?

Reducing latency through CDN

Let’s start looking at improving latency. Consider the fact that latency decreases when packets make less hops to our origin server. If only we could leverage a network of servers that are geographically located near our end users to cache our content…

…which is exactly what a CDN does.

Two approaches immediately come to mind:

  1. Use a traditional CDN service like CloudFare.
  2. Ride the IPFS hypetrain and look into peer-to-peer content distribution. Some early work is being done to support the protocol in browsers!

As much fun as exploring option (2) sounds, let’s pass on the rabbit hole this time in the spirit of getting things done.

Providers

There are many resources and articles out there comparing the major players in the CDN space. I settled on Cloudfare because they offer a free tier for personal websites. Moreover, Cloudfare offers SSL/TLS Encryption for free, which is useful since I’ve been meaning to support a HTTPS version of this site.

Steps

  1. On Cloudfare, add DNS records to route traffic to servers hosting the static site resources.
  2. Change domain registar to use Cloudfare’s nameservers.

Now we wait for an hour or so for the changes to propagate.

Results with CDN

HTTP

Let’s run WebPageTest again:

With CDN

Well that’s a bit disappointing. Looks like metrics got a bit worse, but its not too far off from the first run, so it could just be variance.

HTTPS

Let’s try again with the HTTPS version of the site. After updating the asset url links (js, css) to use https://..., here are the results from hitting https://ericren.me:

With CDN, HTTPS

Load Time is higher, which is most likely overhead of the HTTPS protocol.

However, visitors to the site will get more peace of mind knowing that they’re visiting a secure site. In the end, I decided the benefit of HTTPS outweights the marginal increase in load time, so I’ll keep my setup as is.

Interestingly, I started out wanting to improve performance, but ended up trading performance for security.

Summary

Adding a CDN is usually a default task that high-trafficked websites use to reduce load times of web resources. There are many CDN providers, all providing different benefits and drawbacks, so do your research.

And as always when it comes to improving performance, measure first before optimizing.