Cloudflare optimizations for XenForo

digitalpoint

Well-known member
I've had a few people that use my Cloudflare add-on ask me what Cloudflare options/settings are best for XenForo. So rather than repeating myself privately, I'm going to turn this post into a bit of a configuration help document for those that want to read it.

Cloudflare is pretty great out of the box, but here's some things you can do if you feel it's beneficial to your site...


Protect yourself

First things first, this goes for any important account you own, but it's worth repeating... Protect your Cloudflare account with two-factor authentication, ideally with a security key (also known as Passkey these days). If someone breaches your Cloudflare account, the amount of damage they can do is substantial (all your websites can go down, domains can be stolen in some cases, etc.)

1670345718153.png


Domain registrar

Cloudflare is a fully accredited registrar that can handle most domain extensions in one place. As a bonus, you aren't slammed with ads with them trying to upsell you with things like whois privacy (it's included for free) or hosting. They do registrar services for zero profit, so unless a registrar is offering domains at a loss, they will be the least expensive option.

The Cloudflare Registrar Promise said:
From the price side it’s even simpler: we promise to never charge you anything more than the wholesale price each TLD charges. That’s true the first year, and it’s true every subsequent year. If you register your domain with Cloudflare Registrar you’ll always pay the wholesale price with no markup.

As an example, prices today for a couple domain extensions I personally use:

ExtensionCloudflare costGoDaddy cost (doesn't include "protection" to keep domain from being stolen... that's $9.99 extra. wut?)
.com$9.15$19.99
.io$33.00$62.99

...you get the idea. Basically you can cut your domain registration costs in half (and get more).


Settings for a website/zone

Minimum TLS version
: It's worth considering setting this to TLS 1.2. TLS 1.0 and 1.1 have weaknesses/vulnerabilities and were deprecated finally in 2020. Modern browsers have supported TLS 1.2 since 2013, so cutting support for TLS 1.0 and 1.1 is only affecting very edge users that are using browsers that are so old they can't get to any major website with it (websites like Google, Microsoft, Apple, Facebook, PayPal, etc. don't support TLS 1.0/1.1, so why should you?).



TLS 1.3: Turn this ON. Not sure why you would not want to support the latest version of TLS.

Firewall Rules: Use this to do things. Here are some ideas:
  • Block all access to internal directories (internal_data and src specifically).
  • Force a challenge to bots that don't adhere to robots.txt based on their user agent.
Privacy Pass Support: Turn this ON. Allows real users to automatically bypass challenges and captchas.

Auto Minify: JavaScript and CSS seem to be always be safe to allow with XenForo. HTML is like 99% okay in my experience (the only issue I've had with it was related to my own custom things I built on top of XenForo), but your mileage may vary.

Brotli: Turn this ON.

Early Hints: Turn this OFF. This can actually have a counter-productive effect where you are forcing users to load static resources like images and JavaScript (which XenForo has a lot of) on every page view even if they have it cached already in their browser.

Rocker Loader: Turn this OFF. Seriously, it's such a bad idea with XenForo.

AMP Real URL: Turn this ON. Not for the actual AMP URL, but it will add DNS CAA records for you automatically if you care about things like SSL Lab's SSL Report scores.

Cache Level: Make sure this is set to Standard. Anything else can cause problems for you with how XenForo's cache-breaking mechanism works when something is updated.

Zero Trust: Use this to put an extra-level of protection on certain areas that only a limited number of user should have access to (admin.php area and install directory).

Page Rules:
  • For a URL match of *YourXenForoInstallation.com/css.php?css=*, give it a long Browser Cache TTL, set Cache Level to "Cache Everything", give it a long Edge Cache TTL and enable Origin Cache Control. This will allow XenForo's CSS to be cached in user's browser and the network edge.
  • You can do something similar for XenForo's proxied images, but if you do it, you lose the counter XenForo keeps for how many times proxied images are viewed by users. So if you care about that, don't do it.
Transform Rules:
  • For sites that I allow users to use API keys, I do a HTTP Request Header Modification to turn Api-Key into XF-Api-Key. Nit-picky, but my users don't care that we use XenForo and it saves a few support issues where people ask what "XF-" means when they submit their API key in the request. You can automatically transform this with Cloudflare without needing to make any changes to XenForo.
  • I do HTTP Response Header Modification to remove expect-ct, nel and report-to HTTP headers. I don't use them, so adding having 3 extra HTTP headers on each and every HTTP request just seems like a waste of network traffic to me.
HTTP/2 to Origin: Turn this ON. If your web server supports HTTP/2, why not allow it to be used (it will only be used if it supports it)? You get benefits like compressed HTTP headers (which are not compressed with HTTP/1.1). Less bytes only makes things faster for end-users.

HTTP/3 (with QUIC): Turn this ON. Allow end-users to benefit from the latest HTTP protocol improvements.

0-RTT Connection Resumption: Turn this ON.

IPv6 Compatibility: Turn this ON. This allows users to connect to your site and benefit from IPv6 even if your web server doesn't support IPv6 directly.


Other tricks you can do with Cloudflare
  • Use Workers for your image proxy and URL proxy (doing this will give you a high-performance/free way to hide your server's IP address when it makes a request for images or URLs).
  • Use R2 as a (much cheaper) drop-in replacement for AWS S3 for things like hosting attachments/images in the cloud.
 
Last edited:

Wildcat Media

Well-known member
A great guide--I've bookmarked it! 👍

Do these apply to the free tier of Cloudflare, or only the paid? I don't visit them frequently enough to keep track of which features they've added over the past few months (and I know they are regularly adding things).

And I can't stress two-factor authentication enough...just do it. On everything.
 

sbj

Well-known member
Didn't have the time to check this out yet but it looks awesome and for people like me who doesn't know these things, it is much appreciated.

Just one thing. In case this gets lost over time, I would like to see it in the RM as tips/guide so it can't get lost and new people also can discover it. Sadly threads get buried after a while behind other new threads, this RM way gives it more visibility (and search potential).

1670609145353.png


Plus you can update it when there are new settings or changes so people can get notified when they sub to it.
 

digitalpoint

Well-known member
I don't really know much about the RM other than using it here as a user (I don't have any licenses for it). So not really sure if there is a way to move a thread into the RM or not. If there is, I assume it has to be a moderator to do it.
 

Wildcat Media

Well-known member
You could probably just copy/paste your first post in this thread into a new resource. I've only posted one in the past year (for a color design guide) and it was pretty much the same as composing a thread with just a few extra boxes to tick.
 

sbj

Well-known member
Is there a way to turn this thread into a RM instance while keeping this thread attached to it @Brogan ? Thanks.
 

bzcomputers

Well-known member
Has anyone done any A/B testing for site performance with and without Cloudflare, specific to a XenForo site?

Interested in possible changes to page performance like FCP, TTI, LCP, etc.
 

digitalpoint

Well-known member
Has anyone done any A/B testing for site performance with and without Cloudflare, specific to a XenForo site?

Interested in possible changes to page performance like FCP, TTI, LCP, etc.
There's not going to be a realistic way to do it definitively... While testing it just against XenForo, that's only one of a ton of variables that you'd need to take into account.
  • Geographical location of server
  • Geographical location of user
  • Network connectivity for all routes between server and user
  • Hosting company/plan
Similar to general web hosting or servers, there's never going to be one fastest server or hosting company for everyone (simply because the physical distance to that server varies for each user).

That being said, one thing that is pretty much always going to be faster is how static content is moved to the network edge. So JavaScript, images, CSS, etc. can automatically/transparently be housed in Cloudflare's data centers around the world (275 cities in more than 100 different countries). So users needing to fetch those static content requests only need to go as far as the closest Cloudflare data center to get them rather than everyone in the world backhauling those requests to your physical server.


 

Pawn Studios

Active member
even if they have it cached already in their browser
That's the problem HTTP2/Push had which Early Hints has solved. Though, early hints is still experimental and not supported across all browsers.
Has anyone done any A/B testing for site performance with and without Cloudflare, specific to a XenForo site?
Having a CDN vs no CDN will definitely uplift performance of fetching assets, but most of the time is spent by XF rendering the page result.
Not sure why digitalpoint experienced diminished performance with early hints, it should in theory speed up the page load. Time to first byte on forum.digitalpoint.com is 400ms so even if the browser is fetching things it doesn't need, if some of them are useful it should surely help?
 

digitalpoint

Well-known member
That's the problem HTTP2/Push had which Early Hints has solved. Though, early hints is still experimental and not supported across all browsers.
Maybe it's gotten better... to be fair, I last tested it with some early browser implementation and it was doing the same thing Push did (forcing browsers to download content they already had cached). I should probably go back and do some benchmarking again and see how it goes.
 

digitalpoint

Well-known member
That's the problem HTTP2/Push had which Early Hints has solved. Though, early hints is still experimental and not supported across all browsers.

Having a CDN vs no CDN will definitely uplift performance of fetching assets, but most of the time is spent by XF rendering the page result.
Not sure why digitalpoint experienced diminished performance with early hints, it should in theory speed up the page load. Time to first byte on forum.digitalpoint.com is 400ms so even if the browser is fetching things it doesn't need, if some of them are useful it should surely help?
I messed around with Cloudflare Early Hints again today and it's definitely different vs. last time I messed with it. Although that "different" means nothing happens... I haven't even seen a single request come across due to early hints (using HTTP/3 with some rel="prefetch" items and latest version of Chrome so in theory it should be working, but I haven't seen one happen yet 🤷🏻‍♂️).

Was thinking maybe it's because I've also been mucking with caching HTML for guests at the network edge, but even logged in where that's disabled, still nothing. I have it enabled on iolabs.io in case someone else wants to see if they see any requests being initiated by early hints.
 

Wildcat Media

Well-known member
Use Workers for your image proxy and URL proxy (doing this will give you a high-performance/free way to hide your server's IP address when it makes a request for images or URLs).
That's way above my pay grade, so I'm going to have to read up on what this does. Looks interesting, especially for a larger forum I'm thinking of using Cloudflare with (after an upgrade).
 

digitalpoint

Well-known member
That's way above my pay grade, so I'm going to have to read up on what this does. Looks interesting, especially for a larger forum I'm thinking of using Cloudflare with (after an upgrade).
You can do it without really needing to understand the "how" with my add-on under XF Admin -> Setup -> Proxies... just FYI.
 

Wildcat Media

Well-known member
You can do it without really needing to understand the "how" with my add-on under XF Admin -> Setup -> Proxies... just FYI.
I'm only wondering if it's worth setting up. I want to look into it more to see why I would need it, and if our usage would fall within the free plan limits. I'd rather know more about it before blindly enabling it, in other words. Cloudflare has a lot of docs to look thorugh, so that might make for some good insomnia-curing reading one of these evenings... 😁
 

digitalpoint

Well-known member
I'm only wondering if it's worth setting up. I want to look into it more to see why I would need it, and if our usage would fall within the free plan limits. I'd rather know more about it before blindly enabling it, in other words. Cloudflare has a lot of docs to look thorugh, so that might make for some good insomnia-curing reading one of these evenings... 😁
It allows you to keep the true IP address of your server hidden. For example Cloudflare's normal mode of operation sends all your web traffic to a Cloudflare IP and they are able to mitigate DDoS attacks because of that (Cloudflare can't stop DDoS attacks if the traffic is going direct to your server IP (they aren't a middleman). Because of this, it's a good idea to keep your server's true IP address hidden from the public (if someone wanted to DDoS attack you and they can get your server's true IP, they just go straight there rather than through Cloudflare).

So say for example you let users post images... a malicious user could post an image on a server they control. Your server's backend fetches the image via the image proxy system and now that malicious user has your server's IP address because your server connected direct to their server to fetch the image.

Cloudflare Workers allows you to make those proxy requests from a Cloudflare IP (the malicious user only sees a Cloudflare IP, not your server's true IP). As far as cost, unless your site has an insane amount of traffic, it should be no cost. Cloudflare allows 100,000 requests to Workers per day for free. A request is only needed when XenForo refreshes a cached image (by default XenForo does that once every 7 days, but you can make it longer in your options). So that would allow roughly 700,000 (100,000 free x number of days until cache expires) UNIQUE proxied images to be viewed by users per day (not total views/requests... actually unique images).
 

Wildcat Media

Well-known member
OK, your explanation of the way requests are handled makes sense. I probably can't use the free tier on a larger forum I'm thinking of using it on (I have to look at some stats to see where we're at), but for this smaller forum, we'll be OK.

Thanks much for explaining!
 

digitalpoint

Well-known member
You would need to have an inane amount of traffic and an insane amount of images you are proxying. You can get an estimate of how many Worker requests you would need per day to handle what the site is currently doing with the following SQL query:
SQL:
SELECT COUNT(*) / (SELECT option_value FROM xf_option WHERE option_id = 'imageCacheTTL') AS worker_requests_per_day FROM xf_image_proxy WHERE last_request_date >= (UNIX_TIMESTAMP() - (SELECT option_value FROM xf_option WHERE option_id = 'imageCacheTTL') * 86400);

If the results of that are > 100000, you could raise your cache time days to get it lower. But that will give you how many you would have needed recently.
 
Top