It is essential to talk about CDNs at this stage because they are used to deliver most of the static content like images, JS, and CSS. Now, let's take it a step further by bringing Content Delivery Networks (CDNs) in the picture. We looked at a simple example of how the browser caches a file and uses it for subsequent requests. GET app.css, object found in the local cache Caching with Content Delivery Networks in play The network request is never made, the file is accessed from the local cache, and the styles are applied very quickly. Since the browser has this particular resource available in its local cache, it won't even go to the server. The browser again parses the HTML and come across the same CSS file on this page as well. Now, let's say you open another page on the same website after a few hours. GET app.css, no object found in local cache Later in this guide, we cover how the server sends this instruction to the browser. The browser issues a request to the server for this file, the server returns the file and also tells the browser to cache it for 30 days. When the browser parses this HTML, it identifies that a CSS resource needs to load from. Suppose you open a webpage, and the server returns below HTML. Undoubtedly this is a massive saving for repeat page views and visits. At the same time, caching also reduces the number of requests and data transfer from your servers. This is because the user now accesses the file from his system instead of getting downloaded over the network. It reduces the time it takes for the user to view the images or Javascript or CSS files. In the context of websites and apps, caching is defined as storing content in a temporary storage, like that on the user's browser or device or on an intermediate server, to reduce the time it takes to access that file.Īccording to HTTP Archive, among the top 300,000 sites, the user's browser can cache nearly half of all the downloaded content.

Lowest level private cache