Как оптимизировать Cache браузера?

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

Кэширование браузера — это один из самых мощных инструментов для оптимизации производительности веб-приложений. Браузер может сохранять статические ресурсы (HTML, CSS, JS, изображения), что позволяет снизить нагрузку на сеть и ускорить загрузку страниц при повторных посещениях.

HTTP заголовки для кэширования

Основные заголовки, которые управляют кэшированием:

Cache-Control — это главный заголовок, позволяющий контролировать поведение кэша. Директивы включают:

• max-age — время жизни ресурса в секундах
• public — ресурс может кэшироваться любым кэшем
• private — ресурс может кэшироваться только браузером
• no-cache — ресурс не кэшируется, требует валидация
• no-store — ресурс полностью исключен из кэша
• must-revalidate — после истечения max-age требуется переваидация на сервере

ETag (Entity Tag) — уникальный идентификатор версии ресурса. Браузер отправляет If-None-Match с сохраненным ETag, сервер отвечает 304 Not Modified если ресурс не изменился.

Last-Modified — дата последнего изменения. Браузер отправляет If-Modified-Since с сохраненной датой, сервер отвечает 304 если ресурс не изменился.

Стратегия контента

// Для статического контента (часто не меняется)
// Используем long-term cache с версионированием

// В Next.js можно использовать:
// next.config.js
module.exports = {
  headers: async () => {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=0, must-revalidate',
          },
        ],
      },
    ];
  },
};

Версионирование ресурсов

// Используем hash в имена файлов для версионирования
// Webpack/Next.js автоматически добавляет hash к статическим ресурсам

// app.js -> app.a1b2c3d4.js
// style.css -> style.f5e6d7c8.js

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

Оптимизация с помощью CDN

// CDN кэширует ресурсы на серверах по всему миру
// Клиент получает данные с ближайшего сервера

// Настройка в next.config.js для использования CDN
module.exports = {
  assetPrefix: process.env.CDN_URL || '',
};

Практические советы

1. Статические файлы — кэшируйте с max-age=31536000 (1 год) и версионированием
2. HTML страницы — используйте max-age=0, must-revalidate для проверки обновлений
3. API ответы — кэшируйте только если данные не меняются часто
4. Service Workers — для дополнительного кэширования

// Пример с Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    console.log('SW registered');
  });
}