Putting your website behind a CDN

Joel Varty
Joel Varty
Sep 7, 2022
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

The old-school CDN providers on agilitycms.com

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

New school CDN providers

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 & Vercel CDN on agilitycms.com

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!

Back to All Articles
Back to All Articles
Sep 7, 2022

Putting your website behind a CDN

Joel Varty

Topic

JamstackJamstackDeveloper ToolsDeveloper Tools
SHARE POST
BlogBlog

Jamstack Architecture With GraphQL, Agility CMS & Shopify

Read More
Jamstack Architecture With GraphQL, Agility CMS & Shopify
BlogBlog

Guide to Defining Database Requirements of Jamstack Applications

Read More
Guide to Defining Database Requirements of Jamstack Applications

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

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

The old-school CDN providers on agilitycms.com

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

New school CDN providers

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 & Vercel CDN on agilitycms.com

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!

About the Author

Joel is CTO at Agility CMS, a SaaS headless content management platform that combines flexible and fast Headless architecture with familiar and easy Authoring tools for editors.

Joel has over 20 years of experience in customer relationship management, product management, and has embraced cloud technology as a ground-breaking concept over a decade ago.

When it comes to cloud computing, development, and software architecture, Joel is as good as they come. Beyond his knowledge, Joel's diligence is enviable.

Topic

JamstackJamstackDeveloper ToolsDeveloper Tools
SHARE POST
BlogBlog

Jamstack Architecture With GraphQL, Agility CMS & Shopify

Read More
Jamstack Architecture With GraphQL, Agility CMS & Shopify
BlogBlog

Guide to Defining Database Requirements of Jamstack Applications

Read More
Guide to Defining Database Requirements of Jamstack Applications

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

Take the next steps

We're ready when you are. Get started today, and choose the best learning path for you with Agility CMS.

Get startedRequest a Demo