Browser Caching and Milk?
Browser caching is complicated, but I’ll try to put it in simple terms. When something is “cached” it means it is stored somewhere that is quicker or easier to access, so that when you try to retrieve that data again it is fetched much quicker than the first time. Sometimes entire pages are cached, this allows the server to only create the page once and can then serve it to other users as well until the page is deemed stale. In the case of Browser Caching, resources are stored locally on your computer. The most common things your browser will store are CSS (Cascading Style Sheets) Files, Javascript Files, Image Files, Font Files, and miscellaneous other resources. When these files are sent to your computer, the server (or a developer) can place stipulations on these assets letting your browser know for how long they can be used without checking for new ones.
So what’s the benefit?
Caching speeds up the process of loading a web page. Imagine if every time you wanted milk you had to go to the super market to get it rather than going to your own refrigerator. It would take significantly longer, right? Caching is similar in that it stores it locally so that you are only making that short trip to the refrigerator to get your data rather than the super market. The more assets you can retrieve from your local machine, the less requests your browser needs to make to fetch them from the internet. Fetching a resource from your own computer is much faster than retrieving it from a remote location and also has the added benefit of not wasting bandwidth. If you have data caps on your mobile data, caching can save you those precious megabytes by using your local files!
How am I affected by caching?
Items that are cached are usually larger items and for the common user, they are usually images on a web page. Often times when we are building websites and we are swapping out placeholder images with the real images, our clients will get confused as to why the updated images aren’t showing up on their computer. This is because the original placeholder images are cached. So because you are bringing up a web page that you’ve viewed before, it is going to your local storage to retrieve the images instead of the source, hence, still showing the old images.
How do you “fix” caching?
You don’t really “fix” caching, rather, you need to tell the system to go out again and re-download the updated images or data. In order to do this, you must perform a “Hard Refresh.” On most browsers, a hard refresh requires you simply to hold down the shift key on your keyboard and push the refresh button on your web browser. Sometimes you have to do this two or three times before the hard refresh takes effect. Once it has, your system has gone out and retrieved the updated data from it’s original source, and the updated information will now appear on the website! This is something that is only usually a problem during development, or switching from development to production. Most assets that make it to production are meant to be cached and if your assets need to be updated a version number can be appended to the file names to force browser to reload.
What else should I know about caching?
As I mentioned before, caching is complicated and there are many other components that go along with it. This however is the most common way most people are affected by it. It is important to remember that caching is a good thing, it is speeds up the process of the action you are trying to make. If you think you are experiencing a cache problem, remember how to do the “hard refresh” and try that before you start kicking and screaming at your computer!
Oh, and don’t forget the milk.
