So cache. You have probably heard of it, although you may not even know what it means. I have seen many beginner developers (Especially HTML/CSS ones) struggle with the concept, and how it works.
Thankfully, it’s quite a simple idea, and while some online guide dig deep into how the HTTP protocol works in order to explain it to you, this one does not (Although it is covered in part, and is important to learn more about if you want to become a professional).
Enough pretext, let’s get into it.
So what is a web browsers cache?
Every major browser has a cache. But what does that mean, and what does it do? Have you ever noticed that websites sometimes load a little faster the second (Or third, or forth, or …) time you visit them? That is because whoever you visit a website for the first time, your browser saves a copy of the code to its cache. When you visit the website for a second (or third, or forth, or …) time, your web browser realizes that it already has a copy of the code stored locally (in the cache), so it rendered that instead of downloading a new copy from the web.
Pros and Cons
Pros - Websites load faster, and less strain is placed on the server that hosts the files for the website. It also helps reduce the amount of data that is used, which is helpful for metered connections.
Cons - Whenever a website is updated, your computer won’t know, and will most likely continue to show you the version that is has saved. Normally, this is not a big deal since most changes are done dynamically, or are not important to see right away (Since the cache of a website will be cleared after a few days). However, when you are testing your own website, and do not have these things setup, you probably want to see your changes immediately to see if that text looks better in red or blue. Also, since the cache takes up space on your computer, it can begin to slow down computers with limited memory. Now just because this cons paragraph is much longer than the one for the pros, that does not means it’s bad, in fact the cache is quite good (And, you can clear it whenever you want)!
Additional Resources
So, what can you do if you are seeing an old copy of a website, want to check if a new version is available, or just want to free up a little space? Well, just clear the cache on your web browser! It’s a simple task, and does not take long to complete (Generally less then a minute).
What if you are the developer of a website? Setting cache headers on your website (Tutorial for Apache only) allow you to decide how often a visits browser checks for updates to your website, neat, right? The only thing is that they will not work until you clear your cache, isn’t that ironic?
Was this helpful? Was there anything I forgot? Let me know in the comments below!
Top comments (4)
Chromium-based browsers have an option in the dev-tools to disable all caching, which is usually what I use.
The amount of times I have reloaded a page wondering why my changes aren't taking effect only to realise I had closed the dev-tools window does kind of worry me though.
Oops, forgot about that checkbox
Or just hold
shiftwhen you click the refresh button, to force a reloadReally? That’s a new one for me! I also forgot CTRL+F5