You've heard the word cache before, but don't know exactly what it means in the context of the Web. In common parlance, caching means placing something in storage (usually in secret) on the chance that it may come in useful later (e.g. a weapons cache). A browser or Web cache does exactly that, except with program and website assets. When you visit a website, your browser takes pieces of the page and stores them on your computer's hard drive. Some of the assets your browser will store are:
- Images - logos, pictures, backgrounds, etc.
- HTML
- CSS
- JavaScript
In short, browsers typically cache what is known as "static assets" - parts of a website that do not change from visit to visit.
What to cache and for how long is determined by the website. Some assets are removed from your machine in a few days while others may remain in your cache for up to a year.
When many people hear that websites are storing assets on their machines without their knowledge or permission, they get a bit nervous. After all, we're placing a great deal of trust in Web developers, hoping that they won't put anything destructive or malicious on our devices.
The benefits of browser caching far outweigh the risks. Good firewalls, virus scanners, and common sense are all you need to keep your machine safe.
The benefits of caching
When you visit a website for the first time, your browser has a conversation with the remote server that hosts the site. Your browser sends a request, and the server sends back one of the website's assets. The page HTML is the first to download and it becomes the blueprint by which the site is constructed. As your browser reads the HTML code, it sends out more requests to the server to send more pieces of the page, mostly the static assets mentioned above.
This process takes up bandwidth. Some Web pages will take a great deal of time to fully download and become functional because they have a lot of pieces or their assets are large.
For instance, you may notice that when you first open a Web page, the text appears before the images. That's because the text is small and takes little time to download, whereas a high-quality image may take several seconds (an eternity in computing time) to populate.
Caching improves and speeds up browsing. Once you've downloaded an asset, it lives (for a time) on your machine. Retrieving files from your hard drive will always be faster than retrieving them from a remote server, no matter how fast your Internet connection.
Take a typical e-commerce site. Certain assets, such as the logo, will appear on every page in the exact same location no matter where you are on the site. Without caching, your machine would have to download that logo every time you clicked on a new product page.
Along with large images, complex sites use large JavaScript files - necessary for applications such as shopping carts, interactive images and wish lists. Imagine how conversion rates would be negatively impacted if a user had to wait five to ten seconds for a "Buy Now" button to appear beneath a product. Fast, the fluid browsing experience is essential to making customers feel comfortable and encourage conversions. In addition, the next time you visit the cached e-commerce site, those assets will still be available on your device for faster loading.
Mobile devices are frequently limited by bandwidth. Some mobile data plans also have bandwidth caps or charges. The less a user has to download a website, the better for them.
Some pitfalls
You've enabled asset caching for your website. The next day, you decide to change the color of your logo. You swap out the old logo for the new one and check your live website to see how it looks. But the old logo is still there.
Assuming you completed the image swap correctly, the problem is usually caching.
Your machine has a cached version of your logo on the hard drive. It never bothers to request a new download of the image. Therefore, your machine will not obtain the new logo until the cache file it has on hand expires.
Old versions of cached files cause all sorts of issues for users if their devices don't have the latest version of the file - mismatched formatting, broken JavaScript and incorrect images are just a few.
For the most part, this doesn't happen because the server knows which assets have been updated and need to be replaced on the user's machine. However, if one of your customers complains that the site is broken for them and no one else, then you should advise them to clear their browser cache.
All the major browsers have a "clear cache" button. Some are easier to find than others. Hitting that button erases all of your cached files. Try it. Visit a page you frequent and note how long it takes to load. Clear your cache. Visit the page again and note how much longer it takes for the page to load.
Browsers also allow you to clear the cache only for certain websites. If only one website is having caching issues, clear the problem site and leave your others intact to keep your browsing fast and fluid.