Кэширование настроено неправильно

Симптом

• Статические файлы (CSS, JS, изображения) загружаются каждый раз при переходе по сайту, даже если они не изменились.
• В инструментах разработчика (Network) все запросы к статику имеют статус 200 и отсутствуют заголовки Cache-Control, Expires или ETag.
• Время отклика страницы растёт из‑за повторных загрузок больших файлов.
• В логах сервера видны многочисленные GET‑запросы к тем же ресурсам.

Причина

Браузер кэширует ресурс только если сервер явно указывает, что файл можно хранить локально. Если в ответе отсутствуют заголовки Cache-Control, Expires, ETag или они заданы с нулевыми значениями, браузер считает файл «не кэшируемым» и каждый раз запрашивает его заново. Причины могут быть:

1. Неправильная конфигурация веб‑сервера – отсутствуют директивы, задающие кэш‑политику для статических файлов.
2. Обратный прокси / CDN – перезаписывает заголовки, убирая кэш‑инструкции.
3. Неправильный MIME‑тип – некоторые типы файлов не кэшируются по умолчанию.
4. Сжатие – если включено gzip/deflate, но не выставлен ETag, браузер не может использовать кэш.

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

1. Проверка заголовков в ответе
   bash curl -I https://example.com/static/app.css Ищите строки: Cache-Control: Expires: ETag:

2. Проверка в инструментах разработчика
   - Откройте вкладку Network.
   - Перезагрузите страницу.
   - Выберите любой статический файл и посмотрите заголовки ответа.

3. Проверка конфигурации сервера
   - Для Nginx: nginx -T | grep -i cache
   - Для Apache: apachectl -t -D DUMP_MODULES и проверьте наличие mod_headers.

4. Проверка прокси/CDN
   - Отключите временно CDN (если используется) и повторите запросы.
   - Смотрите заголовки, которые приходят от прокси (Via, X-Cache).

Решение

1. Настройка Nginx

# Для всех статических файлов
location ~* \.(css|js|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
    expires 30d;                     # срок жизни в кэше
    add_header Cache-Control "public, max-age=2592000, immutable";
    add_header ETag $upstream_cache_status;
    try_files $uri =404;
}

• expires 30d – устанавливает заголовок Expires и Cache-Control с 30‑дневным сроком.
• immutable сообщает браузеру, что файл не меняется, можно хранить без проверки.
• add_header ETag добавляет уникальный идентификатор, позволяющий использовать If-None-Match.

2. Настройка Apache

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 30 days"
    ExpiresByType application/javascript "access plus 30 days"
    ExpiresByType image/webp "access plus 30 days"
    ExpiresByType image/svg+xml "access plus 30 days"
</IfModule>

<IfModule mod_headers.c>
    Header set Cache-Control "public, max-age=2592000, immutable"
</IfModule>

3. Проверка после изменений

curl -I https://example.com/static/app.css

Ответ должен содержать:

Cache-Control: public, max-age=2592000, immutable
Expires: Mon, 25 Apr 2026 00:00:00 GMT
ETag: "abcd1234"

4. Очистка кэша браузера

После обновления заголовков браузер может продолжать использовать старые файлы. Очистите кэш вручную или дождитесь истечения срока жизни.

5. Если используется CDN

• В настройках CDN включите «Cache Static Resources» и задайте TTL (например, 30 дней).
• Убедитесь, что CDN не переопределяет заголовки сервера.

Связанные

• Как правильно настроить Gzip сжатие для статических файлов
• Проблемы с кэшированием при использовании Cloudflare