Full Disclosure: Since my last post, I have transitioned from being a Cloudflare MVP to a full-fledged Cloudflare employee. To be honest, I have less free time than I did before, but this year’s Birthday Week brought a new way for everyone to easily cache it all for free.
The Old Way
Two years ago, I wrote about using a Worker as a more affordable way to bypass cache on cookies, when compared to upgrading to a Business (or Enterprise) plan. It involved “busting the cache” by adding a query string if the Worker detected a cookie that signaled if the cache is to be bypassed. The free plan for Workers does have some limitations, so I use the Paid Plan.
The New Way
Cache All Pages For Free
In a recent development, Cloudflare released a new feature called Cache Rules. Similar to Page Rules, you can set cache features according to a specific request.
Based on their instructions for Bypass Cache on Cookie, you can create a Cache Rule that checks for cookies. I also check to make sure it’s not wp-login, or wp-admin, which needs cookies to work. Here is my Matching rule for what to *not* cache:
(http.host eq "DOMAIN" and not http.cookie contains "wp-" and not http.cookie contains "wordpress" and not http.cookie contains "comment_" and not http.request.uri.path contains "wp-login" and not http.request.uri.path contains "wp-admin")If you’re using WooCommerce, you also need and not http.cookie contains "woocommerce_"
This technique can apply to any site that needs a bypass cache on cookie feature, such as Magento. If you can not find a tutorial that outlines which cookies your application needs, you can start by browsing your site logged out, then logged in, to see which cookies it uses. This guide shows how to view those cookies.
Once you have determined the checks for bypassing cache, use the Edge TTL and Browser TTL settings to set how long Cloudflare and a user’s browser will cache your pages. I chose 1 Month for Cloudflare Edge cache, because I can always purge that on my own. My Cloudflare plugin will purge cache whenever I update the site. I chose a 1 or 2 hour browser TTL so their current browser session will cache pages, but any updates will show up in an hour.
Cache Everything Else, Also For Free
A forewarning here: Cache Rules works in the opposite direction as Page Rule. With Page Rules, the first match executes, then stops checking for matches. With Cache Rules, all rules are applied when matches, so the last match wins.
Because pages can change, I use conservative settings for TTL. For everything else, they should rarely, if ever, change. In this case, I have a second rule for static files:
(http.host eq "DOMAIN") and (http.request.uri.path contains ".gif" or http.request.uri.path contains ".avif" or http.request.uri.path contains ".svg" or http.request.uri.path contains ".webp" or http.request.uri.path contains ".js" or http.request.uri.path contains ".woff" or http.request.uri.path contains ".css" or http.request.uri.path contains ".png" or http.request.uri.path contains ".jp")This rule will apply to all images, JavaScript, and CSS files. Similar to above, I have set both Edge TTL and Cache TTL to one year. Again, because they are static, they should not change. I mentioned Query Strings earlier; this rule can use one more option of “Ignore Query String.” That will stop the cache busting I mentioned earlier. You may want to split this into two rules: One for the images, and one for JS/CSS (Theme & Plugin files) that may need a shorter TTL.
With both of these rules, you can now cache everything for the low price of “free”.