How does CloudFlare or CDNs in general work and can I force them to get my updated static content?

Question

I would like to turn CloudFlare on for my WordPress server, but I'm still making changes very frequently. CloudFlare says that it caches static files (javascript, css, images, etc), so I'm assuming that if I made changes to these files and saved them on my servers, they would not show up changed on theirs (at least for a while).

If I make changes to these files, will they eventually propagate to their servers? How long does that take?

I've been doing the little trick of changing the src of my css files from "my.css" to "my.css?v=1.1" and "my.css?v=1.2" etc when I make changes so it forces your browser to get the newer version of the file because it is tricking it into thinking it's a new file. Will this also work with CloudFlare, or does it bypass this?

Thank you.

Answer 1

You have a few options to manage how long assets are cached.

If you go to domain > cloudFlare Setting > Perfornamce Settings > Minimum expire TTL
you can choose between 2 hours and 1 year. This is a site global setting.

If you go to domain > page rules you can customise cache and other details for a subsection of your site. So this could be your CSS and JS directories, or it could be single files.

No matter what settings you use, if you go to domain > cloudflare settings > purge cache, you can clear individual assets, or the entire site cache

You can still use your CSS versioning method. One detail to watch is that if you use my.css?v=1.1 and you want cloudflare to cache this for improved performance, you need to go to domain > cloudFlare Setting > Perfornamce Settings > Caching Level and set this to agressive.

If you don't visitors will be sent the CSS file from your server, not CloudFlare.

Hope this helps!