Cache, pronounced “Cash,” is one of those necessary evils that we, as website owners have to deal with.
Without cache when a user visits your site the server has to parse (read and interpret) various files of PHP or other server-side scripting languages. It reads all this code and then spits out the result of all the computations in a format that the user’s browser can read. It does this for every page, every single time.
This is where cache comes into play – rather than parse the code on the server before serving it to the user the output is saved and the next user that comes along gets a copy of this saved output file rather than make the server do all the work over again. This saves resources and loading time for your user. (We all like a fast loading site, right?)
There are varying levels of cache you have to deal with as well. With WordPress you have cache created by plugins (i.e. w3tc, Swift Performance, SG Optimizer, etc), some themes also add a cache level (I.e. Avada, Divi, etc.). On the server level, there are various ways cache are implemented as well – NGINX, Varnish, Litespeed, etc. You will have to consult with your host or their documentation to know which one is implemented for your site and how to work with it. On top of those we have CDN (Content Delivery Network) which takes cache files and disperses them to servers all over the world and when a user accesses your site their servers will serve the cache file from a server is geologically close to them. This, in theory, gives another level of speeding things up as the shorter the distance to travel to retrieve a file from a server the faster the trip will be. Popular CDNs are Cloudflare and Max CDN, but there are many others. The final layer of cache is right on your user’s own computer – their browser. This level is the one that we have the least amount of control over on the user’s side of things, especially if we say replace an image on a page, but it has the same exact file name as the previous image. (To overcome this – if you want to use a new image on a page, just make sure to upload it using a filename that is different from the original image.)
Cache is often the bane of our, the site owner, existence because we can make a change and not have it show up on the front end. To handle this issue you will want to clear the various levels of cache after making a change. You will want to follow a specific order for doing this.
For each level, you will have to look at the documentation to learn how to clear the level of cache. On your end, for browser cache, though you can usually use ctrl (or cmd on a Mac) + f5 to refresh the browser cache. If you reverse the order in any way the cache gets rebuilt from a lower level. I.e. if you clear the CDN cache first it will rebuild it’s cache files from the server which still has stale files and then if you clear the server cache afterwards the CDN still has the stale cache files and will serve those to your user instead of the fresh files that are located on your server.