HTTP-кэширование Cache-Control и ETag: настройка и оптимизация

После запуска сайта многие обнаруживают, что каждый второй запрос к серверу — полный. На мобильных устройствах LCP превышает 4 секунды. Типичный сайт с 1000 посетителей в день генерирует около 10 000 запросов, из которых 60% можно кэшировать. Причина — отсутствие или неверная настройка HTTP-кэширования. Наши инженеры настраивают Cache-Control и ETag, чтобы статика отдавалась из браузера мгновенно, а динамика проверялась без повторной передачи тела. Правильное кэширование сокращает число запросов на 80% и уменьшает LCP на 500–700 мс, напрямую влияя на Core Web Vitals. На одном из проектов настройка immutable и stale-while-revalidate снизила нагрузку на сервер на 60% и улучшила INP на 150 мс.

Как Cache-Control влияет на Core Web Vitals?

Core Web Vitals (LCP, CLS, INP) зависят от числа запросов и времени ответа сервера. Ресурсы с max-age=31536000 не запрашиваются с сервера год, что критически для мобильных пользователей с медленным интернетом. Сравнение: директива immutable исключает условные запросы при обновлении страницы, тогда как без неё браузер делает проверки If-Modified-Since или If-None-Match. Благодаря immutable эти проверки сокращаются на 100%, экономя до 200 мс на каждом ресурсе при перезагрузке. Использование ETag вместо Last-Modified даёт выигрыш в трафике до 5 раз для динамических ответов.

Какие директивы Cache-Control использовать?

Частые ошибки — забывают immutable для статики, не ставят Vary: Accept-Encoding, или для API используют public. Без Vary около 2-3% пользователей могут получить нечитаемый контент, если CDN отдаст gzip-версию без поддержки gzip.

Сравнение стратегий кэширования для разных типов контента

Когда использовать ETag вместо Last-Modified?

ETag — уникальный идентификатор версии ресурса, генерируемый на основе хеша содержимого. Last-Modified использует только дату, что менее точно. Если файл изменился, но дата осталась (баг сервера), Last-Modified не сработает. ETag обязателен для динамических страниц: сервер проверяет заголовок If-None-Match и возвращает 304 Not Modified, экономя до 100% размера ответа. В nginx ETag включён по умолчанию (etag on;). На одном проекте мы заменили Last-Modified на ETag и снизили трафик API на 40%.

Как настроить заголовки для статики и API?

# Nginx конфигурация для всех типов ресурсов

# Статические ассеты с хешем (Vite, Webpack)
location ~* \.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Vary Accept-Encoding;
}

# Шрифты — тоже immutable
location ~* \.(woff2|woff|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Access-Control-Allow-Origin *;
}

# Изображения — долгий кэш без immutable
location ~* \.(webp|avif|jpg|jpeg|png|gif|svg|ico)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
}

# HTML — короткий кэш с must-revalidate
location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, max-age=300, must-revalidate";
}

# API — не кэшировать
location /api/ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma no-cache;
}

Продвинутые техники: Stale-While-Revalidate и Vary

Директива stale-while-revalidate позволяет отдавать устаревший кэш мгновенно, а в фоне обновлять его. Пример: Cache-Control: public, max-age=300, stale-while-revalidate=3600 — пользователь получает данные за 0 мс, свежая версия подгружается асинхронно к следующему визиту. Это улучшает восприятие скорости — никаких задержек. Без stale-while-revalidate пришлось бы либо ставить короткий max-age (частые запросы) либо долгий (риск устаревших данных). По сравнению с простым max-age без ревалидации, эта директива сокращает время ожидания для пользователя на 100% при наличии устаревшего кэша.

Заголовок Vary гарантирует, что CDN учтёт кодировку сжатия. Без него около 2-3% пользователей могут получить нечитаемый контент, если CDN отдаст gzip-версию браузеру без поддержки gzip. Как указано в документации, это решает проблему полностью.

Процесс настройки под ключ

1. Аудит — анализируем текущие заголовки, выявляем проблемные ресурсы (с помощью Chrome DevTools, Lighthouse).
2. Проектирование — определяем стратегию для статики, HTML, API, изображений, шрифтов.
3. Настройка Nginx/Apache — применяем директивы с учётом CDN.
4. Внедрение ETag — для API и динамики генерируем хеши на основе даты изменения данных.
5. Конфигурация CDN — устанавливаем s-maxage, Vary, правила инвалидации.
6. Тестирование — проверяем через curl и инструменты (GTmetrix, WebPageTest).
7. Документация — фиксируем схему кэширования и инструкцию по инвалидации.

Что вы получите

• Сокращение количества запросов на 80%.
• Улучшение LCP на 500–700 мс.
• Снижение нагрузки на сервер до 60%.
• Экономию на CDN-трафике до 70%.
• Подробный отчёт с аудитом и рекомендациями.
• Конфигурации Nginx/Apache для вашего стека.
• Документацию по инвалидации кэша для разработчиков.
• Консультацию по дальнейшей оптимизации.

Свяжитесь для консультации — мы покажем, каких улучшений можно добиться на вашем сайте. Опыт команды — 7 лет, более 50 проектов с настроенным кэшированием. Закажите аудит кэширования сегодня и получите детальный отчёт с рекомендациями.

Мы регулярно сталкиваемся с ситуацией: «Сайт не открывается» в 3 часа ночи — и выясняется, что disk full на VPS, потому что логи nginx не ротировались полгода. Или сервер лёг под нагрузкой в день запуска рекламной кампании, потому что на shared хостинге стоял лимит в 50 одновременных соединений. Настройка хостинга и деплоя — это не про «где дешевле», это про то, что происходит в момент, когда что-то идёт не так. Наша команда помогает избежать таких инцидентов, проектируя инфраструктуру с учётом реальных паттернов нагрузки.

Когда выбирать Vercel и Netlify?

Vercel создан под Next.js — деплой в один push, preview deployments для каждого PR, автоматический CDN, Edge Functions, ISR без конфигурации. Для фронтенд-проектов и JAMstack это оптимальный выбор: нет операционной нагрузки, time-to-deploy измеряется минутами.

Ограничения реальные: Vercel Serverless Functions запускаются в us-east-1 по умолчанию (latency для Европы +80–100ms), Function timeout 300 секунд на Pro, Bandwidth 1TB/месяц на Pro. Для тяжёлого backend — нужны воркеры или отдельный сервер.

Netlify ближе к статике и Edge Functions на базе Deno Deploy. Build minutes — основное ограничение на бесплатном тарифе.

Почему Docker — основа предсказуемого деплоя?

«Работает на моей машине» — классика. Docker решает это через контейнеризацию окружения. Но плохой Dockerfile создаёт новые проблемы.

Типичная ошибка: копировать всё в образ без .dockerignore, получать 800MB образ вместо 80MB. node_modules внутри образа весит столько же. Правильно: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Итоговый образ: 180MB вместо 1.2GB. Время сборки CI сокращается из-за layer caching — если package.json не изменился, слой с npm ci берётся из кэша.

Docker Compose для локальной разработки и простых продакшен-сценариев: приложение + PostgreSQL + Redis в одной конфигурации. Для production на одном сервере — вполне рабочий вариант, если нет требований горизонтального масштабирования.

Подробнее о контейнеризации — Wikipedia: Docker.

Как настроить Nginx как reverse proxy?

Nginx перед приложением — стандарт для VPS и выделенных серверов. Основные функции: SSL termination, gzip, static files, rate limiting, upstream балансировка.

Конфигурация, которую часто делают неправильно: worker_processes auto — количество процессов равно числу CPU. worker_connections 1024 — это 1024 на каждый воркер-процесс. При 4 CPU и 1024 connections = 4096 одновременных соединений. Для высоконагруженного сайта нужно worker_connections 4096 и настройка keepalive_timeout 65.

Для статических ассетов с хешем в имени файла:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable сообщает браузеру: не проверяй этот файл даже при hard refresh. Правильно работает только с content-hashed именами файлов (что делает Vite/webpack по умолчанию). Документация — Wikipedia: Nginx.

AWS: гибкость и сложность

EC2 + Auto Scaling Group — классика для горизонтального масштабирования. AMI с предустановленным приложением, Launch Template, ASG с min/desired/max instances, Application Load Balancer. При CPU > 70% на 3 минуты — scale out, при CPU < 30% на 15 минут — scale in. Health check через ALB исключает нездоровые инстансы из ротации.

ECS Fargate — контейнеры без управления EC2. Деплой Docker-образа, задаёте CPU/память (512 CPU units = 0.5 vCPU, от 512MB памяти), Fargate запускает. Дороже Lambda, но нет cold start и нет timeout-ограничений. Подходит для long-running процессов, WebSocket-серверов, тяжёлых воркеров.

RDS для PostgreSQL с Multi-AZ: автоматический failover за 1–2 минуты при падении primary. Read Replicas для масштабирования чтения. RDS Proxy для connection pooling — Lambda-функции не умеют держать долгосрочные соединения, прокси буферизует это.

Kubernetes: когда это оправдано

K8s добавляет значительную операционную сложность. Оправдан, когда: несколько команд деплоят независимые сервисы, нужна тонкая настройка ресурсов на сервис, canary deployments и blue/green без простоя — требование.

AWS EKS, GKE или managed k8s от Hetzner (дешевле). Helm charts для стандартных сервисов. Horizontal Pod Autoscaler по CPU и custom metrics (RPS через Prometheus).

Для большинства стартапов и средних проектов — Kubernetes избыточен. ECS или Fly.io дают 80% возможностей при 20% операционной сложности.

Мониторинг и alerting

Сервер без мониторинга — это ожидание инцидента. Минимальный стек: Prometheus + Grafana (или Grafana Cloud для managed), alerting на disk > 80%, memory > 85%, CPU > 90% за 5 минут, error rate > 1%. Uptime через Better Uptime или Upptime (self-hosted).

Logs: Loki + Grafana или CloudWatch Logs Insights. Структурированные JSON-логи (winston, pino) — обязательно, иначе поиск по логам превращается в боль.

Что входит в настройку хостинга

• Аудит текущей инфраструктуры и профилирование нагрузки
• Выбор целевой архитектуры (VPS, AWS, serverless, Kubernetes)
• Настройка CI/CD pipeline (GitHub Actions, GitLab CI) с автоматическим деплоем
• IaC через Terraform или Pulumi (инфраструктура как код)
• Конфигурация Nginx, SSL-сертификаты, HTTP/2, brotli
• Мониторинг и алертинг (Prometheus + Grafana, PagerDuty)
• Документация runbooks и обучение команды

Дополнительно: пишите, если нужна миграция с текущего хостинга или интеграция с внешними сервисами.

Процесс работы

1. Аудит текущей инфраструктуры (2–5 дней)
2. Выбор целевой архитектуры с обоснованием по нагрузке и бюджету (1–3 дня)
3. Настройка CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 дней)
4. IaC через Terraform или Pulumi (3–10 дней)
5. Настройка мониторинга и alerting (2–5 дней)
6. Документация runbooks и обучение команды (1–3 дня)

Наш опыт — 7 лет на рынке, более 50 проектов, гарантия работоспособности после деплоя.

Сроки

• Базовый деплой на VPS с Docker + Nginx + CI/CD: 1–2 недели.
• Настройка AWS инфраструктуры с Auto Scaling, RDS, CDN: 3–6 недель.
• Миграция на EKS с нуля: 6–12 недель.
• Настройка Vercel/Netlify для JAMstack: 3–5 дней.

Стоимость рассчитывается индивидуально в зависимости от сложности и объёма работ. Получите консультацию — оценим вашу архитектуру за один день.