One of the most common things a website owner will hear when trying to troubleshoot a problem is a request to “clear the browser cache”.
What is a Cache?
The cache (pronounced like “cash”) is a collection of frequently-used data. What caching does is enable a website to load more quickly by storing data most likely to be needed in a separate and easily accessible place.
You can think of it like a library with a section of popular books. If visitors frequently check out and check in the same few books, you will be able to allow more patrons to quickly check out books if you store the popular ones near the checkout in their own special pile, rather than having to look them up and search for them in the large stacks all the time.
In the same way, cached files are kept separately so that they are loaded quickly each time a user takes action, the assumption being that they are going to be needed. The cache becomes the first place to check when finding any file. As a result, when a user loads a webpage for the very first time, it will usually take a bit longer than on subsequent visits, because some of the content gets saved in a cache.
Browser Caching
When support personnel ask a user to clear their browser’s cache, they are asking him or her to remove the files that the browser has downloaded into the cache, the collection of frequently accessed files, such as header images that load on every page of a site. A user can completely empty the cache or clear the cache for specific websites only.
The browser chooses what to put in the cache according to the Cache-Control and ETag headers.
Cache-control determines how and for how long an item can be cached by the browser. When a browser needs to load a particular resource, it checks the cache to see if the resource is there. Usually, this ends up saving requests to a server and reducing page load times. If the “no-cache” parameter is set, a given resource is always loaded from the server instead of from the cache. This is a good setting for files that are updated frequently.
The parameter “max-age” determines the length of time (in seconds) that a resource should be cached. So, “max-age=300” would mean that a given resource is saved in the browser’s cache for 5 minutes.
What happens when the designated amount of time has passed? Well, the next time a browser needs to access that resource, the ETag (entity-tag) header tells the browser if that resource has been updated since it was last accessed. If it hasn’t been, then the browser loads the file from the cache. If it has been, then it goes to the server to load the latest version. The result is that the browser doesn’t need to download a resource from the server unless there has been an update.
In our example above of the library, the librarian checks the popular books section first, regardless of what book the patron asked for. Then, if it isn’t in that section, the librarian will check the entire set of stacks. If the requested book is in the popular books section, it will be found quickly and easily. But if it isn’t, it will take a bit longer overall to find the book than if the popular books section wasn’t checked first.
To bring this example back to our explanation of browser caching, if a lot of files that are accessed frequently are not stored in the cache, then the site will load slower, because the browser is checking the cache for the files and then checking the remaining files.
The takeaway here is that caching usually results in faster page download times, but the setup should take into account what kinds of resources will be getting updated frequently.
There are lots of types of caching, including server-side caching that, you guessed it, has to do with storing resources on the server. When a website is under development, usually server side caching is turned off, so that all the changes can be viewed immediately.
[For a more thorough tutorial and additional resources about caching, check out this caching primer by Mark Nottingham.]
So to summarize, you would be asked to clear your browser’s cache in order to make sure that you are viewing the most up-to-date version of a website’s resources! If your browser is storing old files, you might not be seeing the latest version of the website.
How Can I Clear My Browser’s Cache?
The instructions for clearing your cache depend on which browser you are using.
Safari: This one is sneaky. At first it appears that you need to clear all browser data (including history and cookies), because that’s the only option available from the Preferences or on the History tab. But, if you go to Safari > Preferences > Advanced Tab and check “Show Develop menu in menu bar”, then when you click the “Develop” menu you will now find “Clear Caches” as an option.
Firefox: Click the menu in the top right that looks like a mobile menu. Then go to Preferences > Advanced panel > Network tab. In the Cached Web Content section, click “Clear Now”.
Chrome: In your browser toolbar in the top right, click the menu and then go to More Tools > Clear Browsing Data. In the “Clear browsing data” box, click the check boxes for “Cookies and other site data” and “Cached images and files”. Choose how much of it you want to clear form the menu and then click “Clear browsing data”.
How Can I Set Up Caching on my WordPress website?
Here is where it gets tricky. There are a few popular plugins that provide caching, and they differ in how complex they are to set up, price point (or free), and compatibility with other plugins. There are also some hosting providers who provide caching as part of their service. Additionally, there are other services, such as Sucuri for example, which provides site caching in addition to a firewall for security.
Caching is best handled on a site-by-site basis. Want us to help you?
Contact us for a custom quote and we’ll let you know how we can help!
