Browser Cache. Why You need to Know About It
Mar 25, 2016
Clear your cache. Clear your cache. Clear your cache.
I guarantee you, as a web developer, you'll need to get used to doing this. A lot. Made a change in your code that you're sure is correct, but your webpage doesn't look any different? Clear your cache. Updated something on your site that looks fine for you, but the client is reporting they can't see it? Clear their cache. Down on your luck and struggling for money, hoping to win the lottery that night? Clear your cache. Every single one of those scenarios (except the last) can be resolved by carrying out that simple step.
For the uninitiated, the cache is like the memory of the web browser you're using (Chrome, Safari etc). When you visit a website, it will conveniently remember things about that website for you temporarily - like images, and general information about how the page should appear. If you return to that website again, it will load faster - because the browser can simply refer back to its memory. That's great! For the average web user. For them, that means their frequently visited websites will load quicker and their browsing experience will be way more enjoyable.
For web developers, however, the cache can trip you up when you least expect it. For some unknown reason, I could be making update after update to my code and the change is reflected correctly every time by the browser on the page. But then after update four hundred and ninety three, it decides to ignore it and use the cache. I hate this.
You can disable the cache altogether, but this isn't really ideal because every time you refresh the page after you make a change, the browser is re-downloading all the images etc from scratch. This will be slower - not so bad for a normal user as they'll just be loading the page once. But if you're developing then you're refreshing the page hundreds of times, and all that extra time will add up.
No, the easiest way is to simply leave the cache enabled, and make sure you're well prepared for it to confuse the hell out of you. Because it will. Even when you know all about it, there's still times when your end-of-day, code-addled brain struggles to comprehend the reason why something isn't working! Then it hits you. And you trundle off to clear your good friend, the cache.
Now we know all about it, we just need to learn how do it. These instructions are correct at the time of writing, but who knows when Google, Apple or Mozilla will decide to change their menus/settings.
In Chrome there are two ways. The "normal" way:
- click on the menu icon (three horizontal lines) at the top right of the browser, then settings.
- scroll down to the bottom and click "Show advanced settings"
- scroll down to the "Privacy" section and click the "Clear browsing data" button
- tick or untick whichever options you like in here - but the one we're interested in is "Cached images and files". Tick this.
- click the "Clear browsing data" button
And the easier way (for developers like us):
- if it's not already open, hit F12 to open DevTools
- click on the Network tab
- right click in the table that shows all of the loaded resources for that page
- click "Clear browser cache"
- click the menu icon and choose options
- select the advanced panel
- click on network tab
- in the "Cached Web Content" section, click Clear Now
- click Safari then Preferences
- click on the Privacy icon
- click Remove All Website Data
Keep this in mind whenever your changes don't seem to be having any affect in the browser. There's a good chance it could be what's causing the problem! Of course, your code could also just be wrong... but I'm sure that's never the case!