{"id":735,"date":"2023-06-09T17:00:00","date_gmt":"2023-06-09T09:00:00","guid":{"rendered":"https:\/\/www.devhjz.com\/?p=735"},"modified":"2023-06-09T20:26:18","modified_gmt":"2023-06-09T12:26:18","slug":"16","status":"publish","type":"post","link":"https:\/\/www.devhjz.com\/en-us\/archives\/16\/","title":{"rendered":"Configuring Cloudflare Caching by Login Status Cookies Tutorial"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some careful webmasters may have noticed that Cloudflare supports \"<a rel=\"nofollow\" href=\"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\/\">Caching Static HTML with WordPress\/WooCommerce<\/a>\" function, but this is limited to<strong>Cloudflare Business and Enterprise Program Customers<\/strong>to be able to use it, this feature is not available to free users.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>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<\/em>.<\/p>\n<cite>Create Page Rules in the<em>Bypass Cache on Cookie<\/em>set up<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">This function accomplishes the following:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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;<\/li>\n\n\n\n<li>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;<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below, I will use WordPress as an example of how to<strong>Free<\/strong>Implement this feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure the process:<\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Observing Cookies Characteristics<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By reading the official documentation given by Cloudflare, we can find the following pattern:<\/p>\n\n\n\n<figure class=\"wp-block-table aligncenter is-style-stripes\"><table><tbody><tr><td>WordPress (native)<\/td><td>wp-. *|wordpress.*|comment_. *<\/td><\/tr><tr><td>WordPress with WooCommerce &nbsp; &nbsp;<\/td><td>wp-. *|wordpress.*|comment_. *|woocommerce_. *|comment_. *|woocommerce_.<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">WordPress Cookies Characteristics Table<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Open the configuration page<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">show (a ticket)<a rel=\"nofollow\" href=\"https:\/\/dash.cloudflare.com\/\">Cloudflare Configuration Page<\/a>Click on the domain name you want to configure - Cache - Cache Rules in order.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/1.png\" alt=\"\" width=\"259\" height=\"536\"\/><figcaption class=\"wp-element-caption\">Configure the page path<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">3. Create the first cache rule<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Create a caching rule as shown below, select \"Bypass Cache\" and place this rule at the top of the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(http.request.full_uri eq \"https:\/\/\u60a8\u7684\u57df\u540d\/wp-admin\/*\") or (http.request.full_uri eq \"https:\/\/\u60a8\u7684\u57df\u540d\/*preview=true*\") or (http.request.full_uri eq \"https:\/\/\u60a8\u7684\u57df\u540d\/\u524d\u53f0\u7528\u6237\u4e2d\u5fc3\/*\") or (http.request.full_uri eq \"https:\/\/\u60a8\u7684\u57df\u540d\/?s=*\")<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/2.png\" alt=\"\" width=\"697\" height=\"522\"\/><figcaption class=\"wp-element-caption\">First rule.<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">4. Create a second cache rule<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Create a caching rule as shown below, select \"Bypass Cache\" and place this rule second in the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(starts_with(http.request.full_uri, \"https:\/\/\u60a8\u7684\u57df\u540d\/\") and http.cookie contains \"wordpress_sec_\") or (starts_with(http.request.full_uri, \" https:\/\/\u60a8\u7684\u57df\u540d\/\") and http.cookie contains \"wordpress_logged_in\") or (starts_with(http.request.full_uri, \"https:\/\/\u60a8\u7684\u57df\u540d\/\") and http.cookie contains \"comment_\")<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/3.png\" alt=\"\" width=\"685\" height=\"639\"\/><figcaption class=\"wp-element-caption\">The second rule<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">5. Create a third cache rule<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Create a caching rule as shown below and place this rule at the bottom of this flow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(starts_with(http.request.full_uri, \"https:\/\/\u4f60\u7684\u57df\u540d\/\") and not http.cookie contains \"wordpress_sec_\" and not http.cookie contains \"wordpress_ logged_in\" and not http.cookie contains \"comment_\")<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/4.png\" alt=\"\" width=\"702\" height=\"488\"\/><figcaption class=\"wp-element-caption\">The third rule<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Select \"Cache eligible\" here, and the following settings can be used.<strong>Configure as you see fit<\/strong>, it is recommended to turn on the following option: Cache Spoofing Armor in order to cache static resources.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/5.png\" alt=\"\" width=\"695\" height=\"500\"\/><figcaption class=\"wp-element-caption\">Site Configuration<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">6. Check the order of caching rules<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/6.png\" alt=\"\" width=\"696\" height=\"198\"\/><figcaption class=\"wp-element-caption\">Sorting Demonstration<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">7. Validation of the entry into force of the rules<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Not logged in: cf-cache-status:HIT<\/li>\n\n\n\n<li>After login: cf-cache-status:DYNAMIC<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>If there is a problem, check if there are any items in the \"Page Rules\" etc. that conflict with it.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once this configuration is complete, you can check and refine other configurations on your own, which will not be repeated here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This configuration can have a significant acceleration effect on unlogged-in visitors, while reducing the burden on the server.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.devhjz.com\/Web\/Blog\/img\/Posts\/16\/7.png\" alt=\"\" width=\"698\" height=\"416\"\/><figcaption class=\"wp-element-caption\">Optimized speed test effect of this site<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">References:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>https:\/\/developers.cloudflare.com\/cache\/how-to\/cache-rules\/<\/li>\n\n\n\n<li>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\/<\/li>\n<\/ul>\n\n\n\n<p class=\"has-vivid-red-color has-text-color wp-block-paragraph\"><strong>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!<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>We can let Cloudflare automatically determine user login and comment status by determining cookies to distinguish whether to go back to the source or not. In this way to improve the visitor experience and reduce the burden on the server.<br \/>\nThis article will teach you how to configure this feature for free.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[13,14],"topic":[],"class_list":["post-735","post","type-post","status-publish","format-standard","hentry","category-some-tech","tag-cdn","tag-cloudflare"],"_links":{"self":[{"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/posts\/735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/comments?post=735"}],"version-history":[{"count":0,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/posts\/735\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/media?parent=735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/categories?post=735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/tags?post=735"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.devhjz.com\/en-us\/wp-json\/wp\/v2\/topic?post=735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}