Best Set Up Caching Plus .htaccess configuration

Intro

I am developing a website/app for an NGO with 100% static files on the server side. (later we will add a mysql database and use some server side nodejs or php code).

The site file types are .css, .js, png, html and json,

Using javascript, the website/cordova app, our pages are dynamic and we display data on a map using mapbox jl. www.europeanwaterproject.org

javascript code saves limited local storage information on the telephone or computer, but no information is collected server side.

Questions :

What Cloudflare page rules should I use on to essentially cache everything ?

When I make server side updates, how do I ensure that Cloufflare only serves the latest updated files on the server.

Same 2 Questions for http and https config files (port 80 and 443)

What http and https cache instructions should I use on to essentially cache everything if the files are the latest files ?

What http and https cache instructions should I use on to make sure the client is not seeing stale files ?

Thank you very much for all the insight you can give including response with links to the relevant cloudflare instructions and guides.

Best regards,

Stuart

If server content is 100% static, you can create a Page Rule to match www.example.com/* with a Cache Level set to “Cache Everything” and an Edge Cache TTL of however long you want that content cached. You can also set a Browser Cache TTL in that Page Rule as well.

If you update anything, you’re going to have to Purge it. Either a Purge Everything, or a Custom Purge by specific URL (no wildcards). Or set that Edge Cache TTL low enough where you’re ok with a delay in content refresh until the cache expires.

HTTP/S has nothing to do with caching. The above instructions apply to all connections. But if you have HTTPS properly configured, nobody should be visiting your site using HTTP. You can use the SSL/TLS page (Edge Certificates section) to enable “Always Use HTTPS” and “Automatic HTTPS Rewrites”.

Hello,

Thank you very much. Does the below look reasonable for caching everthing on the server.

The PageRule www.example.com/* is the same as example.com/* ?

Will a PageRule www.example.com/*.json catch .json files at all levels … ie in the main html directory as well as subdirectories ?

In layman terms, what is the difference between Browser Cache TTL and Edge Cache TTL ?

On the caching tab, should I keep Caching Level : Standard, and Browser Cache Expiration : 3 hours ?

Do I assume correctly, that the the Browser Cache Expiration at 3hrs will cause the caching rules that I use at the VirtualHost port 80 and 443 cache rules to be ignored ?

If you respond again, I may not respond for 4-5 days. I want to read all the material you referenced.

Best regards,

Stuart

The page rule in your picture will cache absolutely everything – regardless of the presence of a www prefix.

If you add that page rule for json, I believe that wildcard will match all subdirectories as well. I thought I saw that documented somewhere, but can’t find it now.

The difference between Browser and Edge caches is where the data is stored: Either in the user’s Browser, or at Cloudflare’s Edge node. Browser cache is only for that one user, but Edge cache is for everybody in that geographic region.

Leave your Cache Tab settings as they are.

These Page Rule cache settings will override anything set by your server.

Hello,

I have read over the documentation provided by the help desk as well as the suggestions you provided but still have a lack of understanding of an an aspect of caching.

What I want is to have all pages cached at cloudflare and in the client browser until there is a document modification. I guess it is what most people want.

If I cache data too long in the client browser cache, there is a risk that even if I purge the cloudflare cache after my daily website update, the client will either be seeing stale data or even worse a non-function website. I prefer caching less in the client browser even at the risk of degregated performance.

I am happy to have Cloudflare cache the maximum amount and for as long as possible between manual cache purges.

In the Page Rules section, I am considering 1) decreasing the Browser Cache TTL to 30 minutes, 2) leaving the Cache Level : Cache everything and 3) leaving the Edge Cache TTL at 7 days.

In the Caching section, I am considering reducing from 3 hours to 30 minutes the Browser Cache Expiration.

In my http/https server side headers, I am instructing the following …

2 HOURS

<FilesMatch “.(ico|json|jpg|jpeg|png|js|css)$”>
Header set Cache-Control “max-age=7200, public”

1 HOURS

<FilesMatch “.(html|htm)$”>
Header set Cache-Control “max-age=3600, public”

Does all this seem reasonable ? Thank you for your advice.

Best regards,

Stuart

That sounds like a good strategy. Hopefully you read how a Page Rule’s “Browser Cache TTL” cooperates with your .htaccess cache settings. Cloudflare won’t increase a Browser Cache TTL if you’ve set it at your server. I’m not sure I’d lump json and js files in with image and css files. Image and CSS files should rarely change, while your js and json might change frequently.

Thank you very much for your advice.

I have separated the header cache controls by file type as suggested.

Have a good weekend.

1 Like