Дата публикации: 24.04.2026

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

Кэширование статики в браузере: как ускорить сайт на 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-заголовки, которые сервер отправляет вместе с файлом. Нас интересуют два:

Cache-Control — главный заголовок, который говорит браузеру, сколько и как хранить файл.
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. Как проверить, что кэширование работает?

Откройте DevTools в браузере (F12 → вкладка Network).
Обновите страницу (F5).
Кликните на любой статический файл (например, styles.css).
Проверьте заголовки ответа:
- Должны быть 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: Проверка текущего кэширования

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Введение: чем VDS отличается от шаред-хостинга и зачем это веб-мастеру
Как правильно выбрать тариф: CPU, RAM, NVMe или SSD, канал
Выбор операционной системы: почему Ubuntu 22.04/24.04 — стандарт индустрии
Регистрация домена и первичная настройка DNS-записей (A, AAAA, CNAME)
Генерация SSH-ключей на локальном компьютере (Windows/Mac/Linux)
Добавление публичного ключа на сервер и первый вход по SSH
Отключение входа по паролю и запрет авторизации для root
Смена стандартного порта SSH для снижения шума в логах
Создание основного рабочего пользователя с правами sudo
Базовое обновление системы и установка необходимых утилит (curl, wget, git, htop)
Настройка часового пояса и синхронизация времени (NTP)
Установка и базовая настройка фаервола UFW
Разрешение только необходимых портов (SSH, HTTP, HTTPS)
Установка Fail2Ban для защиты от перебора паролей
Настройка правил Fail2Ban для SSH и веб-сервера
Знакомство с Docker: установка движка и CLI
Установка Docker Compose для управления мульти-контейнерными приложениями
Основы изоляции: почему каждый проект должен быть в своем контейнере
Подготовка файловой структуры сервера для удобного хранения проектов
Развертывание Nginx как обратного прокси-сервера через Docker
Настройка конфигурации Nginx для статических сайтов
Установка PHP-FPM в отдельном контейнере
Связка Nginx и PHP-FPM через внутреннюю Docker-сеть
Оптимизация настроек PHP-FPM (pm.max_children, memory_limit) под нагрузку
Установка MariaDB/MySQL в изолированном контейнере
Безопасное хранение паролей от БД через переменные окружения (.env)
Подключение к базе данных из внешнего клиента (DBeaver/Navicat) через туннель
Установка Redis для кэширования запросов и сессий
Интеграция Redis с PHP-приложением для ускорения работы
Автоматическая выдача SSL-сертификатов через Certbot (Let's Encrypt)
Настройка автопродления SSL-сертификатов по крону
Принудительный редирект с HTTP на HTTPS в Nginx
Включение gzip и brotli сжатия для ускорения загрузки страниц
Настройка кэширования статики (browser caching) в заголовках Nginx
Защита от простых DDoS и ботов: модуль limit_req в Nginx
Настройка резервного копирования баз данных (mysqldump) по расписанию
Настройка резервного копирования файлов проектов (tar)
Отправка бэкапов на удаленное хранилище (S3-compatible storage или другой сервер)
Ротация и очистка старых логов, чтобы не забить диск
Мониторинг нагрузки: установка и настройка htop и iotop
Просмотр логов в реальном времени: tail, grep и journalctl
Установка простого мониторинга доступности (Uptime Kuma или скрипт в Telegram)
Изоляция арбитражных инструментов: запуск ботов в отдельных контейнерах
Установка SOCKS5/HTTP прокси (3proxy) внутри Docker для мультиаккаунтинга
Настройка аутентификации и ограничения доступа к прокси по IP
Проверка анонимности и работы прокси-сервера
Оптимизация ядра Linux (sysctl.conf) для высоких нагрузок и сетевых соединений
Настройка swap-файла: когда он нужен, а когда вредит
Чек-лист финальной проверки безопасности перед запуском проекта
План действий при взломе или падении сервера: восстановление из бэкапа
АПТЕЧКА ДЛЯ ЖИВОТНЫХ
Автомобили Германии — FORD, MERSEDES, VW, IVECO
Чат рулетка 2026: чаты, где каждый момент — шанс
Чат рулетка онлайн
Чат с Аней: психологический разговор
Чатрулетка: новый способ общения
Чай и кофе: сила вкуса
Детские игрушки из безопасных материалов
Эксплуатация шин: Рекомендации по использованию
Фототехника для пейзажей
Как Aptum хостинг помогает малым бизнесам в управлении CRM-системами
Как выбрать Vdsina вечный хостинг для своего проекта
Компоненты безопасности IP
Конкуренция на российском автомобильном рынке
Онлайн генератор паролей для Windows
Оптимизация обработки форм GEO проекта
Сервер для социальных сетей: Безопасность, Скорость, Изоляция
Смешные моменты
Сравнение Arsys хостинг сервисов для блогеров с WordPress на 2023 год
Весь экран под циферблат