HTTP-кэширование и CDN: стратегии кэширования для веб-производительности

Что такое HTTP-кэширование?

HTTP-кэширование — это временное хранение ресурсов (HTML, CSS, JS, изображения) браузерами и промежуточными серверами (proxy, CDN).

Кэширование уменьшает сетевой трафик при повторных запросах и ускоряет загрузку страницы. Правильно настроенный кэш может снизить нагрузку на сервер до 80%.

Два типа кэша: кэш браузера (клиентская сторона) и разделяемый кэш (CDN, proxy). Оба служат разным целям.

Заголовок Cache-Control — основной механизм, контролирующий поведение кэширования. Содержит директивы, такие как max-age, s-maxage, no-cache, no-store.

Заголовки Cache-Control

max-age=3600: указывает, что ресурс fresh в течение 3600 секунд (1 час). В течение этого времени браузер не делает сетевой запрос.

s-maxage=3600: max-age для разделяемых кэшей (CDN). Браузер использует max-age, CDN использует s-maxage.

no-cache: ресурс должен валидироваться с сервером при каждом использовании. Хранится в кэше, но revalidируется перед использованием.

no-store: ресурс не хранится ни в каком кэше. Используется для чувствительных данных (личная информация, банкинг).

public/private: public означает, что может храниться в любом кэше. private означает, что хранится только в кэше браузера (пользовательский контент).

immutable: ресурс никогда не меняется (versioned assets). Браузер не выполняет revalidation, улучшая производительность.

ETag и Last-Modified

ETag (Entity Tag): уникальный идентификатор ресурса. Сервер использует его для проверки, изменился ли ресурс.

Last-Modified: указывает дату последнего изменения ресурса. Браузер делает условный запрос с заголовком If-Modified-Since.

Условный запрос: браузер делает запрос с заголовком If-None-Match (ETag) или If-Modified-Since (Last-Modified). Если ресурс не изменился, сервер возвращает 304 Not Modified.

304 Not Modified: если ресурс не изменился, сервер возвращает только заголовки, не body. Это экономит bandwidth.

CDN (Content Delivery Network)

CDN — это сеть, которая обслуживает статические ресурсы (изображения, CSS, JS, шрифты) с серверов в разных точках мира.

CDN обслуживает контент с сервера, ближайшего к пользователю. Это снижает latency на 50-80%.

Популярные CDN: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. У каждого разные цены и функции.

Конфигурация CDN: origin-сервер (источник), edge-серверы (конечные точки), cache TTL (время жизни), purge (очистка кэша).

Динамический контент с CDN: некоторые CDN (Cloudflare Workers, Fastly Compute) могут генерировать динамический контент на edge.

Стратегии кэширования

Cache First: отдавать из кэша сначала, получать из сети, если недоступно. Идеально для статических ресурсов (CSS, JS, изображения).

Network First: получать из сети сначала, возвращаться к кэшу при неудаче. Идеально для динамического контента (ответы API).

Stale While Revalidate: отдавать из кэша, обновлять из сети в фоне. Обеспечивает быстрый ответ, сохраняя контент свежим.

Cache Only: отдавать только из кэша. Используется для офлайн-приложений.

Network Only: получать только из сети. Используется для данных в реальном времени (курсы акций, чат).

Cache Busting

Versioned filenames: измените имя файла с помощью style.css?v=1.2.3 или style.abc123.css. Браузер загружает новый файл.

Query string: cache busting с помощью style.css?v=20261025. Некоторые CDN не используют query string как ключ кэша.

Content hash: Webpack/Vite создаёт hash на основе содержимого файла (main.a1b2c3.js). Hash меняется, когда меняется содержимое.

Service Worker: новый Service Worker становится активным немедленно с помощью self.skipWaiting() и clients.claim(). Кэш обновляется.