Кратко о кэширование статики JS/CSS

Клиентское кэширование — это способность браузера сохранять локально файлы, чтобы не делать к ним повторных обращений. Это очень полезно для картинок и CSS/Javascript файлов. Когда человек переходит по страницам браузер постоянно будет запрашивать одни и те же файлы, если не использовать механизм кэширования на браузере.

Управление тем, какие файлы следует кэшировать осуществляется с помощью HTTP заголовков Cache-control и Expires. Сервер отправляет такой заголовок вместе с ответом, указывая браузеру стоит или нет сохранить этот файл в локальное хранилище.

Если файл был сохранен в кэше, то при следующем запросе к файлу, браузер получит его содержимое локально. Таким образом, все произойдет значительно быстрее, т.к. не будет запроса на сервер.

Для того, чтобы управлять кэшированием в браузере используется HTTP заголовок Cache-control. Его необходимо передавать со всеми файлами, которые нужно кэшировать. Он имеет следующий формат

Cache-Control: private, max-age=0, no-cache

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

no-cache означает, что данный запрос нельзя кэшировать.

max-age это время, на которое будет закэширован результат. Устанавливается в секундах.

Cache-Control: private, max-age=60

закэширует результат запроса в браузере на 60 секунд.

Cache-Control: private, max-age=0, no-cache

запретит кэширование запроса.

Дополнительный заголовок HTTP Expires указывает дату и время, когда браузер должен обновить кэш.

Expires: Mon, 31 Dec 2024 23:55:55 GMT
Браузер отправит повторный запрос 24 году, до этого времени он будет использовать кэш.
Этот заголовок следует использовать вместе с Cache-Control

Заголовок Vary позволяет установить дополнительные правила для кэширования запросов:

vary: User-Agent

Браузер будет знать, что контент может отличаться в зависимости от версии сайта (например, мобильной и настольной).

Кэшируйте все файлы, которые изменяются реже, чем раз в несколько минут. В обязательном порядке:

В приложении заголовки Cache-Control обычно не используются, т.к. приложения генерируют динамический контент. Если же у вас редко изменяется сайт, вы можете добавить кэширование, чтобы снизить количество запросов на сервер
можно указать так
header("Cache-control: public");

header("Expires: " new Date("D, d M Y H:i:s", time() + 60*60) . " GMT");

Включим кэш на 1 час

В Nginx кеширование включается инструкцией expires

Javascript и CSS файлы обычно изменяются. Но заранее невозможно определить когда нужно будет внести изменение. Можно кэшировать такие файлы на короткое время (например минуту), но это не позволит использовать все преимущества Cache-Control.

Браузер хранит в кэше файлы соответственно их адресам URL. Если Мы добавим GET параметр в путь, путь изменится и браузер заново запросит файл. Что нам и нужно. При каждом обновлении CSS и Javascript файлов следует добавлять в GET параметр новое значение.