Putting your website behind a CDN

One of the easiest ways to ensure better performance on your website is to put it behind a CDN, which stands for Content Delivery Network.

There are several providers out there, with industry leaders such as Akamai, Cloudflare and AWS Cloudfront that you might recognize.

Some other players are becoming more popular, such as Stackpath and Fastly. Each platform provides essentially the same set of benefits, but each does so with a different approach.

For your own needs, you're probably looking to achieve the following:

• Better performance and page loading speed, leading to better lighthouse scores.
• Improved performance with a WAF (web application firewall)
• Improved reliability with the ability to keep the website up even if your underlying web server is down.

The good news is that each CDN platform has some flavour of these features, and it's up to you to pick which combination of pricing and feature mix suits your needs.

How to Setup Your Site Behind a CDN

Once you've decided on a CDN platform, you can do a few things to get started.

Akamai, AWS Cloudfront, Microsoft CDN

These are what I call the "old school" CDN providers. They have massive networks of small "nodes" spread out worldwide.

They will probably give you the best performance in terms of raw network speed, but they do not allow you to purge your cache instantly.

If you're using these providers, especially Akamai, I recommend one of 2 approaches:

• Pre-configure your cache rules in the CDN configuration on a per-path basis. This allows you to set up which paths on your site will have cache timeouts.
• Set up your website to output the proper cache-control HTTP headers to control the cache timeout. Using a content list with the timeout rules set per path, you could maintain this. This is an excellent approach if you can do the development on your website, as it should work with ANY CDN provider.

With both approaches above, we won't even TRY to purge the cache for the website; we'll just set some appropriate time limits for how long something will stay in the cache.

Cloudflare, Fastly, Stackpath

I consider these the "new-school" players in the CDN market. They don't have as many edge nodes in their network, but the nodes that they do have are more powerful in terms of their computing capabilities.

They each allow you to do some level of scripting to control how each request is handled. Cloudflare calls these "Service Workers"; Stackpath calls them "Edge Scripts."

Those providers allow you to write JavaScript that runs a the edge. Fastly is built on a tech called Varnish, whose language is VCL.

One of the things you can do here is to create a "multi-origin" site, allowing you to do things like rebuilding your site page-by-page on a new framework without rebuilding the entire thing.

With these providers, you can also include scripted and pre-defined rules that alter the cache timeouts on a per-path basis.

They also allow instant purging of the cache, so you could use their  REST API to manually purge the cache from a CMS button or automatically when a new build happens and content is published.

Instant purge is excellent for your editors so they can see their changes immediately after publishing; however, if you have much traffic on your site, performing an instant purge could take down your origin server, so keep that in mind.

The New New-school: Netlify & Vercel

Netlify and Vercel are relatively new to the CDN field, but they quickly gain market share and have unique features and capabilities.

If you are looking at options for hosting your  Jamstack site (built on something like Next.js, Gatsby, or Eleventy), you should look at Netlify or Vercel seriously.

They provide a combination of CDN, Serverless Functions, DNS, and Build Server functionality to make your DevOps incredibly simple.

Even if you host your site on a standard web server, you can still use Netlify's rewrite and proxy rules engine to route it through their CDN. Vercel has a similar feature via its config files.

Conclusion

Deciding to put your website behind a CDN is a significant first step. Depending on your choice of provider, you have a different set of options for best configuring each platform.

We'd love to hear your story and provide some guidance if you're looking at doing this. If you have a CDN experience you'd like to share, we would love to hear about that! Contact us or join our Slack channel to connect!