Set Cache Rules in Cloudflare for Full Site Acceleration of WordPress Blog

First!

Special thanks!

Thanks to the help of three big shots: Old Man, Left and Right, and Heaven and Earth Extreme.

Most of this blog is plagiarized from Left and Right (portal here) haha~

Prerequisites#

• Your website domain needs to be resolved on Cloudflare and proxy must be enabled; this is a necessary condition.

• Disable various caching plugins on WordPress and clear the cache; this is recommended.

Setting Page Rules#

With Cloudflare's free plan, you can add 3 page rules for each domain for free, which is just enough for WordPress. If you are using other website building programs, do not copy directly; set according to your program's link rules.

Step 1: Select your domain from the Cloudflare homepage to enter the domain functionality interface.#

Step 3: Click the Create Page Rule button, adding a total of 3 rules as follows.#

Set Admin Backend Rule#

| Rule Name | Value |

| ------------------| ---------------------------------------------------------- |

| URL | pup.0521.uk/wp-admin/*
Note: Change this URL to your own |

| Browser Integrity Check | Enabled |

| Security Level | High |

| Cache Level | Bypass |

| IP Geolocation Header | Enabled |

| Email Obfuscation | Enabled |

The key point is that the cache level must be set to bypass, the cache level must be set to bypass, the cache level must be set to bypass, otherwise it will be troublesome! |

Set Other Dynamic Page Rules such as Comments, Search, etc.#

| Rule Name | Value |

| ------------------| ---------------------------------------------------------- |

| URL | pup.0521.uk/*.php
Note: Change this URL to your own |

| Browser Integrity Check | Enabled |

| Security Level | High |

| Cache Level | Bypass |

| IP Geolocation Header | Enabled |

| Email Obfuscation | Enabled |

The key point is that the cache level must also be set to bypass, but if set incorrectly, it is not as serious as the admin backend rule.

Set Homepage, Category, Page, and Post Page Rules#

| Rule Name | Value |

| ------------------| ---------------------------------------------------------- |

| URL | pup.0521.uk/*
Note: Change this URL to your own |

| Browser Integrity Check | Enabled |

| Security Level | High |

| Cache Level | Cache Everything |

| Edge Cache TTL | 2 hours |

| IP Geolocation Header | Enabled |

| Email Obfuscation | Enabled |

Step 4: Check Order#

After creation, confirm the order!!!

We have set the basic website page rules, ensuring that the homepage, categories, articles, and other pages can go through the CDN.

There is a little trick here: after setting up, visit your website and click through all the pages to trigger the page cache to the CDN. When real visitors browse the website, it will load instantly!

Setting Cache Rules: Since the Cloudflare free plan allows a maximum of 3 page rules, after setting 1 static page and 2 dynamic page rules, we are done.

However, the website has many static resources besides the above pages, such as images, JS, CSS, fonts, etc. If these are loaded from the origin every time, it will still consume a lot of bandwidth. This is where Cache Rules come into play.

With the Cloudflare free plan, you can create 10 cache rules for each domain, which is more than enough! Now let's add static resources to the cache.

Setting Cache Rules#

Step 1: Select your domain from the Cloudflare homepage to enter the domain functionality interface.#

Step 3: Click the Create Rule button.#

Blog Homepage and Article Page Cache#

Static Resource Cache (css/js/woff/html)#

Directly click to edit the expression and paste the following content directly:

(http.request.uri contains ".css") or (http.request.uri contains ".js") or (http.request.uri contains ".woff") or (http.request.uri contains ".jpg") or (http.request.uri contains ".png") or (http.request.uri contains ".svg") or (http.request.uri contains ".gif") or (http.request.uri contains ".bmp") or (http.request.uri contains ".ico") or (http.request.uri contains ".jpeg")

Lsky Image Bed - Image Cache#

If you have a self-built image bed, add cache for the images. Set the time to the maximum.

We have set the cache rules for static resources. At this point, it will not take effect immediately, but will gradually be cached to the CDN as your website is accessed. Similar to the page rules, after setting, visit your website and click through all the pages to trigger the page cache to the CDN. When real visitors browse the website, static resources will load instantly!

Other Settings#

Crawler Hints#

When using Cloudflare, Crawler Hints provides high-quality data for search engines and other crawlers when site content changes. This allows crawlers to crawl accurately, avoiding waste, while generally reducing resource consumption on the origin server and other Internet infrastructure.

Operation path: Cache — Configuration — Crawler Hints

Always Online™#

Allows visitors to still access your website when the origin server is unavailable. Cloudflare can provide limited web page copies through the Internet Archive's Wayback Machine.

Operation path: Cache — Configuration — Always Online™

Tiered Cache Topology#

By selecting a cache topology, you can control how the origin server connects to Cloudflare data centers, ensuring higher cache hit rates, fewer connections to the origin server, and shorter Internet latency.

Operation path: Cache — Tiered Cache — Tiered Cache Topology™, select Smart Tiered Caching Topology

Clear Cache#

Finally, if you modify your website's theme, install new plugins, or change code, it is strongly recommended to clear the Cloudflare CDN cache immediately; otherwise, the website may not display correctly or may have various errors.

Operation path: Cache — Configuration, there is a clear cache operation button at the top, supporting custom path clearing and clearing all content, which can be used according to your actual situation.

How to Determine Cache Effectiveness#

Press F12 to bring up the developer tools and check the cf-cache-status status, which indicates the current web page or file's CF cache status. If it shows HIT, it means the cache is successful. The first time you open the blog page, it will show MISS; after refreshing with F5, it will change to HIT.

微信图片_20231202225323.png

Common cf-cache-status statuses include the following:

cf-cache-status — HIT:

Your file has hit the CF cache. This means the user is retrieving the file from the CF cache server rather than your origin server, not consuming your server resources.
cf-cache-status — MISS:

CF has looked for the requested file in the cache server but did not find it. CF's cache server will go back to your server to retrieve the file, and the next time the request is made, the file will show HIT.
cf-cache-status — BYPASS:

CF has been instructed not to cache the file, and the user will retrieve the file directly from the website's origin server. This is usually because the requested file responded with a NO-Cache header.
cf-cache-status — EXPIRED:

The cache duration of the file has expired since the last cache, and CF will again go back to the website's origin server to retrieve the file. The next time the request is made, the file will show HIT.
cf-cache-status — DYNAMIC:

This file is not cached by default and has no corresponding cache configuration; the user will retrieve the file from the website's origin server.

Notes#

Because cache rules are set, for example, if set to two hours, after updating the blog, others will not see the latest article until two hours later. That is, when others open your blog, they see content from two hours ago.

Therefore, when you customize themes, update, or publish blog posts, you need to disable the following three rules and clear the browser cache. Otherwise, you will experience update delays when opening the blog page. After disabling, you can modify without delay, allowing you to view the modified status in real-time.

After adjusting, you can turn them back on.

Page Rules

微信图片_20231203000053.png

Cache Rules

微信图片_20231203000132.png

herman