Facebook now adds fbclid query string to URLs, busting CloudFlare's cache


Hi,

So since a few days, Facebook started adding an fbclid query string to all URLs posted on its platform. The URLs look like this: https://www.website.com/perma-link/?fbclid=IwAR2FEKP2N1EZQ0QU7ioC1MHvrqnrjtETeDNCpG9dkd3cLZIu_OF-IjTD2-c

This query string is unique for each user, so it means every user coming from Facebook will NOT hit CloudFlare’s cache or your server’s cache, unless you configured your server to ignore this query string. This also means people who get a lot of trafic from Facebook (like me) will see big performance hit when it comes down to TTFB and page load speed. I have seen a TTFB increase of roughly 50% after Facebook started using this query parameter.

I wanted to start this thread so people can share ideas on what could be done to mitigate the situation and hopefully be able to serve cached pages to users coming from Facebook.

If you want a simple and free fix, you should consider using @boynet2 's redirect method using a CloudFlare Page Rule so that requests made to your site are redirected to the proper URL without fbclid paramters before reaching your server.

To remove / strip the fbclid query string paramter, create a Page Rule in your CloudFlare dashboard with the following code:

1. Under If the URL matches, enter http://www.example.com/*?fbclid=*

2. Click Add a Setting and choose Forwarding URL and 302 - Temporary Redirect

3. Under Destination URL, enter http://www.example.com/$1

Another easy fix that can be applied on CloudFlare is to use this Worker script along with the proper routes. Please note that this fix will add extra fees to your current CloudFlare plan ($5 per month for 10 million worker requests):

Worker script:

addEventListener('fetch', event => { let url = new URL(event.request.url) if (url.searchParams.has('fbclid')) url.searchParams.delete('fbclid') event.respondWith( fetch(url, event.request) )
})

Worker routes:

On: https://www.website.com/*
Off: https://www.website.com/wp-content/*

Another fix that can be applied at the web server level (NGINX) is to add this map directive to the http block of your config:

map $request_uri $request_uri_path { "~^(?P<path>[^?]*)(\?.*)?$" $path;
}

You’ll also need to modify the fastcgi_cache_key with the following line of code:

fastcgi_cache_key "$scheme$request_method$host$request_uri_path";

What this does is ignore all query strings passed to the server and simply return the cache entry without the query string. This enables the server to serve cached pages even if the fbclid paramter is present. But it also prevents all query strings from working. Please note that using this code will break anything on your site that uses query strings, so be careful if you use it.

So I’d really like to hear your take on this and also hear CloudFlare’s opinion on the matter.

Don’t hesitate to ask questions if you have any.

Thank you.