Before deep diving to the details of cache, it’s best to understand what a Cache is. Cache in a nutshell, is information stored for a fixed period of time on a computer/server.
The purpose of using cache is to improve the performance of any website and application. How? By reducing the time it takes to access data on a website since the data is stored locally on your own computer. Think about it — accessing your hard drive is definitely way faster than retrieving your files online.
So each time you surf on a website, your computer is actually downloading the files to display on your computer every time you make a request (e.g. click on a link, etc.).
Rather than making multiple requests for the same file over and over again, wouldn’t it be better to do it once? That’s where cache comes in.
There are generally categorised into 2 kinds of caching:
As mentioned above, client-side caching is used for storing data files on the user’s personal computer. There are many different types but we will explore more on the common ones — the Browser cache and Service Workers.
All of us have a preference on the browser we love to use — Firefox, Chrome, Safari, etc. And they all have one thing in common — They all use browser cache.
Browser caching improves the user experience by improving the time required to access that information. Again, this is achieved through storing the data on your computer as opposed to transmitting the data over the internet to display on your browser. Website loading times are shorter and information from the site is accessible almost instantly.
Service worker is a newer kind of client-side caching popularised by Google. Google Chrome is one of the earlier adopters of this technology.
A service worker is a script that your browser runs in the background which is independent from a web site. This led to features that do not require a web page or any user interaction. Have you ever visited a site that asks you if you’re interested to subscribe to their news without the need to register? Chances are, they are using service workers and you will get to see notifications at the sides of your browser.
The application of service workers is evident in features such as push notifications and background synchronisation. With service workers, you no longer require an internet connection to use an application (though you will need it if you want to fetch new content — but at least it doesn’t hinder your usage of the site and you do not need to see the “page is offline message”).
The service worker checks if the resource (files, text, image, etc.) exists in its cache (your PC) and decides whether to display it to you based on the caching strategies that was set.
Another example, consider Google Docs for a moment. With service workers implementation, Google Docs could work offline more effectively by caching changes to your local PC. When the internet connection is restored, those changes will be sent back to Googles’ servers.
At present, more research and further developments are currently being worked on to extend the capabilities of service workers.
Server-side caching, as the name suggests is data that is cached on the server. Data can be cached at any point or time on the server where applicable. This allows your users to access the information faster thus improving the user experience.
The list below represents some of the common server-side caching techniques for server-side caching.
This process can be included in the design of a web application that generates data on websites with databases. This is used to achieve better performance and scalability.
Database caching provides advantages for web developers and ultimately your users. Some of these advantages are:
Object cache revolves around the storing of objects (Word Documents, Videos, Images, etc.) locally on your computer so that it does not have to be constantly retrieved based on the number of times you’ve requested for it. It saves your bandwidth and data.
An example would be an attachment that you’ve received in your email. You’ve downloaded the mail and naturally the attachment too. Instead of request the file from the mail server, each time you open it, it is stored in your computer’s temp folder.
Now think about YouTube: Think of how many times you go to Youtube, and how much it would have to serve you if it had to build that webpage from the ground up each time — multiply that by the 2 billion people who uses Youtube daily. Without object caching, this would definitely be an impossible feat, requiring time and energy wasted.
Page cache is similar to the other caches except that this cache stores the full web pages to be served later to the user. This data is stored in an unused section of the user’s RAM memory. The computer memory would still display the section as available or free. If the data is read again later, it will be read from this cache within memory — which is extremely fast and a provides a great user experience.
CDN services work by ensuring your static website content is added to proxy servers (called Edge Servers) that are globally distributed. This allow your users from all over the world to download your site content faster through the use of Edge servers.
For example, if your server is situated in Singapore but your users/visitors are located in Germany, they (users in Germany) might experience some network latency. But with an Edge server situated in Germany (and around the world if you purchase the CDN service), they (users in Germany) would not experience this latency issue despite having the Origin server located in Singapore.
Using a CDN caching service would also help to reduce costs by alleviating the pressure off the original server — low utilisation = lesser fees (especially if you’re on cloud-based), and puts the focus on the smaller Edge servers located globally where your visitors can access data locally.
I hope the information above has shed some light on caching, how it works and the various types of caching that exists. I also hope you find the information above informative and got to learn something new.
If you are an advocate for user experience, understanding cache and knowing how to harness it’s strengths and weaknesses would ensure a better user experience for your website/product.
Please share this content with others if you think it might help them or just for the fun of it. 🙂