CloudFlare Page Rules

[arn]

With which rules ?
if a user changes their avatar what happens?

I have witnessed a delay in the avatar changing

Avatars are timestamped, so they will change.

https://xenforo.com/community/data/avatars/l/184/184953.jpg?1612133068

Just make sure your caching level is "standard"

 

[digitalpoint]

There should be zero delay with avatar changes. XenForo has a built-in cache breaker function when an avatar changes. See the URL of an avatar above? The "1612133068" at the end is the timestamp it changed. Meaning the avatar URL different/unique/changed the instant it's changed.

As @arn said, just make sure caching is standard (and not ignoring URL parameters).

 

[Silmarillion]

Avatars and thumbnails have file extensions that are cacheable by Cloudflare, so it's not necessary to create specific page rules for them as long as your web server is configured properly.

For Nginx, I use this in the config (which in turn passed through by Cloudflare and causes things to be cached at the edge for a year without needing to use up any of your Cloudflare page rules):

 location /data/ {
                add_header Cache-Control "public, max-age=31536000";
        }
        location /js/ {
                add_header Cache-Control "public, max-age=31536000";
        }
        location /styles/ {
                add_header Cache-Control "public, max-age=31536000";
        }
        location /favicon.ico {
                add_header Cache-Control "public, max-age=31536000";
        }
        location ~ \.(svgz)$ {
                add_header Content-Encoding "gzip";
                add_header Vary "Accept-Encoding";
                add_header Cache-Control "public, max-age=31536000";
        }

Hello @digitalpoint,

I have a managed server without root access. The following extension of my .htaccess ...

<IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/xml
   AddOutputFilterByType DEFLATE text/shtml
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

<ifModule mod_expires.c>
   ExpiresActive On
   # Add default Expires header
   <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg|woff|woff2)$">
   ExpiresDefault "access plus 1 year"
   </FilesMatch>
</ifModule>

... unfortunately doesn't seem to work. All statistical tools still complain about the things that I actually want to cache. Which Cloudflare settings would you recommend to me to cache css, js, avatars and fonts?

Best regards

 

[digitalpoint]

Personally, I'd try to fix it at the web server, rather than making rules to force Cloudflare to treat it like a properly configured web server.

That being said, I forgot everything there is to know about Apache, so I'm useless there. Been more than 10 years now since I switched to Nginx from Apache, so all my Apache knowledge I once had has been purged from my brain. hah

 

[Aivaras]

CSS is the only one that is really needed because Cloudflare will not cache a request with a php extension unless you force it to with a page rule.

Suppose, the style of the website gets heavily re-worked and needs, as a result, to be re-cached. How would you go about purging the CSS by URL in Cloudflare?

 

[digitalpoint]

The URL of XenForo CSS files change anytime they are edited, so you don’t need to do anything as far as telling Cloudflare to purge it’s cache. New URL = Cloudflare pulls new data from your site.

 

[Aivaras]

The URL of XenForo CSS files change anytime they are edited, so you don’t need to do anything as far as telling Cloudflare to purge it’s cache. New URL = Cloudflare pulls new data from your site.

Thanks!

[…] Cloudflare will not cache a request with a php extension unless you force it to with a page rule.

I do see CSS reported under Domain > Analytics > Performance > Content Type Breakdown (chart) without a page rule for CSS caching added. Doesn't this mean they cache XenForo CSS?

 

[digitalpoint]

Not sure what you are looking at, but no. Cloudflare does not cache XenForo CSS by default because the CSS file does not have a .css extension, it has a .php extension. Cloudflare’s automatic cache is based on file extension, not mime-type.

 

[Aivaras]

I am looking at Cloudflare > Site > Analytics > Performance. There are three data charts on that page, the rightmost is entitled "Content Type Breakdown" and it shows all the data types that are cached. CSS is included, thus my question.

 

[digitalpoint]

Well it's easy enough to test by looking at the HTTP headers of your css files. Cloudflare does not cache the css files here on xenforo.com because they are .php extension (not .css). You can make a Page Rule to override that default behavior, but xenforo.com has not done that. The cf-cache-status header in the HTTP response will tell you if Cloudflare is caching it or not.

xenforo.com (and the default how Cloudflare works):
cf-cache-status: DYNAMIC

iolabs.io (one of my sites that has the Page Rule override):
cf-cache-status: HIT

Cloudflare documentation on what they cache by default: https://developers.cloudflare.com/cache/about/default-cache-behavior/

Cloudflare only caches based on file extension and not by MIME type.

So either you need your CSS files to have a .css extension, or you need to make a Page Rule that tells Cloudflare to cache XenForo's CSS files (which have .php extensions). Those are your two options to cache CSS files at Cloudflare's edge.

 

[Aivaras]

Thank you for the explanation. Much appreciated!

 

[digitalpoint]

Also, on that same page, they clearly define what the cf-cache-status header means. Basically, DYNAMIC means it's not cached and Cloudflare isn't trying to cache it.

HIT	The resource was found in Cloudflare’s cache.
MISS	The resource was not found in Cloudflare’s cache and was served from the origin web server.
NONE	Cloudflare generated response. The resource is not eligible for caching.
EXPIRED	The resource was found in Cloudflare’s cache but was expired and served from the origin web server.
STALE	The resource was served from Cloudflare’s cache but was expired. Cloudflare could not contact the origin to retrieve an updated resource.
BYPASS	The origin server instructed Cloudflare to bypass cache via a Cache-Control header set to no-cache,private, or max-age=0 even though Cloudflare originally preferred to cache the asset. BYPASS is returned when enabling Origin Cache-Control. Cloudflare also sets BYPASS when your origin web server sends cookies in the response header.
REVALIDATED	The resource is served from Cloudflare’s cache but is stale. The resource was revalidated by either an If-Modified-Since header or an If-None-Match header.
UPDATING	The resource was served from Cloudflare’s cache and was expired, but the origin web server is updating the resource. UPDATING is typically only seen for very popular cached resources.
DYNAMIC	Cloudflare does not consider the asset eligible to cache and your Cloudflare settings do not explicitly instruct Cloudflare to cache the asset. Instead, the asset was requested from the origin web server. Use Page Rules to implement custom caching options.

 

[digitalpoint]

Also, for those trying to do Cloudflare Page Rules for caching, the Cloudflare add-on I released a couple months ago makes it super easy (just click a button).

[DigitalPoint] Cloudflare

Features Everything is available from within XenForo (you do not need to go to Cloudflare for things) via the Cloudflare API. This allows you give admins permission to do certain things (for example block IP addresses within Cloudflare without...

xenforo.com

...it does a whole lot of other useful Cloudflare related things as well.