When you visit a website, there’s a lot more going on behind the scenes than you might think and one of the most important processes that takes place is caching. Before we delve into the concept of cache, it’s worth knowing what actually happens when you visit a website as this will allow to better understand the value of caching…
What happens when you visit a website?
Let’s start from the moment you press enter after you’ve typed a website address in the browser, but it’s just the same process however you load a web page. The very first thing that happens, presuming you’re connected to the internet, is the domain is looked up in one or more domain name servers to determine the IP address of the webserver the website is on. The web browser can then send a request directly to the server based on the URL you’re visiting along with any data you’ve inputted through forms.
Once a server receives a request, the web browser then needs to wait for at least a response code. The response code indicates whether further data is going to be sent. In most cases the response code will be 200, which basically means success – the webpage exists and is available. Following a 200 code, the server will send data for the browser to display: typically this consists of HTML code, CSS and Javascript but it could be anything from a simple plain text to a large file.
When the browser has received the response from the server, it will then render or output the content in the most appropriate way. However, it’s not often a web page consists of just one file and it’s likely some of those files will be hosted on different servers. The process described above happens for each file that’s included on the page and although we’re talking milliseconds for each file, the time soon adds up and larger files do take longer to be retrieved, as you might expect.
In general, this means the bigger/more advanced/more complicated the website, the more resources that your browser has to fetch and process – creating a dilemma. Your website needs to not only serve as your digital shopfront but also offer functionality to customers, however, search engines are increasing their expectations for shorter load times as are your website visitors. This is precisely why cache is so important.
What is caching?
Caching is the process of storing data in a temporary location for quick access at a later point of time. When we say a temporary location, it is slightly misleading as most often data will remain there until the cache is cleared or no longer has sufficient capacity. Caching can take place on the server the website is hosted on or by your web browser, or most commonly both. Both the server and your web browser will store frequently accesses resources, or at least parts of them, in their cache.
For the server, the advantage of this is it can respond to requests and serve content faster. The advantage of your web browser caching content is that it needs to make fewer requests to load websites you commonly visit, allowing them to load much faster than usual.
When cache is a pain in the a**
It’s hard not to like caching as it is very effective at what it sets out to do and for the average user it’s hard to find a downside. With that said, if you ask a developer what caching is most will describe it as something along the lines of a necessary evil, for one simple reason. Changes.
Because of the way caching works, it assumes content remains the same. To be clear, by content we’re not talking about text rather things like images, styles and scripts. In most cases, this is true, especially for long-established websites, and web servers can set a lifetime for a resource to prevent it remaining in the cache for too long.
However, sometimes developers need to make changes to a resource for a number of reasons. When this happens it’s often the case the changes don’t immediately take effect and it can be difficult to force the cache to update the specific resource without asking visitors to completely empty it. This also happens if frequent changes need to made, a common scenario when developing a website.
When does your cache update
Sometimes, you’ll need to update your cache in order to view changes. It’s something that our clients have to do from time to time when we work on their websites or cloud-based apps, and whilst we can clear server-side cache, unfortunately, the webserver has very little control over your browser’s cache.
Browser’s know which cached file to use by comparing it with the URL of the requested file. By understanding this, it makes sense that if a website’s URL or the URL of the files were to change then the files would not be served from the cache – even if every other aspect were to remain identical. Of course, it’s not practical to change a website’s URL or rename resources any time there is an update.
Your browser’s cache will also update itself periodically, as webservers can stipulate an ‘Expiry Time’ for each file type. For example, most websites set an expiry time of 30 days for images and documents. That means if you’re looking at a web page with an image on, the image will be initially stored in your cache and the image will be served to you from cache any time that you visit the web page over the next 30 days but the next time you visit the website after those 30 days the image will be overwritten in your cache with the current one on the server.
It’s likely that at some point, you’ll need to force a file in your cache to update before it expires. To do this, you’ll need to clear your browser’s cache. Every browser has a different way of doing this, so you can find instructions for your web browser here.
In Chrome, you can also clear the cache for a specific website. To do this, visit the website, right-click anywhere on the page and click ‘Inspect’ – a panel will open either at the bottom or one side of the screen. With this panel open, right-click on the Refresh button and select “Empty Cache and Hard Reload”. You can then close the panel that opened.
As a side note, if you use your browser’s private/incognito mode you’ll be able to load the website with no cache and the cache will be cleared when you close the browser window. However, the cache for the website will not be changed or cleared when you use the browser in ‘normal’ mode.