Все гоняются за скоростью: CDN, Redis, сжимаем картинки.
А самый простой кэш уже встроен в каждый браузер — это HTTP-кэширование.
Только большинство лепит заголовки наугад, а потом ловит классику: «я выкатил фикс, а у юзеров всё ещё старая версия».
🔀 Есть два разных режима, и их вечно путают
1. «Вообще не спрашивай сервер».
Браузер берёт ответ из своей памяти и всё, никакого запроса по сети.
Самый быстрый вариант — данные появляются мгновенно.
2. «Спроси, но по-дешёвому».
Браузер стучится на сервер, но качает тело ответа только если оно реально поменялось.
Запрос лёгкий, мегабайты по сети не летят.
Нормальный кэш — это когда ты грамотно миксуешь эти два режима.
⏳ Cache-Control — сколько времени можно не дёргать сервер
Главный заголовок:
Cache-Control: max-age=3600
Переводится как «час эти данные считаются свежими, не трогай сервер».
Весь час браузер отдаёт ответ из памяти.
Ещё пара слов, которые важно не перепутать: —
public — можно кэшировать и по пути, на CDN и прокси; — private — только в браузере юзера, для персональных данных; — no-store — не кэшировать нигде и никогда (пароли, оплата).Типичный прострел себе в ногу: влепить большой
max-age на HTML. Потом выкатываешь обновление, а у людей висит старая страница ещё час, и ты ничего не сделаешь.
🏷 ETag — «слушай, а оно вообще менялось?» Вот тут и живёт дешёвая проверка.
Сервер вешает на ответ что-то вроде отпечатка:
ETag: "v23-abc123"
Браузер его запоминает и в следующий раз спрашивает: «у меня вот такой отпечаток, всё ещё актуально?».
Если на сервере тот же — он отвечает
304 Not Modified с пустым телом. Браузер берёт данные из кэша, а по сети улетел только копеечный запрос вместо перекачки всего файла.
Красота.
🧩 Как это делают на нормальных проектах Весь фокус — разделить файлы на два типа.
Статика с хэшем в имени (
app.a1b2c3.js) — кэшируем жёстко и надолго:Cache-Control: public, max-age=31536000, immutable
Год жизни,
immutable — «даже не перепроверяй». Поменял код — поменялся хэш в названии, а значит это уже новый файл с новым адресом.
Старый кэш сам отваливается за ненадобностью.
HTML — почти не кэшируем, но проверяем:
Cache-Control: no-cache
И вот тут главный подвох:
no-cache — это НЕ «не кэшировать». Это «кэшируй, но каждый раз перепроверяй через ETag».
То есть HTML всегда свежий, а тяжёлые скрипты и картинки грузятся из кэша по вечному адресу.
Быстро и без залипшей старой версии.
Короче:
no-cache и no-store — это вообще про разное, и половина болей с кэшем именно из-за того, что их считают одним и тем же. Прежде чем прикручивать очередной Redis, глянь, что уже отдают твои заголовки — там частенько бесплатно лежит половина скорости.
А вы заголовки кэша руками крутите или как фреймворк из коробки поставил, так и живёте? 🤔
#web #http #performance #backend #frontend #dev