DevHjz's Blog
Makerspace

Configuring Cloudflare Caching by Login Status Cookies Tutorial

Cloudflare is very powerful free CDN provider. There are quite a few WordPress webmasters using Cloudflare who want their websites to be faster. But if you configure Cloudflare to cache all the content of the site (HIT) may make WordPress login and comment errors, such as the front-end does not update or cache the login information of other users. That's why most WordPress sites use CDNs to cache only static files like JavaScript, CSS and images.

Some careful webmasters may have noticed that Cloudflare supports "Caching Static HTML with WordPress/WooCommerce" function, but this is limited toCloudflare Business and Enterprise Program Customersto be able to use it, this feature is not available to free users.

Customers in all Cloudflare plans can configure caching of HTML files. However, only customers in the Business and Enterprise plans can bypass the HTML cache any time a cookie is sent with a request to.

Create Page Rules in theBypass Cache on Cookieset up

This function accomplishes the following:

  • Unlogged-in visitors (without log-in cookies) access the site by directly providing a CDN to fully cache the website pages (HIT) without having to go back to the source, increasing speed and reducing the burden on the server;
  • Users who are logged in (with login cookies) or who have sent a comment the CDN then sources back and delivers dynamic content (DYNAMIC), ensuring that the front-end is updated in real time;
  • At the same time, the two caches are isolated from each other, so that no unlogged-in visitor can see the foreground information of a logged-in user.

As most of the websites (including but not limited to WordPress) are through the setting of Cookies to achieve the user login or comments and other functions, we can let Cloudflare through the determination of Cookies to achieve automatic judgment of the user login and comments, so as to distinguish between whether or not to return to the source. This will not only improve the visitor's experience, but also reduce the burden on the server, and even reduce carbon emissions, why not?

Below, I will use WordPress as an example of how toFreeImplement this feature.

Configure the process:

Note: For easy configuration, all rules are provided with expressions, you can paste the expression into the expression input box and then switch back to the generator for visual editing. Please make sure to replace "Your Domain" with your own domain name.

1. Observing Cookies Characteristics

By reading the official documentation given by Cloudflare, we can find the following pattern:

WordPress (native)wp-. *|wordpress.*|comment_. *
WordPress with WooCommerce    wp-. *|wordpress.*|comment_. *|woocommerce_. *|comment_. *|woocommerce_.
WordPress Cookies Characteristics Table

2. Open the configuration page

show (a ticket)Cloudflare Configuration PageClick on the domain name you want to configure - Cache - Cache Rules in order.

Configure the page path

3. Create the first cache rule

Create a caching rule as shown below, select "Bypass Cache" and place this rule at the top of the process.

The purpose of this rule is to prevent Cloudflare from caching the admin backend, the frontend user center, the search interface and the preview interface so that it doesn't cache other people's information.

(http.request.full_uri eq "https://您的域名/wp-admin/*") or (http.request.full_uri eq "https://您的域名/*preview=true*") or (http.request.full_uri eq "https://您的域名/前台用户中心/*") or (http.request.full_uri eq "https://您的域名/?s=*")
First rule.

4. Create a second cache rule

Create a caching rule as shown below, select "Bypass Cache" and place this rule second in the process.

The purpose of this rule is to enable logged in users (with login cookies) or users who have sent a comment to CDN request back to the source and provide dynamic content (DYNAMIC), ensuring that the front-end is updated in real time.

(starts_with(http.request.full_uri, "https://您的域名/") and http.cookie contains "wordpress_sec_") or (starts_with(http.request.full_uri, " https://您的域名/") and http.cookie contains "wordpress_logged_in") or (starts_with(http.request.full_uri, "https://您的域名/") and http.cookie contains "comment_")
The second rule

5. Create a third cache rule

Create a caching rule as shown below and place this rule at the bottom of this flow.

The purpose of this rule is to realize that unlogged-in visitors (without login cookies) accessing the site are directly provided with a CDN fully caching the site pages (HIT) without the need to go back to the source.

(starts_with(http.request.full_uri, "https://你的域名/") and not http.cookie contains "wordpress_sec_" and not http.cookie contains "wordpress_ logged_in" and not http.cookie contains "comment_")
The third rule

Select "Cache eligible" here, and the following settings can be used.Configure as you see fit, it is recommended to turn on the following option: Cache Spoofing Armor in order to cache static resources.

Site Configuration

6. Check the order of caching rules

Please make sure that the 3 rules are sorted in the above order, you can drag or click on the arrows to re-sort the rules.

Sorting Demonstration

7. Validation of the entry into force of the rules

You can open the developer tools by pressing F12 in the InPrivate tab of your browser and check the "cf-cache-status" of the corresponding URL in the Network column. Under normal circumstances, you will see the following, which indicates that the configuration was successful:

  • Not logged in: cf-cache-status:HIT
  • After login: cf-cache-status:DYNAMIC

If there is a problem, check if there are any items in the "Page Rules" etc. that conflict with it.

Once this configuration is complete, you can check and refine other configurations on your own, which will not be repeated here.

Demonstration

This configuration can have a significant acceleration effect on unlogged-in visitors, while reducing the burden on the server.

Optimized speed test effect of this site

I hope this tutorial can help webmasters in need; I also hope Cloudflare can continue to provide excellent acceleration services and develop more advanced features!

References:

  • https://developers.cloudflare.com/cache/how-to/cache-rules/
  • https://developers.cloudflare.com/support/other-languages/%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87/%E4%BD%BF%E7%94%A8-wordpresswoocommerce-%E7%BC%93%E5%AD%98%E9%9D%99%E6%80%81-html/

Note: This article is the result of repeated research and practice, please respect the intellectual property rights of webmasters, reproduced with the source, thank you for your cooperation!

Like(4) Reward
Copyright:Creative Commons Attribution License
Unless otherwise indicated, all works on this website are published in the following format Attribution-NonCommercial-ShareAlike 4.0 International Perform licensing.

Article Title.Configuring Cloudflare Caching by Login Status Cookies TutorialThe
Article Link:https://www.devhjz.com/en-us/archives/16/
This site resources for personal study and exchange only. It is not easy to build the site, please do not directly copy the original. Do not allow for commercial use, or legal issues bear their own.

Commentaries sofa-buying

Reward the author of the article if you find it useful.

Thank you very much for your reward, we will continue to give you more quality content, let's create a better online world together!

Alipay Sweep

Log in

Forget Password?

Registration