CloudFlare - Difference between Basic, Simplified, and Aggressive caching

Question

CloudFlare has this page to explain the difference between their caching settings: https://support.cloudflare.com/hc/en-us/articles/200168256. However, I'm still confused. It says:

Basic:          example.com/pic.jpg 
Simplified:     example.com/pic.jpg?ignore=this-query-string 
Aggressive:     example.com/pic.jpg?with=query 

So I'm assuming that Basic means it doesn't pay any attention to the query string (it's treated as a single file no matter what query string is included). Simplified seems to say any query string will be ignored. And Aggressive seems to say the query string basically means it's a different file.

So, my question is, what's the difference between Basic and Simplified? If Basic ignores any query string, and Simplified also ignores any query string, aren't these the same?

Answer 1

It depends if you use query string or not. If you do not use them, then there is no difference.

If you, however, have images, JavaScript or CSS files in your HTML like:

<link type="text/css" rel="stylesheet" href="style.css?v=0.1.0" />

Then the setting makes a difference. To understand that, first you have to understand why the query string is used at all. When you add a different query string, under Basic it will force to request new file when the query string changes. So lets say after making some changes to style.css you will make your code to use v=0.2.0 string:

<link type="text/css" rel="stylesheet" href="style.css?v=0.2.0" />

Now all the visitors will redownload new file and cache it again.

Now if you have Simplified enabled, then CloudFlare will ignore the query string and return style.css file which is cached on CloudFlare. Until the cache on the CloudFlare updates, users will be receiving old file. With this you have to manage cache in CloudFlare. To avoid this, there's also Aggressive setting which would tell CloudFlare to cache both versions of the file.