Как настроить кэш-заголовки для сайта

1. Определите тип ресурса: immutable asset (с хешем в имени) / HTML / API / user data
2. Для immutable (app.a8f3c.js): Cache-Control: public, max-age=31536000, immutable
3. Для HTML главной: Cache-Control: public, max-age=60, s-maxage=600
4. Для API: Cache-Control: no-store (личные данные) или private, max-age=0, must-revalidate
5. Добавьте ETag или Last-Modified для условных запросов (304 Not Modified)
6. Проверьте через HTTP-чекер Enterno.io — увидите все response headers
7. В DevTools → Network → смотрите size и "(from cache)" / "(disk cache)" / "(memory cache)"

• Cache HTML на 1 год — новые статьи не увидит посетитель до очистки кэша
• Нет immutable на статике с хешем — браузер отправляет If-None-Match каждый раз впустую
• Cache-Control: no-cache ≠ "не кэшировать". Это "всегда проверяй". Нужно no-store
• Private-data в public-кэше CDN — утечка чужих данных (критичный баг)
• Not updating cache headers after CDN purge — устаревшие ресурсы торчат в браузерах

Для настройки заголовков Cache-Control вам необходимо добавить соответствующие директивы в конфигурацию вашего веб-сервера. Для этого используйте следующие ключевые команды:

• Для Apache: Header set Cache-Control "max-age=3600, public"
• Для Nginx: add_header Cache-Control "max-age=3600, public";

Эти настройки указывают браузерам кэшировать ресурс на 3600 секунд (1 час). Важно учитывать, что правильная настройка заголовков Cache-Control позволяет значительно улучшить производительность вашего сайта и снизить нагрузку на сервер.

Настройка заголовков Cache-Control может варьироваться в зависимости от типа контента. Например, для статических ресурсов, таких как изображения и CSS-файлы, можно установить длительное время кэширования, тогда как для динамического контента рекомендуется использовать более короткие интервалы.

Пример конфигурации Nginx

Рассмотрим пример настройки заголовков Cache-Control для Nginx:

server {
    listen 80;
    server_name example.com;

    location /images/ {
        add_header Cache-Control "max-age=31536000, immutable";
    }

    location /css/ {
        add_header Cache-Control "max-age=604800";
    }

    location /api/ {
        add_header Cache-Control "no-store";
    }
}

В этом примере:

• /images/: Кэширование на 1 год для изображений, так как они редко меняются.
• /css/: Кэширование на 1 неделю для CSS-файлов, которые могут обновляться чаще.
• /api/: Отключение кэширования для API-запросов, чтобы всегда получать актуальные данные.

С помощью таких настроек вы можете оптимизировать использование кэша и улучшить время загрузки вашего сайта.