Браузерное или клиентское кеширование

Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.

Чаще всего на стороне браузера кешируются изображения, JS- и CSS‑файлы. Чуть реже имеет смысл кешировать страницы и бинарные файлы (медиа-файлы, PDF, скачиваемые документы, архивы и т.д.).

Статические ресурсы должны быть закешированы хотя бы на неделю, а лучше сразу на год. Таким образом, эти ресурсы будут скачиваться с сервера только один раз, а затем браузер будет либо сразу использовать локальную копию (если указан заголовок Expires или Cache-Control), либо после проверки на неизменность (если указан заголовок Last-Modified или ETag).

Заголовки Expires и Cache-Control: max-age

В качестве значения заголовка Expires используется дата, а заголовка Cache-Control: max-age — число секунд. До тех пор, пока срок жизни кеша не истёк, браузер будет без каких‑либо дополнительных проверок использовать закешированную версию ресурса. Cache-Control: max-age поддерживается всеми современными браузерами, а при наличии обоих заголовков браузер даёт ему приоритет над Expires.

Заголовки Last-Modified и ETag

В качестве значения заголовка Last-Modified используется дата, а для заголовка ETag — произвольная строка. Если используются эти заголовки, то браузер, прежде чем использовать закешированный ресурс, получит с сервера текущее значение заголовка и сравнит его с заголовком закешированной версии — если данные совпадут, то будет использоваться локальная версия, а если нет — произойдёт повторная загрузка. Запросы проверки выполняются быстрее, чем полная загрузка ресурса, что даёт прирост производительности сайта при повторном использовании ресурсов.

Оптимальная стратегия клиентского кеширования

Для редко меняющихся файлов стоит указать Cache-Control: max-age со сроком на год, а в момент изменения этих ресурсов использовать метод «отпечатков пальцев» (fingerprinting) — добавлять к имени файла небольшую часть хеша, которая формируется на основе его содержания. Таким образом, вся статика всегда закеширована на клиенте, а при её изменении меняются имена файлов, и они автоматически перезагружаются браузером.

Собственно, техника fingerprinting активно используется для статических ресурсов (стилей и скриптов) во многих фреймворках (в частности, в Ruby on Rails). А массовую установку заголовка Cache-Control: max-age для всех типов статических файлов можно реализовать на стороне веб‑сервера (в nginx, например).