What is HTTP Caching and How Does it Work?

HTTP Caching is the solution that we need. The modern-day web is less about who makes the best service, and more about who delivers it efficiently. With the content available on the internet expanding on an exponential basis, the amount of resources required to serve a user with a particular request is just too high. It is extremely infeasible to keep hitting the database for resources that have just recently been fetched. This is where HTTP or HTTPS comes in with a solution called caching.

What is HTTP Caching?

HTTP Caching is the process in which the browser keeps pre-fetched copies of various resources saved on the user’s device so that they can be retrieved faster for subsequent requests. This may include any type of resources like files, photos, CSS/JS libraries, or data previously received from the server.

Is HTTP Caching Needed?

Yes, Absolutely !. Caching serves multiple purposes. First of all, caching resources lowers the number of resources that need to be fetched for every request thereby making browsing faster. Secondly, servers get some relief since they can just return a cached response instead of generating the exact same resources if no new content is available. For a simple example, let’s say you opened up a website that was using some external CSS and JS libraries that come around 3-400 kilobytes.

Now, without caching you would have to load those libraries every time you visited a page on that website. But with proper caching, reloading the exact same libraries can be avoided thereby improving performance.

How HTTP Caching Works

HTTP caching works on the basic principles of HTTP headers. If you know what HTTP is, you probably know that an HTTP request has a head and a body. The head section houses meta-information about the request while the body contains the actual data.

The caching mechanism uses HTTP headers to declare, identify, and act upon resources and how they should be cached. The header we are talking about here is Cache-Control. A Cache-Control header is sent from the server and it directs the browsers on what content should be cached and for how long. Here are some standard cache control headers that can be sent from the server.

Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: public
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-Control: s-maxage=<seconds>

These are various directives that tell the browser how to cache a particular resource, these headers need to be sent out for every request made. These headers direct on exactly which resource can be cached by whom and how long is it valid, These headers also define when to revalidate the resource, etc. Also, The client need not worry about caching since everything is handled by the browser itself. I strongly suggest you read this article by Mozilla to get an in-depth understanding of HTTP caching headers.

Conclusion

HTTP Caching is the need of the hour. However, improper implementation of caching can result in stale content and annoy users. Caching if implemented in the right way can increase user interaction, reduce server resource consumption, and save a significant amount of data transfers for the server and clients as well.