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:
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:
- Use a traditional CDN service like CloudFare.
- 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.
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.
- On Cloudfare, add DNS records to route traffic to servers hosting the static site resources.
- Change domain registar to use Cloudfare’s nameservers.
Now we wait for an hour or so for the changes to propagate.
Results with CDN
Let’s run WebPageTest again:
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.
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:
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.
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.