Зачем кешировать статику
Стили, скрипты, шрифты и изображения меняются редко, а загружаются на каждой странице. Если браузер запомнит их после первого визита, следующие страницы будут открываться заметно быстрее, а нагрузка на сервер снизится. Управляют этим заголовки ответа, главный из них — Cache-Control.
Разные правила для разных файлов
| Тип файла | Рекомендуемая политика | Почему |
|---|---|---|
| HTML-страницы | Проверять актуальность при каждом запросе | Содержимое и ссылки на файлы могут измениться в любой момент |
| Стили и скрипты с версией в имени | Хранить максимально долго (год) | При изменении имя файла меняется, старая копия не мешает |
| Шрифты | Хранить долго | Меняются крайне редко |
| Изображения контента | Хранить долго или умеренно | Зависит от того, как часто их заменяют под тем же именем |
| Файлы без версии в имени | Короткий срок с проверкой | Иначе посетители будут видеть устаревшую копию |
Пример настройки
Для файлов, у которых версия зашита в имя, срок хранения ставят на год и добавляют директиву immutable: она сообщает, что файл не изменится. Вот пример для Nginx:
location /assets/ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
location = /index.html {
add_header Cache-Control "no-cache";
}Значение no-cache не запрещает хранение: браузер сохраняет копию, но перед использованием спрашивает у сервера, не изменилась ли она. Если нет, приходит короткий ответ 304 — подробнее в статье про условные запросы и в разборе заголовков Last-Modified и ETag.
Как не ошибиться
- Не ставьте долгий срок на файлы, которые вы перезаписываете под тем же именем: посетители не получат обновление.
- Не кешируйте надолго HTML: пользователь останется со старыми ссылками на удалённые файлы.
- Не отправляйте страницы ошибок и перенаправления с долгим сроком хранения.
- После выкладки проверьте заголовки реальным запросом, а не только по конфигурации.
Как проверить результат
- Откройте вкладку сети в инструментах разработчика и посмотрите, какие файлы при повторной загрузке приходят «из кеша».
- Сравните время повторной загрузки страницы с первой.
- Проверьте отдельно файлы, которые раздаются с CDN: у них правила могут отличаться от правил вашего сервера.
Связь с версиями. Долгое хранение безопасно только тогда, когда при каждом изменении файла меняется его адрес. Как это сделать — в статье про версионирование файлов. Настройка через конфигурацию Apache описана в статье про кеширование в .htaccess.
Как браузер решает, брать ли файл из кеша
Если срок хранения ещё не истёк, запрос к серверу вообще не отправляется — это самый быстрый вариант. Если истёк, браузер задаёт серверу вопрос об актуальности, и при отсутствии изменений получает короткий ответ без тела файла.
| Значение | Что означает |
|---|---|
max-age=N | Хранить копию N секунд без обращения к серверу |
no-cache | Хранить, но каждый раз проверять актуальность |
no-store | Не сохранять ответ вообще: для закрытых данных |
public / private | Разрешено ли хранить общими кешами или только браузером пользователя |
immutable | Файл не изменится в течение срока хранения |
Частые вопросы
Какой срок хранения ставить для стилей и скриптов?
Если версия зашита в имя файла — на год; если файлы перезаписываются под тем же именем, срок должен быть коротким или с проверкой.
Что означает no-cache?
Браузер может хранить копию, но перед использованием обязан проверить у сервера её актуальность; запретом хранения это не является.
Почему после обновления сайта посетители видят старые стили?
Обычно файлу задан долгий срок хранения, а его адрес не изменился; решается версионированием имени файла.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.