Cache Me If You Can
What’s the Cache?
When you load a web page, your browser requests dozens of resources from the server. First the server returns the HTML, which instructs the browser to request other files. Images and stylesheets to make the website look nice, javascript files to make it interactive, fonts to ensure the text looks right — sometimes even other web pages to display inside the page. With so much work required to load a web page, your browser will often store copies of these resources in its cache to make loading quicker the next time around. For instance, once you load a web page with a large banner image, on your next visit, the browser will skip downloading it again showing only the version it has saved.
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?
Expires Headers
Websites can tell browsers how long to store different types of resources using HTTP headers. Here’s an example of an expires header:
ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType text/html "access plus 0 seconds"
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.
Busting Your Cache
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.
Happy surfing!