Cloudflare is a cloud-based solution to protect your website against attacks. One way to mitigate (DDoS) attacks is providing a geographically distributed network of POPs with a lot of bandwidth. And that’s exactly what they did: Cloudflare maintains a content delivery network with 30 data centers around the world. Even if you have no reason to suspect being attacked any time soon, the speed improvement is well worth it.
Setting up their service is pretty straightforward. Move your domain to their nameservers and select the subdomains that have to be protected. Important to note: Using the CDN routes all traffic to your website through the Cloudflare network. This means that you’re basically allowing them to do a man-in-the-middle attack on your visitors. This article is aimed at static websites, so it doesn’t really matter, but it’s something to keep in mind.
First things first. In the Cloudflare site settings page, we see three cache levels:
Agressive: The complete URL is used to identify a resource.
Simplified: The query string is ignored when identifying a resource.
Basic: Only caches resources without query string.
The cache level setting only applies to those resources that Cloudflare decided to cache. I usually set this to Agressive for static websites, as it allows me to change a hash in the query string to invalidate the cache when updating a page.
A second interesting setting is the minimum expire TTL, this allows you to overwrite the expire time in the
When setting up a static website, I expect these headers to be set correctly on the origin server, but this may come in handy when you have little control.
The setting we’re looking for is hidden deeper in the Cloudflare admin panel. In order to make their CDN cache everything, you need to create a page rule. Page rules define custom settings for a given subset of your website. Click the gear icon next to your website and select Page Rules. Between the rule settings an item named Custom caching appears. Set this to Cache everything to, well, cache everything. This only applies to the URL pattern specified for the page rule.
Two other interesting settings:
Edge cache expire TTL: Specifies how long a resource has to be cached on the Cloudflare edge servers. The longer they are allowed to cache it, the more bandwidth you’ll save. Decide how big this value may be depending on how much you update your static website. You may always clear their edge cache using the administration panel. (This setting is only available when Cache everything is selected.)
Browser cache expire TTL: This setting overwrites the minimum expire TTL from the global site settings, for this specific URL pattern.
Try it out! Depending on the number of visitors, caching everything may save quite a lot of bandwidth! If you have only a few visitors per month, you may not even see it, especially when they are geographically distributed. It looks like Cloudflare does not share resources between edge servers. If a resource is not available in the POP closest to your visitor, it contacts the your server.