Как настроить Cache-Control для HTML, CSS и JavaScript

Назначайте правила кэша по типу ресурса. HTML обычно должен быстро меняться после релиза. CSS и JavaScript с хешем содержимого в имени можно кэшировать надолго: новый файл получит другой адрес.

HTML: разрешите хранение с перепроверкой

Для общедоступного документа, который должен обновляться после публикации, подойдёт Cache-Control: no-cache. Браузер вправе сохранить ответ, но перед повторным использованием должен обратиться к серверу. Если переданы ETag или Last-Modified, сервер может вернуть 304 и не пересылать тело.

На страницах со строго чувствительными данными нужен другой подход. no-store запрещает сохранять текущий ответ, а private ограничивает хранение персонализированного ответа частным кэшем. Проверьте также правила CDN: они могут переопределять поведение общего кэша.

Хешированные ресурсы: храните по URL

Для файла вроде app.684ad2.css можно поставить Cache-Control: public, max-age=31536000, immutable. Файл с этим именем больше не меняйте. Новый выпуск должен ссылаться на новый адрес. Не ставьте годовой срок на изменяемый /style.css, если сборка оставляет имя прежним.

Проверьте заголовки на реальных URL

Откройте DevTools или запросите заголовки из терминала:

curl -I https://example.com/
curl -I https://example.com/assets/app.684ad2.css

У HTML и CSS должны быть разные заголовки. При роллаутах оставляйте файлы предыдущего выпуска доступными, пока старый HTML ещё может быть в открытой вкладке или кэше CDN. Подробности: кэширование HTTP на MDN.

Частые вопросы

Почему Ctrl+F5 помогает только мне?

Принудительная перезагрузка меняет поведение вашей вкладки. Исправьте заголовки и версионирование URL, чтобы посетителям не пришлось повторять этот шаг.

Обязательно ли ждать год после изменения файла?

Нет, если вы поменяли имя с хешем: HTML сразу начнёт ссылаться на новый ресурс.