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 днів.

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Отримайте консультацію — оцінимо вашу архітектуру за один день.