Since we always want websites to load as fast as possible, this is a great thing. But what if a resource changes? How does the browser know whether to load its cached version or to load it all over again?
Websites can tell browsers how long to store different types of resources using HTTP headers. Here’s an example of an expires header:
The above code is telling the browser to store CSS and Javscript files for one year after they were accessed. Then it tells them to store images for one month, and the HTML will always be loaded fresh from the server.
So, what if one of those files changes before time is up?
If the browser is loading an outdated resource, things could start to look crazy on your page. When this happens, all bets are off. Images could be stretched or compressed, the colors and sizes of elements on the page could be wrong, or expected interactions could be broken.
Should things go haywire, it’s time to bust your cache. Busting your cache will force your browser to re-download all the resources from the server again, ensuring it gets the most up to date versions. You might delete all cached files that your browser is storing from all over the Internet, but chances are you would rather just download the files from the site you’re trying to view right now. You can do this by performing a ‘Hard’ or ‘Force’ Refresh on the current page.
On Windows, you’ll want to press
Ctrl + F5 (in Chrome it can also be done by pressing
Ctrl + Shift + F5). You can also hold down the
Ctrl key while you click on the refresh button in your browser.
On a Mac, you can hard refresh with
Cmd + Shift + R. Again, you can perform the same action by holding
Cmd + Shift while clicking the refresh button.
That’s all there is to it. After that, your browser will reload the page and download all the resources again, this time saving the new files to its cache for quicker loading next time.