Кэширование — единственная мера ускорения, которая работает без изменения самих файлов. Разбираем, какие заголовки за это отвечают и что ставить разным типам файлов.
Коротко
- no-cache и no-store — разные вещи.
- Файлам с отпечатком в имени — год и immutable.
- HTML кэшируют с обязательной перепроверкой.
- Проверяется повторным открытием страницы.
Что делает кэширование
Первый визит
Браузер скачивает всё.
Сервер говорит, сколько хранить
Заголовками ответа.
Браузер откладывает копии
Стили, скрипты, картинки.
Повторный визит
Часть файлов не запрашивается.
Страница открывается быстрее
Без обращения к серверу.
Это самая дешёвая мера ускорения: файлы не меняются, меняется только ответ сервера. Проверить, работает ли она, можно за минуту — открыть страницу второй раз и посмотреть, стало ли заметно быстрее. Про остальные меры — в статье про скорость загрузки сайта.
Директивы Cache-Control
| Директива | Что означает |
|---|---|
| no-store | Хранить нельзя, скачивать заново каждый раз |
| no-cache | Хранить можно, но перед использованием спросить сервер |
| private | Браузеру хранить можно, промежуточным кэшам нельзя |
| public | Хранить можно и промежуточным кэшам |
| max-age | Сколько секунд копия считается свежей |
| immutable | Файл не меняется, перепроверять не нужно |
Первые две строки путают чаще всего, и разница между ними существенная. no-store запрещает хранение вообще, no-cache хранение разрешает и лишь требует перепроверки перед использованием: для HTML нужна вторая, а не первая. Поставленная по ошибке no-store лишает сайт всей выгоды от кэша.
Что ставить разным файлам
| Тип файла | Что ставить | Почему |
|---|---|---|
| Файл с отпечатком в имени | max-age на год и immutable | Имя меняется при изменении |
| Стили и скрипты без версии | no-cache с проверкой | Могут измениться под тем же адресом |
| HTML-страница | no-cache с проверкой | Содержимое меняется |
| Картинки каталога | Длительное хранение | Меняются редко |
| Ответы с личными данными | private или no-store | Не должны попасть в общий кэш |
Год — это не произвольное число: 31 536 000 секунд одновременно и год, и максимальное поддерживаемое значение. Ставить его безопасно только файлам, у которых при изменении меняется имя: иначе посетители будут неделями видеть старую версию стилей.
Как работает перепроверка
Сервер отдал метку версии
ETag или дату изменения.
Браузер сохранил её вместе с файлом
Как отпечаток.
При следующем запросе присылает метку
Вопрос: изменилось ли.
Если нет — ответ 304
Без тела файла.
Браузер берёт свою копию
Трафик почти нулевой.
Ответ 304 — это подтверждение без пересылки содержимого, и именно он делает no-cache дешёвым. Запрос к серверу происходит, но данные не передаются: для HTML это лучший компромисс между свежестью и скоростью. Подробно — в статье про Last-Modified и ETag.
Проблема обновления файлов
Без версии в имени
- Правки не доходят до постоянных посетителей
- Приходится ставить короткий срок
- Либо просить очистить кэш
- Выигрыш от кэша небольшой
С отпечатком в имени
- Новая версия — новый адрес
- Старый файл можно хранить год
- Правки видны сразу
- Перепроверка не нужна
Это решает не настройка сервера, а сборка проекта. Если ваша система сама добавляет к именам файлов отпечаток содержимого, длительное хранение включается без риска; если нет, увеличивать срок опасно, и разговор нужно вести с разработчиком.
Как проверить настройку
| Проверка | Что должно быть |
|---|---|
| Открыть страницу второй раз | Заметно быстрее |
| Посмотреть ответы в панели разработчика | Часть файлов из кэша |
| Проверить заголовок у стилей | Длительное хранение |
| Проверить заголовок у HTML | Перепроверка, а не запрет |
| Опубликовать правку и обновить | Изменение видно сразу |
Последняя строка — обязательная проверка после включения длительного хранения. Если правка в стилях не видна без принудительного обновления, значит, отпечатка в имени файла нет, а срок хранения уже увеличен: это придётся откатить. Про аудит — в статье про технический аудит сайта.
Частые вопросы
Чем no-cache отличается от no-store?
no-store запрещает хранение вообще и требует скачивать файл заново каждый раз. no-cache хранение разрешает, но требует перепроверки у сервера перед использованием копии.
Какой срок хранения ставить стилям и скриптам?
Файлам, у которых при изменении меняется имя, можно ставить год — 31 536 000 секунд, это максимальное поддерживаемое значение, плюс свойство immutable. Файлам без версии в имени длительный срок опасен.
Как кэшировать HTML-страницы?
С обязательной перепроверкой: no-cache вместе с ETag или датой изменения. Сервер отвечает 304 без тела файла, если содержимое не изменилось.
Как проверить, что кэширование работает?
Открыть страницу второй раз: она должна стать заметно быстрее. В панели разработчика часть файлов будет взята из кэша, а не запрошена заново.
Читайте также
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
