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!

Answer 2

CloudFlare has two options for configuring caching. The default is configured in their control panel. Here you can set options such as "Cache Everything" and control the max age.

But CloudFlare also respects the headers on your content. I prefer to use these as it allows me the most granular control. The header in question is Cache-Control. If this header is not present the control panel option will be used.

If you send the header Cache-Control: no-cache the request will always check your origin server to see if the content is up-to-date. Note that this will cause every request to hit your origin. This will slow down your responses although a lot of the time you will be able to serve a 304 NOT MODIFIED response, so you might save some bandwidth.

If you send the header Cache-Control: max-age=3600 CloudFlare will serve the cached content for at most max-age seconds (in this case 1 hour) after the request before checking your origin server.

There are a lot more options with this header but those are the basics.

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?

This will still work. HTTP views every URL as a different entity, so the new URL will have to be fetched.