Skip to content

Instantly share code, notes, and snippets.

@isaumya
Last active April 19, 2024 09:11
Show Gist options
  • Star 25 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save isaumya/af10e4855ac83156cc210b7148135fa2 to your computer and use it in GitHub Desktop.
Save isaumya/af10e4855ac83156cc210b7148135fa2 to your computer and use it in GitHub Desktop.
Super Page Cache for Cloudflare — Guide for using Remove Cache Buster Query Parameter feature (when using Cache Everything page rule)

Implementation Guide for using "Remove Cache Buster Query Parameter" feature

The Super Page Cache for Cloudflare plugin has recently added the feature for using the Cache Everything pagerule withing the ?swcfpc=1 cache buster query paramater. This opens up so many new doors where users previously had to use the Cloudflare Workers to remove the cache buster.

With this new option now users are able to take advantage of Cloudflare Cache Everything page rule and take it to the next level by using the new Rulesets released by Cloudflare. Basically this is achived by taking advantage of the all new Cache Rules feature implemented by Cloudflare.


Setp 1 — Setting up the Cache Rules inside your Cloudflare Dashboard

The first thing that you need to do is, log-in to your Cloudflare Dahsbord and go to the domain/zone doe which you are setting up the Super Page Cache for Cloudflare plugin. Then from the left hand side menus, go to Caching > Cache Rules.

Cache Rules Section

Then inside the Cache Rules page, click on the Create Cache Rule button. Then finally on the Create new Cache Rule page, click on the Edit Expression link.

Edit Expression Link

Now it's time to create all the Cache Rules we need... So, let's get started...

Most Important Note
You CANNOT use the cache rule mentioned below along with the Cache Everything page rule. Bedore adding this Cache Rule in your Cloudflare dashbaord, please make sure you have DISABLED the Cache Everything Page Rule automatically added by the plugin inside your Cloudflare dashboard > Rules > Page Rules section.
This one Cache Rule cacn handle everything and you do not need any other page rules.

Super Important Note Badge
Make sure you replace example.com with your actual website hostname e.g. something.com or www.something.com etc. in the code given below before copy/pasting it.

SPCFC Cache Rule ➜ Cache Eligible Requests

Rule Name: Add the following in the Rule Name section SPCFC Cache Rule ➜ Cache Eligible Requests

Rule Expression: Add the following expression inside the expression builder section.

(http.host eq "example.com" and not starts_with(http.request.uri.path, "/wp-admin") and not starts_with(http.request.uri.path, "/wp-login") and not starts_with(http.request.uri.path, "/wp-json/") and not starts_with(http.request.uri.path, "/wc-api/") and not starts_with(http.request.uri.path, "/edd-api/") and not starts_with(http.request.uri.path, "/mepr/") and not http.request.uri.path contains "/register/" and not http.request.uri.path contains "/dashboard/" and not http.request.uri.path contains "/members-area/" and not http.request.uri.path contains "/wishlist-member/" and not http.request.uri.path contains "phs_downloads-mbr" and not http.request.uri.path contains "/checkout/" and not http.request.uri.path contains ".xsl" and not http.request.uri.path contains ".xml" and not http.request.uri.path contains ".php" and not starts_with(http.request.uri.query, "s=") and not starts_with(http.request.uri.query, "p=") and not http.request.uri.query contains "nocache" and not http.request.uri.query contains "nowprocket" and not http.cookie contains "wordpress_logged_in_" and http.cookie ne "comment_" and not http.cookie contains "woocommerce_" and not http.cookie contains "wordpressuser_" and not http.cookie contains "wordpresspass_" and not http.cookie contains "wordpress_sec_" and not http.cookie contains "yith_wcwl_products" and not http.cookie contains "edd_items_in_cart" and not http.cookie contains "it_exchange_session_" and not http.cookie contains "comment_author" and not http.cookie contains "dshack_level" and not http.cookie contains "auth_" and not http.cookie contains "noaffiliate_" and not http.cookie contains "mp_session" and not http.cookie contains "xf_" and not http.cookie contains "mp_globalcart_" and not http.cookie contains "wp-resetpass-" and not http.cookie contains "upsell_customer" and not http.cookie contains "wlmapi" and not http.cookie contains "wishlist_reg")

Cache Status: Set it to Eligible for cache.

Cache Key:

In this section you can enable the following options:

  • Cache deception armor (Always Enable This Option)
  • Ignore query string (Enabling This Option Might Break Your Site — So, Test Thoroughly Before Enabling) ⚠️
  • Enable query string sort (Do Not Enable This Option if you are Using WooCommerce, Easy Digital Download or any Membership platform) ⚠️

Finally the cache rule should look something like this ☟ Cache Eligible Requests & Ignore Query Params from cacheKey Rule Screenshot

Very Important Note Badge
Once you add the Ignore query string option inside the cache rule, Cloudflare will simply ignore the unnecessary query strings (except for the one excluded inside the rule) when checking the cached contents of your website.
If you check the above cache rule, you will see that the s, p, nospcfc, nowprocket query params which are commonly used in WordPress websites for search and other functionalities have already been whitelisted so that Cloudflare system does not ignore that query parameter.
So, if you provide an URL e.g. https://example.com/some-page/?s=some+search+phrase in this case Cloudflare system will NOT ignore the s query param so that your search functionality works properly.
If you have more query params on which your website is dependent on and you do not want Cloudflare to ignore them, then you can check the above screenshot and add new query params below the whitelisted query params to whitelist them exactly the same way I have whitelisted those query params.
Alternatively if you enter https://example.com/some-page/?fbcid=123&foo=bar&something=test, Cloudflare will simply ignote the ?fbcid=123&foo=bar&something=test part and check if https://example.com/some-page/ is cached, if so, return the cached content.
This will help increasing the Cache HIT ratio of your website as most unnecesarry and marketing query params will be ignored by Cloudflare.

Once you have added this Cache Rule and disabled the Cache Everything Page Rule in your Cloudflare dashboard, you can proceed to the Step 2 below.

Step 2 — Enabling Remove Cache Buster Query Parameter option in the plugin settings & Purge the whole Cloudflare Cache

Inside the Super Page Cache for Cloudflare plugin settings, go to the Other tab and scroll down. You will see an option named Remove Cache Buster Query Parameter.

plugin settings to enable

Enable that option and save the plugin settings. Then all you need to do is to make sure that you have force purged everything from the Cloudflare Cache.

That's it. Now you have the Cloudflare CDN Level Page Caching with the Cache Everything Page Rule without any cache buster query parameter (e.g. ?swcfpc=1). Also if you have added the fourth Cache Rule then your cache HIT ratio will also increase dramatically as Cloudflare will now ignore the query strings when checking if the URL is already cached. Enjoy... 🥂🍾🥳🎉

P.S.: Make sure you have enabled Smart Tiered Cache inside your Cloudflare Dashboard for the highest cache HIT ratio.

@nisbet-hubbard
Copy link

nisbet-hubbard commented May 4, 2023

For those migrating from cache buster, might be helpful to mention here the option to turn on 301 redirect in case the query parameter already got indexed by some crawler, as a crawler can still bypass the cache by using the buster even after doing step 2.

@isaumya
Copy link
Author

isaumya commented May 4, 2023

Hi @gittehubbard,
You can definitely enable the 301 redirect in the plugin settings, but the use case you are mentioning is not a widespread thing, which is why it is not mentioned above and enabled by default. Besides anyone who is installing this plugin for the first time, they can just start with the above cache rules and don't have to worry about cache buster.

@imflexwala
Copy link

Thank you for sharing this amazing guide @isaumya
I was having issues with logged-in customers in woocommerce, it seems fixed now after applying this.

@sumon1068
Copy link

Whay do we need Rule 4?
We already have a page rule that says "Cache Everything".

Cache rule 1,2&3 says don't cache these. So the rest should be cached automatically for the "Cache Everything" page rule. So why do we need cache rule 4?

And from the plugin settings, I've already checked Don't cache the following dynamic contents: Search Pages (is_search) - (recommended). So, do we need to whitelist s query parameter again?

The fact is, my website uses a lot of query parameters. Super Socializer plugin, custom plugin: query multiple taxonomies, MailPoet plugin etc use query parameters. Identifying which query parameters to whitelist will be a very tough job. Instead, finding which qeury parameter to ignore is easy for me. As for example, I am using a Transform Rule to rewrite query parameter fbclid=.

So can I skip Rule 4?

@isaumya
Copy link
Author

isaumya commented May 5, 2023

Hi @sumon1068,
As I have mentioned above Rule 4 is definitely optional. But adding it would give you a better caching experience with a few more added benefits like cache deception armor, ignoring unnecessary query params from cacheKey etc. So, it's totally up to you if you would like to use Rule 4 or not. But using it will give you a better caching experience. Please read above, I've explained everything in great detail.

@nisbet-hubbard
Copy link

Hi @gittehubbard,
You can definitely enable the 301 redirect in the plugin settings, but the use case you are mentioning is not a widespread thing, which is why it is not mentioned above and enabled by default. Besides anyone who is installing this plugin for the first time, they can just start with the above cache rules and don't have to worry about cache buster.

Thanks! Edited to reflect the specific use case.

@godlesowned
Copy link

In rule 4 I don't have "Ignore query string order" instead i have:
"Enable query string sort"
Cloudflare will treat files with the same query strings as the same file in cache, regardless of the order of the query strings

Should I use it or no?

@isaumya
Copy link
Author

isaumya commented Jun 12, 2023

Hi @godlesowned,
Yes, Cloudflare has recently renamed that option. It means the exact same thing. When enabling this option, Cloudflare will sort the query strings alphabetically so, if you send a request to https://example.com/?z=1&d=2&b=3, Cloudflare will auto rewrite the URL to https://example.com/?b=3&d=2&z=1. You can generally enable this option unless you are using WooCommerce or Easy Digital Download as they require the query string order not to be changed.

@harryfear
Copy link

Looks like the above expression breaks swcfpc-preloader? Or is that implementation failure? 😊

@isaumya
Copy link
Author

isaumya commented Jul 17, 2023

Hi @harryfear,

  1. Can you let me know how you are using the preloader?
  2. What error you are getting?

@harryfear
Copy link

Not getting any error, but the URL prints the homepage, instead of the "Starting preloader" message as per normal configs

@isaumya
Copy link
Author

isaumya commented Jul 17, 2023

Hi @harryfear,
What happens when you click "Start Preloader"? Screenshot: https://i.imgur.com/LDvHOIX.jpeg

@advwebin
Copy link

How do I get AMP to work along with this.

I have enabled AMP in settings but the AMP URI trigger is set to /?amp

I have added the rule for /?amp/ but it still does not redirect to AMP page.

@isaumya
Copy link
Author

isaumya commented Jul 24, 2023

Hi @advwebin,

  1. Please open a support thread when you have a support question, instead of asking in GitHub.
  2. The /?amp is supposed to show the AMP version of the webpage, no redirect is needed
  3. I did not get your question. Do you want to bypass the cache for AMP pages?

@advwebin
Copy link

Hi @isaumya
After enabling cache buster, All AMP pages were redirecting to the non amp version, to fix this I added:

  1. I added the rule for request matching URI with /?amp/
  2. Cleared the cache from the Cloudflare.

But after adding this the page is still redirecting to non-AMP.

I had enabled Ignore Query Parameters, but the rule was defined in the list. Once I disabled Ignore Query Parameters, it started working fine.

Thank you

@advwebin
Copy link

Can we use the Page Rule to cache everything from the CDN?

@isaumya
Copy link
Author

isaumya commented Jul 24, 2023

Hi @advwebin,
Open a support thread here: https://wordpress.org/support/plugin/wp-cloudflare-page-cache/
this is not a support thread.

Can we use the Page Rule to cache everything from the CDN?

Read the above document thoroughly: https://i.imgur.com/6jaFl03.jpeg

@ofmarconi
Copy link

ofmarconi commented Sep 7, 2023

Need any adjustments for multisite?

For example we have /wp-admin starts at the root of the site and not the hostname...

Is taking advantage of Hostname really necessary? Aren't we already inside it?


  • When using it on a multisite I'm trying to leave it activated only on site 01 which is the hostname;
  • The other sites that are in deeper directories I leave disabled;
  • I wrote a small snippet that puts a button in the admin bar of these sites to clear the cache by the Cronjob URL;
  • I adapted the rules to not use the hostname and instead of starting with /wp-admin contain /wp-admin

I'm in the right way?

Thanks!

@isaumya
Copy link
Author

isaumya commented Sep 7, 2023

Hi @ofmarconi,
Multisite setup can be a little complicated based on your setup. Are you using sub-domain-based multisite or path-based? If you are using sub-domain-based multisite then in the hostname instead of selecting equals you can set it to is in and then put the main domain and all the subdomains there. the rest will remain the same.

@ofmarconi
Copy link

Hi @isaumya

I'm using path-based.

My question about the Hostname is that it seems redundant.
But thinking about it, is it a measure to not interfere with other subdomains?


Regarding multisite, only using it on the first site that is in the hostname is the correct method?

@isaumya
Copy link
Author

isaumya commented Sep 8, 2023

Hi @ofmarconi,
If it's path based multisite then the hostname can be just the main domain name. Also yes the hostname makes sure that the rule doesn't get executed for other subdomains.

@june415
Copy link

june415 commented Nov 23, 2023

Hi @isaumya , thanks a lot for the sharing! If we enable "ignore query string" at caching level in the configuration page, does it also work?

@isaumya
Copy link
Author

isaumya commented Nov 23, 2023

Hi @june415, yes it does work. But test your site thoroughly as when that option is on, Cloudflare will ignore the query strings and its values in your URL. It will remove the query params and then check if the URL is in the cache. This will increase your cache HIT ratio, but some plugin/systems might not work properly with this that relies on the query param value.

@june415
Copy link

june415 commented Nov 23, 2023

Hi @june415, yes it does work. But test your site thoroughly as when that option is on, Cloudflare will ignore the query strings and its values in your URL. It will remove the query params and then check if the URL is in the cache. This will increase your cache HIT ratio, but some plugin/systems might not work properly with this that relies on the query param value.

Hi @isaumya , we only want to disable ?swcfpc=1 actually as sometimes it's shown as part of page url automatically when visitor clicks some links at the forntend. So in that case, after enable "ignore query string", may I know if "Remove Cache Buster Query Parameter" need to be enabled?

@isaumya
Copy link
Author

isaumya commented Nov 23, 2023

Hi @june415, after setting up the cache rule, if you enable "Remove Cache Buster Query Parameter" option, it will remove the ?swcfpc=1 option.

@mPanasiewicz
Copy link

@isaumya For my clarification. I setup everything what you described(and added my own uris not to be cached like custom woocommerce endpoints). I have a question:

  1. From that moment if someone will add something to the Woocommerce cart all pages across platform won;t be cached??(I see CF-cache-status: DYNAMIC)
  2. Each logged in customer(Woo) also won't get cached content?? Even if there's no items in the cart??

Thank you very much!

@TheKidRock
Copy link

Hi @isaumya I followed the method above. However, there is no "Remove Cache Buster Query Parameter" option available. Or is this option not available since I have enabled "Worker mode"?
For a blog site, which is better - page caching or worker mode? I had read somewhere (can't remember exactly where) that worker mode is better than page caching that's why I enabled worker mode.

@isaumya
Copy link
Author

isaumya commented Dec 5, 2023

Hi @TheKidRock, the "Remove Cache Buster Query Parameter" option will only be shown when you have disabled the worker mode.

@GwynethLlewelyn
Copy link

Thanks for posting this; I know it's being linked from the backoffice of your fantastic plugin, but I never clicked on it, because, frankly, I didn't really quite knew what exactly to expect!

In fact, I'd say that the removing cache buster option is the least important of all the remaining information — namely, how to abandon the deprecated (but oh so useful!) Page Rules and use Cache Rules instead (as recommended by Cloudflare), and continue to have everything working smoothly!

Also, I have to commend Cloudflare on that — I had no idea that Cache Rules could get so complex and deal with so many different things at the same time. I mean — with one rule, you can do an insane amount of things at the same time, and it still only counts as just one rule. They're being very generous — and showing off their 'new' rule engine, I suppose...

@isaumya
Copy link
Author

isaumya commented Dec 19, 2023

Yes, @GwynethLlewelyn Cache Rule is super powerful, especially for advanced users.

@JJAsh1
Copy link

JJAsh1 commented Dec 20, 2023

Interesting. Thanks a lot for this.

Two questions :

  1. Is it add_items_to-cart instead of edd_items_to-cart ?

  2. Won't the "woocommerce_" cookie check only serve uncached page to all Woocommerce clients with an item in the cart ?

@isaumya
Copy link
Author

isaumya commented Dec 20, 2023

Hi @JJAsh1,
I don't know what your first question is, you can change the cookie name if you feel like it. For the second question, yes when a user has item in cart it will serve pages from the server instead of the cache which is needed as most sites show dynamic data when items are added to cart like the cart item, count of items in cart etc.

@Dawiducik
Copy link

Hello @isaumya, great work!
I have set this configuration up, went to my-account page and the plugins seems to do its job, however, how does it know that it should still cache css/js and "bypass" html when user is logged in? I mean, the browser sends cookies in request, regardless if its css, html or php call, so they all should be bypassed from cache, because they have a "wordpress_logged_in" (the one in cf cache rule) cookie right? So why is it still served and I have Cf-Cache: HIT header? Thank you!

@isaumya
Copy link
Author

isaumya commented Mar 22, 2024

Hi @Dawiducik,
Yes CSS/JS should be served from cache. Please try and check if it's working as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment