This blog post is about speeding up your site by caching your Episerver Optimizely CMS pages in a CDN. This solution gives you granular control on how long a specific page should be cached. It works for any CDN, but here I’m focusing on getting it to work with the Cloudflare CDN that is included with Optimizely DXP.
It’s important to understand that when the page is cached in the CDN, changes to that page may not immediately be visible to all users. If it is critical to update the content it is possible to purge the entire CDN in the DXP PaaS portal.
Unfortunately it’s not possible to purge the cache using Cloudflares API, but I’m hoping that Optimizely will add this feature to the DXP offering.
You can read more about how the DXP CDN works, and how to make the settings for static files here:
https://world.optimizely.com/documentation/developer-guides/digital-experience-platform/development-considerations/cdn-recommendations/
Two things are needed to have the actual pages (the HTML) cached in Cloudflare:
- Set the correct response headers when a page is served.
- Configure Page Rules in Cloudflare.
Set response headers
My solutions builds upon the solution I created for letting the editors control the output cache. I added the option for the editor to also set how long the page should be cached in CDN, and then I set the response headers needed to tell the CDN how long the page should be cached.
You can of course set up more rules for how long a page should be cached. Maybe cache some page types longer or shorter?
In one solution I cache the pages for the Chinese market for a much longer time. They are then cached in a CDN that we’ve set up inside the “great firewall of China”, to speed up the site for Chinese visitors.
Configure Page rules in Cloudflare
You need to ask the Optimizely DXP support to configure the Page rules in Cloudflare.
This is an example from one client:
Basically you set that everything for a specific domain should be cached, and respect the headers that is sent from the origin (your site).
But you need to exclude /episerver/ to make the edit/admin mode work properly.
Testing that it works
If you open your browser´s dev tools and look at the response headers they should be something like this:
“cf-cache-status: HIT” means that the page was served directly from the CDN.
You can see that the “chache-control” header is set to what we specified ( cache for 600 seconds), and that this page was cached 499 seconds ago (“age”).
Hopefully visitors around the world will experience a faster page load. 👍
At time of writing I was using Episerver CMS 11.20.5.0
Image source: https://www.vecteezy.com/free-vector/web