![](https://www.jonathan.vc/wp-content/uploads/2024/07/cache-rules-everything.jpg)
I recently started playing around with some of the configuration settings in Cloudflare and I realized something that I could cache the entire site for free at the edge. It’s very simple. Let’s take a look at the configuration settings there are only two caching rules that you need to configure.
This works entirely on the free plan, no costs involved. You don’t even need to put a credit card in your account.
First Rule: Bypass Cache on Cookie
Step 1: Create a rule to bypass all caching when the cookie is present
Create a rule with the following conditions:
- Field = Cookie
- Operator = contains
- Value = wordpress_logged_in
This will check if the request being made is in association with a cookie that has the name wordpress_logged_in_ in it.
WordPress’ developer documentation states that WordPress will set a cookie value of wordpress_logged_in_[hash] which can be quite useful for this purpose.
Cloudflare’s caching rules configuration allows us to trigger based on this.
![Create a rule to bypass all caching when the cookie is present](https://www.jonathan.vc/wp-content/uploads/2024/07/image-1024x518.png)
Step 2: Create a second rule…to cache when the cookie is not present.
Note that it’s critical that you have this as the second rule, because the first rule will trigger if you’re logged in. If you’re not logged, it will skip the first rule and go to the second rule — this one, that we’re about to create.
Create a rule that is the reversed of the first rule. When the cookie is not present, serve up a cached page.
![Create a second rule...to cache when the cookie is not present.](https://www.jonathan.vc/wp-content/uploads/2024/07/image-4-1024x532.png)
Next, you need to configure the level of caching you want when this rule is triggered, which will be for all logged-out users.
Below are the settings I use. Enable this rule to be eligible for caching.
![](https://www.jonathan.vc/wp-content/uploads/2024/07/image-5.png)
Next, enable caching at the Edge.
![Enable caching at the Edge](https://www.jonathan.vc/wp-content/uploads/2024/07/image-6.png)
Assuming you have content that is not changing, you can set a Browser Cache TTL as well.
![Add browsing caching to assets](https://www.jonathan.vc/wp-content/uploads/2024/07/image-7.png)
Once you have added both rules, confirm that they are in the correct order.
Step 3: Profit!
![PROFIT!](https://www.jonathan.vc/wp-content/uploads/2024/07/profit.jpg)
Leave a Reply