Привет, я Максим, веб-разработчик. Кеширование — один из самых эффективных способов ускорить сайт. При повторном визите браузер берёт файлы из локального кеша, а не качает заново. Страница загружается мгновенно. Но настроить кеширование нужно правильно — иначе пользователи будут видеть устаревший контент.

Как работает кеширование

При первом запросе сервер отдаёт файл и HTTP-заголовки, которые говорят браузеру: «Сохрани этот файл и не проси его снова в течение X времени». При повторном запросе браузер проверяет кеш — если файл ещё актуален, использует его без обращения к серверу.

Cache-Control — главный заголовок

Cache-Control управляет кешированием. Основные директивы:

max-age=31536000 — кешировать на 1 год (31 536 000 секунд). Используется для статики с хешем в имени файла: style.abc123.css. Если файл изменился — изменится хеш, и браузер загрузит новую версию.

no-cache — не значит «не кешировать». Значит «кешируй, но проверяй актуальность при каждом запросе». Браузер спрашивает сервер: «Файл изменился?» Если нет — берёт из кеша.

no-store — вообще не кешировать. Для персональных данных, страниц с конфиденциальной информацией.

public — можно кешировать везде: браузер, CDN, прокси.

private — кешировать только в браузере пользователя, не на промежуточных прокси.

Моя стратегия кеширования

Для типичного сайта я настраиваю так:

HTML-страницы: Cache-Control: no-cache. Всегда проверяются на свежесть, но кешируются для скорости. Пользователь всегда видит актуальный контент.

CSS и JS с хешем в имени: Cache-Control: public, max-age=31536000, immutable. Кешируется на год. При изменении — новый хеш, новый файл.

Изображения: Cache-Control: public, max-age=2592000. Кешируются на 30 дней. Для изображений товаров, которые редко меняются — достаточно.

Шрифты: Cache-Control: public, max-age=31536000. Шрифты не меняются — кешируем надолго.

API-ответы: Cache-Control: no-store или max-age=60. Зависит от того, насколько актуальные данные нужны.

ETag и Last-Modified

Дополнительные механизмы валидации кеша.

ETag — уникальный идентификатор версии файла. При повторном запросе браузер отправляет If-None-Match с сохранённым ETag. Если файл не изменился — сервер отвечает 304 Not Modified (без тела файла). Экономия трафика.

Last-Modified — дата последнего изменения. Работает аналогично, но менее точно.

Настройка на разных платформах

Nginx. В конфигурации добавляю location-блоки для разных типов файлов с нужными expires и add_header Cache-Control.

Apache. Через .htaccess с mod_expires: ExpiresByType для CSS, JS, изображений, шрифтов.

Vercel / Netlify. Настраивается через файл конфигурации (vercel.json, _headers). Для Next.js — кеширование статики настроено по умолчанию.

Service Worker — продвинутое кеширование

Для SPA и PWA я использую Service Worker — JavaScript, который перехватывает сетевые запросы и управляет кешем программно.

Стратегии: Cache First (сначала кеш, потом сеть), Network First (сначала сеть, потом кеш), Stale While Revalidate (отдаём из кеша, обновляем в фоне).

Workbox от Google упрощает настройку Service Worker. Для Next.js есть next-pwa.

Как проверить

DevTools браузера → Network: столбец Size показывает «disk cache» или «memory cache» для кешированных файлов. Заголовки ответа показывают Cache-Control и ETag.

Lighthouse → Performance: рекомендация «Serve static assets with an efficient cache policy» — если есть, значит кеширование настроено неоптимально.

Правильное кеширование — бесплатное ускорение сайта. Настройте один раз — и каждый повторный визит пользователя станет мгновенным.