Problem Description
Sometimes when you change elements of your website, you then find you need to clear your browser cache to see those changes. Similarly occasionally the site does not display correctly in the browser until your browser cache has been cleared.
There's two levels of caching: server-side and client-side (although there may be multiple server cache layers, if you have enabled them).
The server-side cache: used to prevent the need to process the code that runs your website on every single visit, thus making your website considerably faster. Let's say you've got 5 visitors loading your homepage. In its simplest form, the server cache will generate the website, keep that output (as what are called static files) and send it to the first visitor as well as to the remaining 4, rather than having to regenerate the output for each of them.
The client-side cache: more commonly known as the browser cache. There are configuration rules that can be configured on the web server that tell the browser how long it should be caching/keeping the files that make up your website. In order to obtain a good website page loading score with Google Page Speed, GTMetrix, or most other website speed tests, you must set these values to be very long (typically 1 year, or at least 90 days to get a good score). Caching plugins like WP Supercache, W3 Total cache, or WP Rocket will all do this for you via the .htaccess file. For even faster static file response times, you can instruct nginx to take over this functionality.
Problem Resolution
When you make a change to your site, like updating plugins or changing the CSS, you must ensure to clear the server-side cache to ensure those static files are refreshed with the new data. This not only updates the server side cache, but because it makes changes to the files that make up your website that the browser sees, it should be indicating to your browser (and your visitor's browsers) that there have been changes and that they should re-download the files. To clear your server-side cache, there's normally an option in the WordPress admin top-bar that says Delete Cache OR Total Cache, WP Rocket, or something similar and then within that menu option you'll find the option to clear the cache.
But even once that's done, the client-side/browser cache must still update its data for anyone who has previously visited your site. When loading the site, the browser should see that there's a difference in the files the server is offering and opt to re-download those files, however in the interest of being super fast (probably to compete with other browsers), your browser will sometimes ignore that and do what it wants rather than what the server is telling it to do. Sadly there's nothing we can do about this if the browser is ignoring the server's instructions.
The only change that might prevent that from happening is if we disable all forms of browser-level caching by instructing the browser to not cache anything. This would be done by disabling client/browser caching in your website's caching plugin. This change will have three effects:
- It may not solve the problem since browsers will often still cache data even when told not to by the server because they're trying to always be (or at least feel like) the fastest browser around
- It will very likely make your Google Page Speed scores (among other speed tests) lower, which ultimate could affect rankings
- It will mean your website uses more PHP processing slots and more CPU power which may result in intermittent outages of the site due to there not being enough processing slots available
To avoid these three effects, you may just have to learn to live with the glitches that arise from browsers that aggressively cache websites.
