Настройка кэширования статики (browser caching) в заголовках Nginx
Дата публикации: 24.04.2026

Настройка кэширования статики (browser caching) в заголовках Nginx

ccb9a536

Кэширование статики в браузере: как ускорить сайт на 30% за 10 минут

Вы когда-нибудь заходили на сайт, а он грузился так быстро, что вы даже не успевали моргнуть? Или наоборот — страница открывалась как через густой мёд, хотя интернет стабильный? В 80% случаев виновато неправильное кэширование статических файлов (картинок, CSS, JS, шрифтов).

Сегодня вы научитесь настраивать browser caching в Nginx — это как дать браузеру посетителя инструкцию: "Эти файлы не меняются часто, храни их у себя и не грузи каждый раз заново". Результат: ✅ Сайт загружается быстрее (особенно для повторных посетителей). ✅ Снижается нагрузка на сервер (меньше запросов = меньше расходов на хостинг). ✅ Повышается позиция в SEO (Google любит быстрые сайты).

1. Что такое browser caching и почему он важен

1.1. Как работает кэширование в браузере

Когда пользователь первый раз заходит на ваш сайт, его браузер скачивает:

  • HTML (структуру страницы),
  • CSS (стили),
  • JavaScript (логику),
  • Картинки, иконки, шрифты.

Без кэширования при каждом новом визите браузер будет скачивать всё заново. Это как если бы вы каждый день покупали новый телефон, потому что "а вдруг в нём что-то изменилось".

С кэшированием браузер сохраняет статичные файлы (те, что редко меняются) и использует их из локального хранилища. Это как иметь запас продуктов в холодильнике — не надо бегать в магазин каждый раз.

1.2. Какие файлы стоит кэшировать?

Тип файла Пример Нужно кэшировать? Срок кэширования
CSS styles.css ✅ Да 1 год
JavaScript script.js ✅ Да 1 год
Изображения logo.png, bg.jpg ✅ Да 1 месяц – 1 год
Шрифты font.woff2 ✅ Да 1 год
HTML index.html ❌ Нет* 5–10 минут (если нужно)
JSON/API-ответы data.json ❌ Нет** 0 (не кэшировать)

*⚠️ HTML кэшировать опасно, если у вас динамический контент (например, новостной сайт). Но для статичных лендингов можно выставить небольшой срок (5–10 минут). API-ответы обычно не кэшируют, так как данные могут обновляться часто.

1.3. Как браузер понимает, что файл можно кэшировать?

Всё решают HTTP-заголовки, которые сервер отправляет вместе с файлом. Нас интересуют два:

  1. Cache-Control — главный заголовок, который говорит браузеру, сколько и как хранить файл.
  2. Expires — устаревший, но некоторые браузеры ещё его поддерживают (для совместимости).

Пример заголовка, который говорит: "Храни этот файл 1 год":

Cache-Control: public, max-age=31536000
Expires: Thu, 31 Dec 2025 23:59:59 GMT

2. Настройка кэширования в Nginx

2.1. Где и как прописывать правила?

В Nginx кэширование настраивается в конфигурационном файле (обычно /etc/nginx/nginx.conf или в файле сайта /etc/nginx/sites-available/ваш_сайт).

Важно:

  • После изменений перезагрузите Nginx: 
    sudo nginx -t && sudo systemctl reload nginx
  • Если ошибётесь в синтаксисе, Nginx не запустится. Всегда проверяйте конфиг командой sudo nginx -t.

2.2. Базовый пример конфигурации

Добавьте этот блок в секцию server вашего сайта:

location ~* \.(jpg|jpeg|png|gif|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2?|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
}

location ~* \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
    access_log off;
}

Разбор кода:

  • ~* — регулярное выражение (ищем файлы по расширению).
  • \.(jpg|png|css|js) — список расширений файлов.
  • expires 1y — срок истечения (1 год).
  • add_header Cache-Control — прямой заголовок для браузера.
  • immutable — говорит браузеру, что файл никогда не изменится (можно использовать только для файлов с хешем в имени, например, styles.a1b2c3.css).
  • access_log off — отключаем логи для статики (уменьшает нагрузку на диск).

2.3. Продвинутая настройка (с учётом версионирования файлов)

Если вы используете хеши в именах файлов (например, при сборке через Webpack, Gulp или Vite), можно смело ставить immutable:

location ~* \.[0-9a-f]{8,}\.(js|css|png|jpg|gif|webp|woff2?)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
}

Почему это безопасно? Файлы с хешем (styles.a1b2c3.css) никогда не изменяются — вместо них создаётся новый файл (styles.d4e5f6.css). Поэтому браузер может хранить их вечно.

2.4. Кэширование HTML (осторожно!)

Для статичных сайтов (лендинги, блоги без частых обновлений) можно кэшировать HTML на короткий срок:

location / {
    expires 10m;
    add_header Cache-Control "public, max-age=600, must-revalidate";
}

Важно:

  • must-revalidate — forces браузер проверять актуальность файла после истечения срока.
  • Не используйте для динамических сайтов (интернет-магазины, форумы).

2.5. Как проверить, что кэширование работает?

  1. Откройте DevTools в браузере (F12 → вкладка Network).
  2. Обновите страницу (F5).
  3. Кликните на любой статический файл (например, styles.css).
  4. Проверьте заголовки ответа:
    • Должны быть Cache-Control и Expires.
    • В столбце Size должно быть (from disk cache) при повторной загрузке.

Пример заголовков в DevTools

Если кэширование не работает:

  • Проверьте конфиг Nginx на ошибки (sudo nginx -t).
  • Убедитесь, что правила добавлены в правильный server-блок.
  • Очистите кэш браузера (Ctrl + Shift + Del).

3. Частые ошибки и как их избежать

Ошибка Причина Решение
Файлы не кэшируются Неправильные регулярные выражения Проверьте расширения в location ~*
Кэшируется HTML динамического сайта Забыли исключить HTML из правил Уберите HTML из кэшируемых расширений
Nginx не перезагружается Ошибка в конфиге sudo nginx -t → исправьте ошибку
Кэш не обновляется после изменений Нет версионирования файлов Добавьте хеш в имена файлов

4. Дополнительные оптимизации

4.1. Сжатие статики (Gzip/Brotli)

Кэширование работает ещё эффективнее, если файлы сжаты. Добавьте в Nginx:

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_vary on;
brotli on;  # Если поддерживается

4.2. CDN и кэширование

Если используете Cloudflare, BunnyCDN или аналоги, настройте кэширование и там:

  • В Cloudflare: Caching → Configuration → Browser Cache TTL (выставьте 1 год).
  • В BunnyCDN: Pull Zone → Cache → Browser Cache Lifetime.

4.3. Ещё больше скорости: HTTP/2 Server Push

Можно заставить сервер автоматически отправлять критические файлы (CSS, JS) до того, как браузер их запросит:

location = /styles.css {
    add_header Link "</scripts.js>; rel=preload; as=script";
    http2_push /scripts.js;
}

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

Практика для закрепления

Упражнение 1: Проверка текущего кэширования

  1. Откройте свой сайт в браузере.
  2. В DevTools → Network найдите любой статический файл (CSS/JS/изображение).
  3. Посмотрите заголовки Cache-Control и Expires.
    • Есть ли они?
    • Какой срок кэширования установлен?
  4. Если кэширования нет — почему? (Проверьте конфиг Nginx.)

Упражнение 2: Настройка базового кэширования

  1. Откройте конфиг вашего сайта в Nginx: 
    sudo nano /etc/nginx/sites-available/ваш_сайт
  2. Добавьте правила для кэширования CSS, JS и изображений на 1 месяц.
  3. Перезагрузите Nginx и проверьте заголовки в браузере.

Упражнение 3: Тестирование immutable

  1. Если у вас есть файлы с хешем (например, main.a1b2c3.js), добавьте для них правило с immutable.
  2. Обновите страницу 2 раза и проверьте в DevTools, что файл грузится из кэша ((from disk cache)).

Упражнение 4: Оптимизация для динамического сайта

  1. Представьте, что у вас интернет-магазин с часто обновляемыми товарами.
  2. Какие файлы можно кэшировать, а какие нельзя?
  3. Напишите правила для Nginx, которые:
    • Кэшируют статику (CSS, JS, картинки) на 1 год.
    • Не кэшируют HTML и API-ответы.

Упражнение 5: Диагностика проблем

Ситуация: вы настроили кэширование, но браузер всё равно грузит файлы заново. Возможные причины:

  1. ?
  2. ?
  3. ?

(Подсказка: проверьте заголовки, регулярные выражения и версионирование файлов.)

Итоги

✅ Вы научились настраивать browser caching в Nginx — один из самых эффективных способов ускорить сайт. ✅ Теперь ваши посетители будут получать статику мгновенно, а сервер — меньше нагрузки. ✅ Помните:

  • Кэшируйте всё статичное (CSS, JS, изображения, шрифты).
  • Не кэшируйте HTML и API без необходимости.
  • Используйте immutable для файлов с хешем.
  • Всегда проверяйте заголовки в DevTools.

Следующий шаг: Настройте сжатие (Gzip/Brotli) и CDN для максимального эффекта!

Вопросы? Пишите в комментариях — разберём любые сложности! 🚀


Генератор паролей с длинной 64 символа
Женская одежда с бахромой
Кадастровые работы в Бийске
Как Aptum хостинг помогает малым бизнесам в управлении CRM-системами
Как выбрать планировку сайта для блогов на DreamHost
Как выбрать Vdsina вечный хостинг для своего проекта
Казань окна VEKA - профессионализм и опыт
Курьерская вода
Новостройки Оренбурга: недвижимость с отличной ценой
Онлайн чат-партнерство
Пиломатериалы для возведения бани
Почему VDSina — лучший выбор хостинга
Секреты Вконтакте: тонкости и хитрости
Скидки до 50% на тур в Коста-Рике
Видеочат рулетка бесплатно
рейтинг хостингов 2026 Быстрые VDS серверы