Cache Xenforo Image Attachments, CSS With Cloudflare

Cache Xenforo Image Attachments, CSS With Cloudflare. Speed Up Your Site.

Image attachments on Xenforo are not static files. It has the following path structure:

domain.com/attachments/title-webp.123/
domain.com/attachments/title-gif.124/
domain.com/attachments/title-jpg.125/
domain.com/attachments/title-png.126/

And for CSS files:

domain.com/css.php?css=****

All of them must go through PHP to be displayed to visitors. Of course, it will contribute to reducing your page loading performance if your server is not strong enough or overloaded.

A simple way to solve this problem is to create a rule in Cloudflare that tells it to cache these files and store them on Cloudflare's servers. This will then serve these files faster to visitors.

Note: You must set up for guests to be able to view the full image attachment on your site.
XenVn Setting -> Attachments -> View All Image Attachments: Enable

Configuration instructions in .htaccess file or on apache2 server:
1. Configuration in .htaccess file:
Open the .htaccess file in the root directory where you installed Xenforo
Add the following line at the end:

You must log in to view
(6 lines)

2. If you are using apache2:
- Go to the HTTPD file. For example: apache\conf\httpd.conf
- Add the following lines at the end, ending with a blank line:

You must log in to view
(6 lines)

or

You must log in to view
(6 lines)

- Check for syntax errors with the SSH command: apachectl configtest
- Restart the apache server with the SSH command: sudo apachectl restart

Configuration instructions on Cloudflare:
- Go to: Caching -> Cache Rules -> Create rule
- Create 2 new rules with the following parameters:

Rule 1 (for XF CSS file):
+ Rule name: CSS Cache
+ If incoming requests match: Custom filter expression
+ Field: URI Query String
+ Operator: wildcard
+ Value: css=*
+ Cache eligibility: Eligible for cache
+ Save

Rule 2 (for XF Image Attchments)
+ Rule name: Webp / Gif Cache
+ If incoming requests match: Custom filter expression
+ Field: URI Path
+ Operator: contains
+ Value: -webp.
+ Press Or button, Add the following parameters:
+ Field: URI Path
+ Operator: contains
+ Value: -gif.

If you are using XF 2.2 or you are using JPG and PNG image formats for your page, you need to add the following 2 rules:
+ Press Or button, Add the following parameters:
+ Field: URI Path
+ Operator: contains
+ Value: -jpg.
+ Press Or button, Add the following parameters:
+ Field: URI Path
+ Operator: contains
+ Value: -png.

+ Cache eligibility: Eligible for cache

If the image has been cached on Cloudflare, it will have the following Header name:
cf-cache-status: HIT

Similar to CSS URL:

 

Ngôn Ngữ Tiếng Việt Cho Xenforo 2 - Bản Chuẩn  2.3.6

XenVn SEO Check - Xenforo Optimization Guide