if your website is serving html pages from CDN servers powered by Cloudflare then it’s not going to play nicely with WP Super Cache
As a big fan of both Cloudflare and WP Supercache, both of which I have in all my sites, I cannot disagree more with this statement. There’s absolutely nothing in Cloudflare that would negatively interfere in the workings of WP Supercache.
Cloudflare is a proxy service, and as such it sits between visitors and the website origin server. When a request arrives at Cloudflare, it fetches whatever it has in cache and delivers it, be it static files such as JS, CSS and images, or HTML pages in case the website owner has enabled “cache everything” with a page rule. This makes the delivery faster than if Cloudflare were to wait for the origin to respond with the resources. When a resource is not found in Cloudflare’s cache, it is then requested to the origin server, at which point WP Supercache should make things much faster for the resources it caches.
The big issue most users face is how to config caching for logged in users as opposed to logged out users. That’s an issue that is easily handled by WP Supercache, but not so easily by Cloudflare. So if a user wants to cache the HTML pages at Cloudflare, he or she needs o set up thing in a way that only static pages are cached, and leaving the dynamic content (any page that changes because the user is or not logged in) uncached.
There have been recent improvements in the way Cloudflare can manipulate caching, including the running of service workers at the edge that can evaluate whether or not a user is logged in and pull resources accordingly (Cloudflare Workers has a trial free tier, but it’s essentially a paid service).
As for the OP original question, it’s really hard to suggest caching settings without knowing in detail the website. But here’s some of what I’ve done with my settings in WP Supercache and Cloudflare when setting up a small static-content website.
My home page needs to recycle every hour. All other pages are pretty much static, and need only to be renewed when I make changes to them.
So I set in WP Supercache:
Disabled cache for logged in viitors (I’m the only visitor who logs in, and I can always visit under incognito mode to see what other visitors will see)
Enable dynamic caching (As I said, it’s a site, not a blog, so I have no comments to worry about)
Cache timeout: 31536000 seconds (that’s one year. Of course I refresh the cache every time I make changes to a page or to all pages)
In the box to exclude content to be cached, I added my newsletter plugin path, as well as regex for “sitemap” (though I’m not sure WP Supercache would ever cache them), as I’m adding new words daily and want Googlebot to pick up new words.
No need to worry about the CDN tab, as Cloudflare uses your own domain to serve cached assets. Just leave as it is.
For the home page to recycle every hour, I created a cronjob that will delete the home page cache Supercache creates every hour.
On Cloudflare:
Caching app settings:
Cache Level: Standard
Browser Cache TTL: 4 hours
Page Rules:
wp-*
Rocket Loader: OFF (can interfere with some page builders)
Security Level: High
Disable Apps
/ (home page)
Browser Cache TTL: 30 minutes
Cache Level: Cache Everything
Edge Cache TTL: an hour
/* (all other pages)
Browser Cache TTL: 12 hours
Cache Level: Cache Everything
Edge Cache TTL: a month
Settings above assume a Cloudflare free plan.
With this combination of settings, when visitors come to my website, if this is a first visit, Cloudflare will fetch from the origin, where Supercache will have already preloaded the cache. If it’s a second visit using the same Cloudflare location, it will serve a page from its cache, speeding up the page. Also, if the visitor arrives to the home page, they will get a fresh page every hour thanks to the cronjob that delete Supercache’s cache for the home page, and to the home page’s page rule settings limiting the Edge Cache TTL (Cloudflare’s cache) to 1 hour.
But as I said, every website is different, and we need to set both Supercache and Cloudflare accordingly.
