Updated May 25, 2023
Introduction to HTTP Caching
I am sure you have noticed that it takes some time to load when you open a website for the first time. However, when you open it again after some time, the site loads much faster. Imagine if a site took the same time to load every time; how slow browsing would feel. Well, this is all thanks to a nifty idea called HTTP Caching.
What is HTTP Caching?
HTTP caching involves storing commonly or frequently used data in a readily accessible location. As a result, accessing frequently needed data becomes much faster because the computer doesn’t have to reach too far. Caching comes into play in web browsing when web browsers like Chrome store a copy of a website or web app on the local storage. Caching a website eliminates the need for the web browser to redownload all the server data, resulting in faster browsing.
For instance, once a browser downloads a website’s CSS file, there is no need to download it again for every subsequent session page. Many JavaScript files, images (such as the site’s logo and social media icons), and even certain dynamic content can enable caching by utilizing Cache headers.
Cache Headers in HTTP
HTTP Caching has two major cache headers; the first one is called “Cache-Control,” and the second one is called “Expire.”
1. Cache-Control
You can consider Cache-Control as a Switch to toggle the caching in the user browser. Adding this header enables caching for all supported web browsers. If this header is not present, no browser will keep a cache of the web page contents even if it helps to cache. The Cache-control has two types of privacy settings, the first one is Public and the second one is Private.
In the case of the Public, the resources can be cached by any intermediate proxy, such as Content Delivery Networks (CDN). When a Cache-Control header with a Private response is included, it informs the browser that caching will only be performed for a single user and not for any intermediate proxy.
The value “max-age” in the Cache-Control header sets the time for the content to be cached. This time is in seconds.
Cache-Control:public, max-age=31536000
2. Expires
The Expires header is used when Cache-Control is present in the code. This simple HTTP Cache header sets a date from which any cache resource is considered invalid. Once the cache expires and the user loads the website, a web browser will request all page content again.
Conditional Requests
The discussed headers simply inform the browser about when to retrieve the data from the web server. Conditional Requests, on the other hand, tell the browser how to retrieve them. Conditional Requests instruct a browser on how to query the server to determine if the cached data is still valid or outdated.
In this process, the browser sends some data about resources it has cached into its memory, and after reading this data, the server decides if the data is outdated or not.
1. Time-Based Requests
In time-based requests, we check if the requested resource has changed on the server or not. If the cached copy in the browser is the latest, the server will return code 304.
To set Conditional Requests on a time basis, you can use “Last-Modified” in the response header.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
2. Content-Based
In Content-Based requests, we check the server and cache copies for the MD5 Hash (or any other viable option). This tells if the data is the same; if the data is different, the MD5 checksum will not match, and the server will send a fresh copy of resources.
This is done via “ETag” in the header. Its value of it is the digestion of resources.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Visibility
Almost all modern browsers include development-related tools that let you check resources, source code, and other web page aspects. Among them, you can find a tool to see the headers returned by any application.
To see these headers on Google Chrome, you can right-click on an empty web page area and click on “Inspect” or press CTRL+SHIFT+I to open DevTools. In this tool, click the Network tab and press CRTL+R to reload to see all the page headers.
Use Cases in HTTP Caching
Below are some uses cases of HTTP Caching which are as follows:
1. For Static Assets
You can opt to aggressively cache the contents for static assets of a page, such as images, JS Files, and any CSS files. Not having to load these files will result in impressive performance improvement. For this use case, go for the Cache-Control Header with a max-age value of more than a month or even a year.
Cache-Control:public; max-age=31536000
2. For Dynamic Contents
In the case of a page’s dynamic contents, you will need to think about what files the browser should cache and for how long. If the content changes frequently, you must ensure that the time duration you pick for caching won’t result in any problems for the user.
3. Caching of Private Content
As we discussed in the Cache-Control section, if the content of a page is private, you can prevent it from being cached by intermediate proxies like CDNs by including the “Cache-Control: private” header. Another safer approach is not to cache any private content at all.
Implementing HTTP Caching
Now that you know what HTTP Caching is and how it works, let’s look at how you can implement it on your website. The implementation of HTTP Caching is a bit different for different server types. In our case, let us look at implementing caching via the .htaccess file.
To enable the Caching on-site, you can add the headers in the .htaccess file on your server, for example:
FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
The above will cache all to pdf, Flv, jpg, and other formats mentioned in the “File Match” for one year.
Conclusion
HTTP Caching is one of the essential tricks that make browsing your site a faster experience for your visitors, and now that you can see how it works, you can implement it on your sites and web apps to make them faster for your users and save your server bandwidth.
Recommended Articles
This has been a guide to HTTP Caching. Here we discuss the implementation, conditional requests, cache header, and use cases of HTTP. You can also go through our other suggested articles to learn more –
