Как настроить кэш-заголовки для сайта
Cache-Control — HTTP-заголовок, управляющий кэшированием ресурсов в браузере и CDN. Для статики (JS/CSS/изображения с хешем) — public, max-age=31536000, immutable (1 год). Для HTML — public, max-age=60, stale-while-revalidate=86400. Для API — no-store. Правильная настройка ускоряет сайт на 30-80% при повторных визитах.
Ниже: пошаговая инструкция, рабочие примеры, типичные ошибки, FAQ.
Пошаговая настройка
- Определите тип ресурса: immutable asset (с хешем в имени) / HTML / API / user data
- Для immutable (app.a8f3c.js):
Cache-Control: public, max-age=31536000, immutable - Для HTML главной:
Cache-Control: public, max-age=60, s-maxage=600 - Для API:
Cache-Control: no-store(личные данные) илиprivate, max-age=0, must-revalidate - Добавьте ETag или Last-Modified для условных запросов (304 Not Modified)
- Проверьте через HTTP-чекер Enterno.io — увидите все response headers
- В DevTools → Network → смотрите size и "(from cache)" / "(disk cache)" / "(memory cache)"
Рабочие примеры
| Сценарий | Конфиг / запись |
|---|---|
| nginx: статика с хешем (1 год) | location ~* \.(js|css|png|jpg|woff2)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
} |
| nginx: HTML (короткий кэш) | location / {
add_header Cache-Control "public, max-age=60, s-maxage=600";
} |
| Apache: .htaccess статика | <FilesMatch "\.(js|css|png|jpg|woff2)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch> |
| API (no-cache) | Cache-Control: no-store, no-cache, must-revalidate |
| CDN-aware (CDN кэширует, браузер — нет) | Cache-Control: public, max-age=0, s-maxage=86400 |
Типичные ошибки
- Cache HTML на 1 год — новые статьи не увидит посетитель до очистки кэша
- Нет immutable на статике с хешем — браузер отправляет If-None-Match каждый раз впустую
Cache-Control: no-cache≠ "не кэшировать". Это "всегда проверяй". Нужноno-store- Private-data в public-кэше CDN — утечка чужих данных (критичный баг)
- Not updating cache headers after CDN purge — устаревшие ресурсы торчат в браузерах
Больше по теме
Часто задаваемые вопросы
В чём разница max-age и s-maxage?
<code>max-age</code> — TTL для private кэшей (браузер). <code>s-maxage</code> — TTL для shared кэшей (CDN, proxy). Если указаны оба — каждый использует свой.
Что такое immutable?
Директива в Cache-Control: "ресурс никогда не изменится". Браузер не отправляет revalidation (If-None-Match) даже при reload. Важно для hash-based assets.
Нужен ли ETag если есть Cache-Control?
Да. Cache-Control говорит "кэш валиден N секунд". ETag используется при expire для 304 Not Modified (условные запросы). Сочетаются.
Как проверить кэш-стратегию своего сайта?
<a href="/check">HTTP-чекер Enterno.io</a> → введите URL → раздел Cache покажет Cache-Control, ETag, Age, max-age.