<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#cache-behaviors">Cache behaviors</a>
<ul>
<li><a href="#default-cache-behavior">Default Cache Behavior</a></li>
<li><a href="#ordered-cache-behaviors">Ordered Cache Behavior</a></li>
</ul>
</li>
<li><a href="#caching-ttl-configurations">Caching TTL configurations</a>
<ul>
<li><a href="#minimum-ttl-and-cache-control-headers">Minimum TTL and Cache-Control headers</a></li>
<li><a href="#response-header-policy">Response header policy</a></li>
</ul>
</li>
<li><a href="#cache-behaviors">Cache behaviors</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>Amazon cloudfront caching is no different than other caching technologies.</p>
<p>However, like many services within AWS, there are a few subtle nuances that you should know in order get it to do what you want it to do.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-cache-options.png" alt="Cloudfront cache options" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Cloudfront cache options</blockquote>
  </div>
</div>
<p>When we talk about caching, there are two things that we are typically interested in:</p>
<ol>
<li>
<p>What is being cached</p>
</li>
<li>
<p>The cache expiration (TTL)</p>
</li>
</ol>
<p>Of course, there are other options but these are by far the most important.</p>
<p>What are our option for changing the cache expiration (TTL) ?</p>
<p><strong>The options available are:</strong></p>
<ol>
<li>
<p><strong>HTTP Caching (origin server)</strong> - This is the <code class="language-">Cache-Control
</code> value returned from the origin server</p>
</li>
<li>
<p><strong>Cache policy caching</strong> - The cache policy has caching configurations (max, min, default ttl)</p>
</li>
<li>
<p><strong>Cache behavior</strong> - The cache policy has caching configurations (max, min, default ttl)</p>
</li>
<li>
<p><strong>Response header policy</strong> - The response header policy can change the <code class="language-">Cache-Control
</code> settings for the viewer request</p>
</li>
</ol>
<p>These are the few options that can affect the cache expiration (TTL).</p>
<p>In my previous articles, I talked these topics in-depth.</p>
<p><strong>If you would like a review of these topics, feel free to check it here:</strong></p>
<ul>
<li>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-an-overview-of-policies#cache-policy" target="_blank" rel="nofollow noopener noreferrer">Cloudfront cache policy</a></p>
</li>
<li>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-an-overview-of-policies#response-header-policy" target="_blank" rel="nofollow noopener noreferrer">Cloudfront response header policy</a></p>
</li>
<li>
<p><a href="https://www.jerrychang.ca/writing/http-caching-the-6-core-concepts" target="_blank" rel="nofollow noopener noreferrer">HTTP caching: The 6 core concepts</a></p>
</li>
</ul>
<p>In this guide, we’ll start off by going over the cache behavior, and how they relate to the cloudfront caching.</p>
<p>Then, dig into the nuances of how cloudfront handle resolution of multiple options being set on the cache expiration (TTL).</p>
<p>Let’s dive right in!</p>
<h2 id="cache-behaviors"><a href="#cache-behaviors" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Cache behaviors</h2>
<p>Cache behavior has a set of configuration that is used for caching, and it is matched based on a configured URL path pattern.</p>
<p>This is different from Cloudfont’s cache policy; This policy’s function is to define the cache key.</p>
<p>You can think of the cache behavior as a container that hold the rules which are applied to a matched request.</p>
<p>Further more, these behaviors are divided into two types.</p>
<p><strong>Two types of cache behaviors:</strong></p>
<ul>
<li>
<p>Default Cache behavior</p>
</li>
<li>
<p>Ordered Cache Behavior</p>
</li>
</ul>
<p>As far as the configuration go, both of these are identical.</p>
<p><strong>Here are some settings:</strong></p>
<ul>
<li>Path pattern</li>
<li>Origin request policy Id</li>
<li>cache policy Id</li>
<li>Default TTL</li>
<li>Min TTL</li>
<li>Allowed Methods (ie <code class="language-">GET
</code>, <code class="language-">HEAD
</code>)</li>
<li><a href="https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_CacheBehavior.html" target="_blank" rel="nofollow noopener noreferrer">many more</a></li>
</ul>
<p>These two are very similar but the function they perform is slightly different. Their name actually describe their function pretty well.</p>
<h3 id="default-cache-behavior"><a href="#default-cache-behavior" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Default Cache behavior</h3>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-default-caching-behavior.png " alt="Default caching behavior" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Example of Cloudfront’s default caching behavior</blockquote>
  </div>
</div>
<p>This cache behavior will be defined when a distribution is created, and it will automatically forward all requests to your origin server.</p>
<p>As the name suggests, it’s the default.</p>
<p>If there is no existing or non-matching cache behavior, this will be the cache behavior that is used.</p>
<p>So, it is critical to keep this behavior as general as possible because it will be used as a “baseline” for caching the requests that come into the cloudfront distribution.</p>
<p>Lastly, for the default cache behavior, you need as many of these as you have origins (ie 2 default cache behaviors for 2 origins).</p>
<blockquote class="common">
<p><b>💡 Tip: </b> When coming up with your <b>Default cache behavior</b>, make it as generic as possible.</p>
<p>Think of what is <b>the baseline</b> that you are aiming for when setting the caching in this interaction, and also try to tie that to the impact of the end-user.</p>
</blockquote>
<h3 id="ordered-cache-behaviors"><a href="#ordered-cache-behaviors" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Ordered Cache Behaviors</h3>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-ordered-caching-behavior.png " alt="Ordered caching behavior" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Example of Cloudfront’s ordered caching behavior</blockquote>
  </div>
</div>
<p>This cache behavior is defined after the distribution is created.</p>
<p>The way it works is exactly the same as the default cache beavhior.</p>
<p>The only difference is that you can have multiple ordered behaviors, and there is an ordering to the request matching.</p>
<p><strong>Here are a few key things you should know about it:</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/caching-deep-dive-ordered-cache-behavior-few-things-you-need-to-know.png" alt="Few things you need to know about the ordered cache behavior" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Few things you need to know about the ordered cache behavior</blockquote>
  </div>
</div>
<h2 id="caching-ttl-configurations"><a href="#caching-ttl-configurations" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Caching TTL configurations</h2>
<p>So, now we know more about the cache behaviors, and the places the cache expiration can be set, there is still a lingering question of...</p>
<p><strong>How do all these different caching configurations mix together in practice ?</strong></p>
<p>More specifically, which cache expiration (TTL) will be set if multiple options are used ?</p>
<p>For the most part, it is quite straight foward.</p>
<p>Cloudfront will leave any HTTP <code class="language-">Cache-Control
</code> headers sent to the client (browser) cache untouched.</p>
<p>On the other hand, when it comes to the shared cache on Cloudfront, it tries make the best decision based on the different configurations.</p>
<p>There are a few gotchas. Let’s go through them.</p>
<h3 id="minimum-ttl-and-cache-control-headers"><a href="#minimum-ttl-and-cache-control-headers" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Minimum TTL and Cache-Control headers</h3>
<p>Cloudfront treats HTTP cache directives (or instructions) as a first class citizen, meaning these rules will take precedence in most cases.</p>
<p>This is assuming that the <code class="language-">Cache-Control: max-age
</code> remains within the the minimum and maximum caching time defined in cloudfront.</p>
<p>If these limits are not defined, then <code class="language-">Cache-Control: max-age
</code> is used.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-cache-control.png" alt="Cloudfront cache control example" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Cloudfront cache control example</blockquote>
  </div>
</div>
<p>Otherwise, Cloudfront would make the choice that makes the most sense.</p>
<p><strong>The caching selection will fall into three choices:</strong></p>
<ol>
<li>
<p>Use the <code class="language-">Cache-Control
</code> within the limit range</p>
</li>
<li>
<p>If it is out of range (high), use the <strong>maximum caching ttl</strong> defined by Cloudfront caching</p>
</li>
<li>
<p>If it is out of range (low), Use the <strong>minimum caching ttl</strong> defined by Cloudfront caching</p>
</li>
</ol>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-cache-control-limits.png" alt="Cloudfront cache control: limits" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of <b> Cache-Control</b> limits with cloudfront</blockquote>
  </div>
</div>
<p>It makes a lot of sense if you think about it like this.</p>
<p>If you go by the AWS documentation, it does take a few reads of to really understand the essence of how this works.</p>
<blockquote class="common">
<b>❗️Important: </b>
<p>when storing <b> sensitive </b> (Cache-Control: no-store) and <b> personalized </b> (Cache-Control: private) be sure to check the minimum TTL setting within cloudfront.</p>
<p>This is important because if you don’t it may unintentionally cause you to cache these information in the shared cache.</p>
<p><strong>To learn more about these HTTP cache controls, please see:</strong></p>
<ul>
<li><a href="https://www.jerrychang.ca/writing/http-caching-in-practice#1-personalized-responses" target="_blank" rel="nofollow noopener noreferrer">HTTP caching: In-Practice, personalized responses</a></li>
<li><a href="https://www.jerrychang.ca/writing/http-caching-in-practice#2-sensitive-responses" target="_blank" rel="nofollow noopener noreferrer">HTTP caching: In-Practice, sensitve responses</a>.</li>
</ul>
</blockquote>
<h3 id="response-header-policy"><a href="#response-header-policy" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Response header policy</h3>
<p>Another setting that can change the cache expiration sent to the client is the response header policy.</p>
<p><strong>How does Response header policy interact with Cache-Control ?</strong></p>
<p>With response header policy, you can provide explicit option to “override” the value.</p>
<p>It will override the value from the origin server if it is set to true.</p>
<p>So, it <em>can</em> have an affect on the <code class="language-">Cache-Control
</code> depending if the override is set to true.</p>
<p>This setting will only affect the browser (client) caching and not the shared cache (cloudfront).</p>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>So, there you have it, a brief overview of how cache expiration works in Cloudfront.</p>
<p>In general, cloudfront will make the best decision when negotiating between competing caching options.</p>
<p><strong>These options are:</strong></p>
<ul>
<li>
<p><strong>HTTP Caching (origin server)</strong></p>
</li>
<li>
<p><strong>Cache policy caching</strong></p>
</li>
<li>
<p><strong>Cache behavior</strong></p>
</li>
<li>
<p><strong>Response header policy</strong></p>
</li>
</ul>
<p>When working with cloudfront, make sure to evaluate whether or not adding minimum and maximum TTL is the necessary.</p>
<p>These two options can change the way caching typically works because the TTL set through <code class="language-">Cache-Control
</code> will be bound to this limit.</p>
<p>That’s all for this guide.</p>
<p><strong>If you want to dive deeper, be sure to check out my other articles related to this topic:</strong></p>
<ul>
<li>
<p><a href="https://www.jerrychang.ca/writing/http-caching-the-6-core-concepts" target="_blank" rel="nofollow noopener noreferrer">HTTP caching: The 6 core concepts</a></p>
</li>
<li>
<p><a href="https://www.jerrychang.ca/writing/http-caching-in-practice" target="_blank" rel="nofollow noopener noreferrer">HTTP Caching: In-practice</a></p>
</li>
<li>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-an-overview-of-policies" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: An overview of policies</a></p>
</li>
</ul>
<p>Finally, if you found this helpful or learned something new, please do share this article with a friend or co-worker 🙏❤️ (Thanks!)</p>


A closer look into how caching works in Cloudfront

Jerry Chang

Go Back

Amazon Cloudfront: Caching Deep dive

Enjoy the content ?