What is HTTP Caching
What is HTTP Caching
The browser cache is a mechanism used by browsers to store locally web page resources. This adds performance gains, minimises bandwidth consumption and overall creates a snappier experience. In this article, we explain how browser caching works and how to implement it on your website.
The performance of web sites and applications can be significantly improved by reusing previously fetched resources. Web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource. By making use of HTTP caching, Web sites become more responsive.
What is the browser cache?
The cache is a software or hardware component that is used to temporarily store values for faster future access. The browser cache is a small database of files that contains downloaded web page resources, such as images, videos, CSS, Javascript, and so on. The basic idea behind it is the following;
The browser requests some content from the web server. If the content is not in the browser cache then it is retrieved directly from the web server. If the content was previously cached, the browser bypasses the server and loads the content directly from its cache.
Why need HTTP Cache
Fetching resources over the network is both slow and expensive. Large responses require many roundtrips between the browser and the server. Your page won't load until all of its critical resources have downloaded completely. If a person is accessing your site with a limited mobile data plan, every unnecessary network request is a waste of their money. Using HTTP Cache we can reduce this issue.
How HTTP Cache works
The browser requests some content from the web server. If the content is not in the browser cache then it is retrieved directly from the web server. If the content was previously cached, the browser bypasses the server and loads the content directly from its cache.
How to check cheche Works
You can easily test to see your browser caching rules, by using, for example, the Firefox web console or Chrome's Developer Tools.
- Click on the hamburger icon at the top right.
- Select More Tools > Developer Tools
- Enter your URL into the address bar and hit Enter.