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.
There are also some other players that 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 just 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, there are a few things you can do 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 world-wide. 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 what cache timeouts.
- Set up your website to output the proper cache-control HTTP headers to control the cache timeout. You could even control this using a content list that had the timeout rules set on a per-path basis. This is a great approach if you're able to do the development on your website, as it should work with ANY CDN provider.
With both of the 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 cache.
Cloudflare, Fastly, Stackpath
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. This is a topic James Vidler and I have spoken about many times, including in this upcoming webinar.
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 for instant-purge of the cache, however, so you could use their REST API to manually purge the cache either from a button in the CMS, or automatically when a new build happens and content is published.
Instant purge is excellent for your editors so that they can see their changes immediately after publishing, however, if you have a lot of 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 are quickly gaining market share and have some unique features and capabilities.
If you are looking at options for hosting your Jamstack site (built on something like Next.js, Gatsby, or Eleventy), then you really 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.
Deciding to put your website behind a CDN is a great first step. Depending on your choice of provider, you have a different set of options for best configuring each platform.
If you're looking at doing this, we'd love to hear your story and provide some guidance. If you have a CDN experience you'd like to share, we love to hear about that, too! Contact us or join our Slack channel to connect!