Asset caching policy

Disclaimer

This content is paraphrased from Increasing Application Performance with HTTP Cache Headers. It's how I learn.

Summary

HTTP caching occurs when the browser stores local copies of web resources for faster retrieval the next time the resource is required. As your application serves resources it can attach cache headers to the response specifying the desired cache behavior.

An application using HTTP cache headers is able to control this caching behavior and alleviate server-side load.

Cache-Control headers

The Cache-Control header is the most important header to set as it effectively ‘switches on’ caching in the browser.

Note that omitting cache headers will not prevent caching as many modern web browsers cache items based on their own internal algorithms.

`Cache-Control` resource header

Cache-Control:public

Resource may be cached not only by the end-user’s browser but also by any intermediate proxies that may be serving many other users as well.

Cache-Control:private

Resource bypasses intermediate proxies and may only be cached by the end-client.

`Cache-Control` resource header with `max-age`

Cache-Control:public, max-age=31536000

How long to cache the resource (in seconds).

`Cache-Control` resource header with `Expires`

Cache-Control:public
Expires: Mon, 25 Jun 2012 21:31:12 GMT

When to next retrieve the resource from the network.

`Cache-Control` resource header with `Last-Modified`

Cache-Control:public, max-age=31536000
Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT

If the requested resource has changed since the browser’s copy was cached, then transfer the resource, otherwise return an HTTP status code of 304 (not modified) and use the copy in the browser cache.

`If-Modified-Since` client request header

If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT

Return the requested resource if it has changed since this date, else use the copy in the browser cache.

Entity Tag resource header

Cache-Control:public, max-age=31536000
ETag: "15f0fff99ed5aae4edffdd6496d7131f"

When the last modified date is difficult to determine, The ETag (Entity Tag) provides a digest (such as an MD5 hash) of the resource which is compared against the current version.

`If-None-Match` client request header

If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"

Return the requested resource, only if it has a different ETag value from the copy in the browser cache.

What to cache, and for how long

Static assets

Assets which change infrequently should be aggressively cached for up to a year.

Cache-Control:public; max-age=31536000
Expires: Mon, 25 Jun 2013 21:31:12 GMT

Dynamic content

RSS, JSON from APIs, etc should be cached for as long as you believe possible, without causing issues for the end user.

Sensitive/secure content

If in doubt, don't cache it (IE uses no-cache, Firefox uses no-store):

Cache-Control:no-cache, no-store

Otherwise, only cache in the user's browser:

Cache-Control:private, max-age=31536000

Cache busting

This involves tricking the server into requesting the latest version of a file which the browser has been told to cache until some future time.

Techniques to revision static assets

file.ext?ver=123456789
file.123456789.ext - redirects to the original on the server
filemtime ( string $filename ) - Get the file modification time in PHP
serve the file from a different domain

Sources & Tools

Example

https://varvy.com/pagespeed/leverage-browser-caching.html

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

dotherightthing/caching-assets.md