<!DOCTYPE html><html><head><metacharSet="UTF-8"/><title>HTTP Caching</title><metaname="description"content="Everything you need to know about web caching"/><metaname="author"content="Kamran Ahmed"/><metaname="keywords"content="roadmap,developer roadmaps,developer roadmap,frontend developer,frontend developer roadmap,frontend,frontend roadmap,backend,backend developer,backend developer roadmap,devops,devops roadmap,fullstack developer roadmap,guide to becoming a developer,sre roadmap,sre,operations roadmap,qa roadmap,android roadmap,android developer roadmap,react roadmap,react developer roadmap,dba roadmap,postgresql dba roadmap"/><metaname="viewport"content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"/><metahttp-equiv="Content-Language"content="en"/><metaproperty="og:title"content="HTTP Caching"/><metaproperty="og:description"content="Everything you need to know about web caching"/><metaproperty="og:image"content="https://roadmap.sh/brand-square.png"/><metaproperty="og:url"content="https://roadmap.sh"/><metaproperty="og:type"content="website"/><metaproperty="article:publisher"content="https://facebook.com/kamranahmedse"/><metaproperty="og:site_name"content="roadmap.sh"/><metaproperty="article:author"content="Kamran Ahmed"/><metaname="twitter:card"content="summary"/><metaname="twitter:site"content="@kamranahmedse"/><metaname="twitter:title"content="HTTP Caching"/><metaname="twitter:description"content="Everything you need to know about web caching"/><metaname="twitter:image"content="https://roadmap.sh/brand-square.png"/><metaname="twitter:image:alt"content="roadmap.sh"/><metaname="mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/><linkrel="apple-touch-icon"sizes="180x180"href="/manifest/apple-touch-icon.png"/><metaname="msapplication-TileColor"content="#101010"/><metaname="theme-color"content="#848a9a"/><linkrel="manifest"href="/manifest/manifest.json"/><linkrel="icon"type="image/png"sizes="32x32"href="/manifest/icon32.png"/><linkrel="icon"type="image/png"sizes="16x16"href="/manifest/icon16.png"/><linkrel="shortcut icon"href="/manifest/favicon.ico"type="image/x-icon"/><linkrel="icon"href="/manifest/favicon.ico"type="image/x-icon"/><scriptasync=""src="https://www.googletagmanager.com/gtag/js?id=UA-139582634-1"></script><script>
</code></pre><pclass="sc-bdvvtL kiIUjN">It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. </p><pclass="sc-bdvvtL kiIUjN">Although, <code>Expires</code> header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. <code>Cache-Control</code>. </p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">Pragma</h4><pclass="sc-bdvvtL kiIUjN">Another one from the old, pre HTTP/1.1 days, is <code>Pragma</code>. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see <code>Pragma: no-cache</code> being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather <code>Cache-Control</code> header should be used to control the caching.</p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">Cache-Control</h4><pclass="sc-bdvvtL kiIUjN">Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the <code>Expires</code> header.</p><pclass="sc-bdvvtL kiIUjN">Value for the <code>Cache-Control</code> header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. </p><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">private</h5><pclass="sc-bdvvtL kiIUjN">Setting the cache to <code>private</code> means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser)</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: private
</code></pre><pclass="sc-bdvvtL kiIUjN">Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. </p><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">public</h5><pclass="sc-bdvvtL kiIUjN">If set to <code>public</code>, apart from being cached by the client, it can also be cached by the proxies; serving many other users</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: public
</code></pre><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">no-store</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>no-store</code></strong> specifies that the content is not to be cached by any of the caches</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: no-store
</code></pre><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">no-cache</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>no-cache</code></strong> indicates that the cache can be maintained but the cached content is to be re-validated (using <code>ETag</code> for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: max-age=3600, no-cache, public
</code></pre><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">max-age: seconds</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>max-age</code></strong> specifies the number of seconds for which the content will be cached. For example, if the <code>cache-control</code> looks like below:</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: max-age=3600, public
</code></pre><pclass="sc-bdvvtL kiIUjN">it would mean that the content is publicly cacheable and will be considered stale after 60 minutes</p><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">s-maxage: seconds</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>s-maxage</code></strong> here <code>s-</code> prefix stands for shared. This directive specifically targets the shared caches. Like <code>max-age</code> it also gets the number of seconds for which something is to be cached. If present, it will override <code>max-age</code> and <code>expires</code> headers for shared caching.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: s-maxage=3600, public
</code></pre><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">must-revalidate</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>must-revalidate</code></strong> it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. <code>must-revalidate</code> avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. </p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Cache-Control: max-age=3600, public, must-revalidate
</code></pre><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">proxy-revalidate</h5><pclass="sc-bdvvtL kiIUjN"><strong><code>proxy-revalidate</code></strong> is similar to <code>must-revalidate</code> but it specifies the same for shared or proxy caches. In other words <code>proxy-revalidate</code> is to <code>must-revalidate</code> as <code>s-maxage</code> is to <code>max-age</code>. But why did they not call it <code>s-revalidate</code>?. I have no idea why, if you have any clue please leave a comment below. </p><h5class="sc-dkPtRN sc-gKclnd dKUOdJ dZmLzd">Mixing Values</h5><pclass="sc-bdvvtL kiIUjN">You can combine these directives in different ways to achieve different caching behaviors, however <code>no-cache/no-store</code> and <code>public/private</code> are mutually exclusive. </p><pclass="sc-bdvvtL kiIUjN">If you specify both <code>no-store</code> and <code>no-cache</code>, <code>no-store</code> will be given precedence over <code>no-cache</code>.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">; If specified both
Cache-Control: no-store, no-cache
; Below will be considered
Cache-Control: no-store
</code></pre><pclass="sc-bdvvtL kiIUjN">For <code>private/public</code>, for any unauthenticated requests cache is considered <code>public</code> and for any authenticated ones cache is considered <code>private</code>.</p><h3class="sc-dkPtRN sc-eCImPb dKUOdJ cabxUq">Validators</h3><pclass="sc-bdvvtL kiIUjN">Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose.</p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">ETag</h4><pclass="sc-bdvvtL kiIUjN">Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating <code>"give me this resource if ETag is not same as the ETag that I have"</code> and the content is downloaded only if the etags do not match. </p><pclass="sc-bdvvtL kiIUjN">Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">ETag: "j82j8232ha7sdh0q2882" - Strong Etag
ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)
</code></pre><pclass="sc-bdvvtL kiIUjN">A strong validating ETag means that two resources are <strong>exactly</strong> same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example.</p><pclass="sc-bdvvtL kiIUjN">Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in <code>If-None-Match</code> header.</p><pclass="sc-bdvvtL kiIUjN">Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of <code>abc123xyz</code>. After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in <code>if-none-match</code> header</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">If-None-Match: "abc123xyz"
</code></pre><pclass="sc-bdvvtL kiIUjN">Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of <code>304 Not Modified</code> which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has.</p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">Last-Modified</h4><pclass="sc-bdvvtL kiIUjN">Server might include the <code>Last-Modified</code> header indicating the date and time at which some content was last modified on.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT
</code></pre><pclass="sc-bdvvtL kiIUjN">When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called <code>If-Modified-Since</code> to server to get the updated <code>Last-Modified</code> date; if it matches the date that the client has, <code>Last-Modified</code> date for the content is updated to be considered fresh for another <code>n</code> seconds. If the received <code>Last-Modified</code> date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z">If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT
</code></pre><pclass="sc-bdvvtL kiIUjN">You might be questioning now, what if the cached content has both the <code>Last-Modified</code> and <code>ETag</code> assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if <code>ETag</code> matches the newly retrieved one and so does the <code>Last-Modified</code> date. If either the <code>ETag</code> does not match or the <code>Last-Modified</code> is greater than the one from the server, content has to be downloaded again. </p><h3class="sc-dkPtRN sc-eCImPb dKUOdJ cabxUq">Where do I start?</h3><pclass="sc-bdvvtL kiIUjN">Now that we have got <em>everything</em> covered, let us put everything in perspective and see how you can use this information.</p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">Utilizing Server</h4><pclass="sc-bdvvtL kiIUjN">Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. </p><pclass="sc-bdvvtL kiIUjN"><strong>For example</strong>, if you are using Apache and you have your static content placed at <code>/static</code>, you can put below <code>.htaccess</code> file in the directory to make all the content in it be cached for an year using below</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z"># Cache everything for an year
Header set Cache-Control "max-age=31536000, public"
</code></pre><pclass="sc-bdvvtL kiIUjN">You can further use <code>filesMatch</code> directive to add conditionals and use different caching strategy for different kinds of files e.g.</p><preclass="sc-furwcr jiGIaj language-html"><codeclass="chakra-code language-html css-4m8w8z"># Cache any images for one year
</code></pre><pclass="sc-bdvvtL kiIUjN">Or if you don't want to use the <code>.htaccess</code> file you can modify Apache's configuration file <code>http.conf</code>. Same goes for Nginx, you can add the caching information in the location or server block. </p><h4class="sc-dkPtRN sc-jRQBWg dKUOdJ gRXaYU">Caching Recommendations</h4><pclass="sc-bdvvtL kiIUjN">There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea</p><ulclass="sc-egiyK gfrORe"><liclass="sc-bqiRlB xTMXv">You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. <code>style.ju2i90.css</code>) so that the cache is automatically rejected whenever the files are updated.
Also it should be noted that you should not cross the upper limit of one year as it <ahref="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9"target="_blank"rel="nofollow"class="sc-crHmcD gJMBjK">might not be honored</a></li><liclass="sc-bqiRlB xTMXv">Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP.</li><liclass="sc-bqiRlB xTMXv">Always add the validators (preferably ETags) in your response.</li><liclass="sc-bqiRlB xTMXv">Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all.</li><liclass="sc-bqiRlB xTMXv">Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale. </li><liclass="sc-bqiRlB xTMXv">Test and monitor the caching headers being served by your site. You can use the browser console or <code>curl -I http://some-url.com</code> for that purpose. </li></ul><pclass="sc-bdvvtL kiIUjN">And that about wraps it up. Stay tuned for more!</p><span></span></div></div><styledata-emotion="css zeuzl6">.css-zeuzl6{background:var(--chakra-colors-white);border-top-width:1px;padding-top:45px;padding-bottom:60px;text-align:center;}@mediascreenand(min-width:30em){.css-zeuzl6{padding-top:45px;padding-bottom:60px;}}@mediascreenand(min-width:48em){.css-zeuzl6{padding-top:70px;padding-bottom:90px;}}</style><divclass="css-zeuzl6"><divclass="chakra-container css-nm5t63"><styledata-emotion="css 482acf">.css-482acf{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:25px;line-height:1.33;margin-bottom:10px;}@mediascreenand(min-width:30em){.css-482acf{font-size:25px;margin-bottom:10px;}}@mediascreenand(min-width:48em){.css-482acf{font-size:35px;line-height:1.2;margin-bottom:20px;}}</style><h2class="chakra-heading css-482acf">Open Source</h2><styledata-emotion="css tmji1h">.css-tmji1h{line-height:26px;font-size:15px;margin-bottom:20px;}@mediascreenand(min-width:30em){.css-tmji1h{font-size:15px;}}@mediascreenand(min-width:48em){.css-tmji1h{font-size:16px;}}</style><pclass="chakra-text css-tmji1h">The project is OpenSource,<styledata-emotion="css 1om4i6h">.css-1om4i6h{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2pxsolidtransparent;outline-offset:2px;color:inherit;border-bottom-width:1px;font-weight:600;}.css-1om4i6h:hover,.css-1om4i6h[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-1om4i6h:focus,.css-1om4i6h[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><atarget="_blank"class="chakra-link css-1om4i6h"href="https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories">7th most starred project on GitHub</a> and is visited by hundreds of thousands of developers every month.</p><iframesrc="https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large"frameBorder="0"scrolling="0"width="170"height="30"style="margin:auto;margin-bottom:30px"title="GitHub"></iframe><styledata-emotion="css mz2q9v">.css-mz2q9v{line-height:25px;font-size:15px;margin-bottom:15px;}@mediascreenand(min-width:30em){.css-mz2q9v{line-height:25px;font-size:15px;}}@mediascreenand(min-width:48em){.css-mz2q9v{line-height:26px;font-size:16px;}}</style><pclass="chakra-text css-mz2q9v">A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in som
