+
+ | Directive |
+ Description |
+
+
+ max-age |
+ Indicates the number of seconds that a resource can be cached for relative to the current time. For example max-age=86400. |
+
+
+ public |
+ Indicates that any cache can store the response, including the Browser and the CDN. This is assumed by default. |
+
+
+ no-cache |
+ A cached resource must be revalidated before its use, via a conditional request, even if it is not marked as stale. |
+
+
+ must-revalidate |
+ A stale cached entry must be revalidated before its use, via a conditional request. |
+
+
+ no-store |
+ Indicates that the response must not be cached. |
+
+
+ private |
+ The response is intended for a specific user and should not be stored by shared caches such as CDNs. |
+
+
+ immutable |
+ Indicates that the cached entry will never change during its TTL and that revalidation is not necessary. |
+
+
+
+The `max-age` directive is the most commonly found with 62.2% of Desktop requests including a `Cache-Control` response header with this directive.
+
+{{ figure_markup(
+ image="cache-control-directives.png",
+ caption="Usage of `Cache-Control` directives.",
+ description="A bar chart showing the distribution of 12 `Cache-Control` directives. The usage for desktop ranges from 62.2% for `max-age`, 29.7% for `public`, 16.5% for `no-cache`, 12.2% for `must-revalidate`, 9.6% for `no-store`, 9.5% for `private`, 3.5% for `immutable`, 1.8% for `no-transform`, 2.3% for `stale-while-revalidate`, 1.6% for `s-maxage`, 0.9% for `proxy-revalidate` , and 0.2% for `stale-if-error`. Usage for mobile ranges from 60.7% for `max-age`, 29.7% for `public`, 15.6% for `no-cache`, 13.2% for `must-revalidate`, 10.3% for `no-store`, 10.1% for `private`, 3.9% for `immutable`, 1.6% for `no-transform`, 2.4% for `stale-while-revalidate`, 1.4% for `s-maxage`, 1.0% for `proxy-revalidate` , and 0.2% for `stale-if-error`.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=1359015817&format=interactive",
+ height=436,
+ sheets_gid="1944529311",
+ sql_file="cache_control_directives.sql"
+) }}
+
+Compared to 2020, `max-age` adoption increased by 2% on Desktop, along with most of the top seven directives in the above chart.
+
+The `immutable` directive is relatively new and can significantly improve cacheability for certain types of requests. However, it is still only supported by a few browsers, and we see most requests coming from from Host Networks like *Wix* with 16.4%, *Facebook* with 8.6%, *Tawk* with 2.8%, and *Shopify* with 2.4%.
+
+The most misused `Cache-Control` directive continues to be `set-cookie`, used for 0.07% of total *directives* for Desktop and 0.08% for Mobile. However, we are pleased to see a meaningful 0.16% reduction of usage from 2020.
+
+When we take a look when `no-cache`, `max-age=0` and `no-store` are used together, we also see a growing trend year after year, in which `no-store` is specified with either/both of `no-cache` and `max-age=0`, the `no-store` directive takes precedence, and the other directives are ignored. Driving more awareness around using these *directives* during larger conferences could help avoid accidentally wasted bytes.
+
+Fun fact: The most common `max-age` value is 30 days, and the largest value is 51 trillion years.
+
+{{ figure_markup(
+ caption="Largest recorded value for `max-age`",
+ content="51 trillion years",
+ classes="medium-number",
+ sheets_gid="529870849",
+ sql_file="todo.sql"
+) }}
+
+### `304` Not Modified status
+
+When it comes to size, `304 Not Modified` responses are much smaller than `200 OK` responses, so it follows that page performance can be sped up by only delivering the necessary size of data. This is where correctly using conditional requests comes in because revalidation, and data savings can be done by using either an `Etag` or `Last-Modified` header.
+
+The `Last-Modified` response header works in conjunction with the `If-Modified-Since` request header to let the browser know if any changes have been made to the requested file.
+
+{{ figure_markup(
+ image="http-304-by-caching-strategy.png",
+ caption="HTTP 304 response rate by caching strategy.",
+ description="A bar chart of HTTP 304 response rate by caching strategy. The usage for desktop ranges from 18% for Expected with `If-Modified-Since`, 94% for Actual with `If-Modified-Since`, 84% for Expected with `ETag`, and 88% for Actual with `ETag`. Usage for mobile ranges from 13% for Expected with `If-Modified-Since`, 86% for Actual with `If-Modified-Since`, 91% for Expected with `ETag`, and 88% for Actual with `ETag` ",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=1965033294&format=interactive",
+ sheets_gid="1136058277",
+ sql_file="valid_if_none_match_returns_304.sql"
+) }}
+
+We saw the distribution of 304 responses increase by 7.7% for `If-Modified-Since` between 2020 and 2021. This shows that the community is capitalizing on these data savings.
+
+### Validity of date strings
+
+The three main HTTP headers used to represent timestamps, `Date`,`Last-Modified` and `Expires` all use a date formatted string. The `Date` HTTP response header is almost always generated automatically by the web server, meaning that invalid values are extremely rare. Still, in the event that the date is set incorrectly it can affect cacheability on the response on which it is served.
+
+{{ figure_markup(
+ image="invalid-date-formats.png",
+ caption="Percent of responses with invalid date formats.",
+ description="A bar graph showing percentage of response headers with invalid date formats broken down by header. The percent of responses for desktop range from 2.8% for `Expires`, 0.7% for `Last-Modified`, and 0.1% for `Date`. The percent of responses for mobile range from 3.2% for `Expires`, 0.9% for `Last-Modified`, and 0.0% for `Date`.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=383751268&format=interactive",
+ sheets_gid="1680471251",
+ sql_file="invalid_last_modified_and_expires_and_date.sql"
+) }}
+
+Between 2020 and 2021, the percent using invalid `Date` improved by 0.5% but worsened for `Last-Modified` and `Expires` showing that it was related to how the date was set on caching.
+
+This shows us that automation of the `Date` header could benefit from further attention...?
+
+### `Vary`
+
+An essential step in caching a resource is understanding if it was previously cached. The browser typically uses the url as the cache key. At the same time, requests with similar urls but different `Accept-Encoding` could be cached incorrectly. That's why we use the `Vary` header to instruct the browser to add a value of one or more headers to the cache key.
+
+{{ figure_markup(
+ image="vary-directives.png",
+ caption="Usage of `Vary` directives.",
+ description="A bar chart showing the distribution of `Vary` header. 90.4% of desktop responses use `Accept-Encoding`, much smaller values for the rest with 10.2% for `User-Agent`, approximately 10.5% for `Origin`, and 5.0% for `Accept`. 90.3% of mobile responses use of `Accept-Encoding`, much smaller values for the rest with 10.9% for `User-Agent`, approximately 10.1% for `Origin`, and 4.8% for `Accept`.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=1279247484&format=interactive",
+ height=436,
+ sheets_gid="1033782866",
+ sql_file="vary_directives.sql"
+) }}
+
+The most popular `Vary` header is `Accept-Encoding` with 90.3% usage, followed by `User-Agent` with 10.9%, `Origin` with 10.1%, and `Accept` with 4.8%.
+
+This shows a 1.5% decrease in use of `Accept-Encoding` from 2020.
+
+{{ figure_markup(
+ caption="Percent of mobile responses that set the `Vary` header.",
+ content="46.3%",
+ classes="big-number",
+ sheets_gid="1033782866",
+ sql_file="vary_directives.sql"
+) }}
+
+It's important to point out that only 46.25% of total requests audited use the `Vary` header, but when compared to 2020, we see an overall increase by 2.85%.
+
+{{ figure_markup(
+ caption="Percent of mobile responses with the `Vary` header that also set `Cache-Control`.",
+ content="83.4%",
+ classes="big-number",
+ sheets_gid="1033782866",
+ sql_file="vary_directives.sql"
+) }}
+
+Of the requests using the `Vary` header, 83.4% also have the `Cache-control`. This shows us a 2.1% improvement from 2020.
+
+## Setting cookies on cacheable responses
+
+In the 2020 Caching chapter, we were reminded to be aware of using `set-cookie` with cacheable responses because only 4.9% of responses used the `private` directive, putting a user's private data at risk of being accidentally served to a different user via a CDN.
+
+{{ figure_markup(
+ image="cacheable-set-cookie.png",
+ caption="Percent of cacheable responses that use `Set-Cookie`.",
+ description="TODO",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=261881101&format=interactive",
+ sheets_gid="104392613",
+ sql_file="set_cookie.sql"
+) }}
+
+In 2021, we see an increase in awareness regarding `set-cookie` and caching coexisting. While still only 5% of web pages are using the private directive with `set-cookie`, the total number of cacheable `set-cookie` responses decreased by 4.41%.
+
+## What type of content are we caching?
+
+Font, CSS, and Audio files are over 99% cacheable, with almost 100% of pages currently caching fonts. This could be in part due to their static nature, making them prime choices for caching.
+
+{{ figure_markup(
+ image="caching-by-resource-type.png",
+ caption="The percent of requests that use caching strategies by resource type.",
+ description="A bar chart showing distribution of cacheable resource types. In desktop responses, 99.8% of font, 99.3% of CSS, 99.3% of audio, 98.8% of video, 95.3% of scripts, 91.3% of images, 80.2% of xml, 72.6% of html, 65.0% of other types, and 29.8% of text is cacheable. In mobile responses, 99.8% of font, 99.1% of CSS, 99.0% of audio, 98.8% of video, 95.1% of scripts, 89.9% of images, 81.0% of xml, 76.6% of html, 65.4% of other types, and 29.5% of text is cacheable.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSGgVDZ9RkFQLmk5C3_siIcH-8macUEZMobcC0o1z8frYj8NOkI_C2s_yE5ppMdxDAD5INjNsCBa3h1/pubchart?oid=2036781114&format=interactive",
+ height=436,
+ sheets_gid="1202769738",
+ sql_file="non_cacheable_by_resource_type.sql"
+) }}
+
+However, some of our most commonly used resources are non-cacheable, likely due to their dynamic nature. Notably, HTML saw the highest percentage of non-cacheable resources at 23.4%, followed closely by Images with 10.1%.
+
+When we compare the mobile data between 2020 and 2021, we notice a 5.1% increase in cacheable HTML. This tells us we may be moving towards better usage of our CDNs to cache HTML pages, like those generated by Server-Side Rendered applications. Pages are typically generated by SSR if the content of a particular web page doesn't change frequently. The url can potentially serve the same HTML for weeks or even months, making that content highly cacheable.
+
+Taking a look at the Median TTL across all resource types, we see that even if we cache a similar percentage in total, there is a much longer cache for mobile, particularly for HTML, audio and video.
+
+