First!
Special thanks!
Thanks to the help of three great people: Old Man, Left and Right, and Heaven and Earth Extreme.
Most of this blog is plagiarized from Left and Right's blog (link here) haha~
Prerequisites#
• Your website domain needs to be resolved on Cloudflare and proxy enabled; this is a necessary condition.
• Disable various caching plugins on WordPress and clear the cache; this is recommended.
Setting Page Rules#
Cloudflare's free plan allows you to add 3 page rules for each domain, which is just enough for WordPress. If you are using other website building programs, do not copy directly; set it according to your program's link rules.
Step 1: Select your domain from the Cloudflare homepage to enter the domain feature interface.#
Step 2: Menu — Rules — Page Rules, enter the page rules settings page.#
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; it must be set to bypass; it must be set to bypass; otherwise, it will be troublesome!
Set Other Dynamic Page Rules, such as comments, searches, 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 the Order#
After creation, confirm the order!!!
After creation, confirm the order!!!
After creation, confirm the order!!!
We have set up the basic website page rules, ensuring that the homepage, categories, articles, and other pages can use the CDN.
There is a small 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, we have used 1 static page and 2 dynamic page rules.
However, besides the above pages, the website also has many static resources, such as images, JS, CSS, fonts, etc. If these are loaded from the origin server every time, it will still consume a lot of bandwidth. This is where Cache Rules come into play.
Cloudflare's free plan allows each domain to create 10 cache rules, 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 feature interface.#
Step 2: Expand the left menu, click Cache — Cache Rules, and enter the cache rules settings page.#
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 Hosting - Image Cache#
If you have a self-built image hosting, add caching for the images. Set the time to the maximum.
We have set up the cache rules for static resources. However, this will not take effect immediately; it will gradually be cached to the CDN as your website is accessed. Using the same small trick as with page rules, 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, 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 scrape 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 to ensure 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 Cloudflare's CDN cache immediately; otherwise, the website may not display correctly or various errors may occur.
Operation Path: Cache — Configuration, there is a clear cache button at the top, supporting custom path clearing and clearing all content, which can be used according to your actual situation.
How to Determine if Cache is Effective#
Press F12 to bring up the developer tools and check the cf-cache-status status; this indicates the current 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.
Common cf-cache-status statuses include the following:
-
cf-cache-status — HIT:
Your file has hit the CF cache. This means the user retrieves 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 period for 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, setting a two-hour cache, after updating the blog, others will only see the latest article after two hours. 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
- Cache Rules
