Стратегии для шрифтов и изображений

Workbox предоставляет гибкие инструменты для организации кэширования ресурсов веб-приложений. При работе со статическими ресурсами, такими как шрифты и изображения, правильная стратегия кэширования критически важна для производительности и надежности приложения.

Кэширование шрифтов

Шрифты часто загружаются с внешних сервисов (например, Google Fonts) или локально. Они редко изменяются, поэтому кэширование их с длительным сроком жизни повышает скорость загрузки страницы.

Рекомендуемые стратегии:

  1. Cache First

    • Используется, когда шрифты практически не меняются.
    • Сначала ищется шрифт в кэше, если он найден — возвращается сразу. В противном случае — загружается из сети и добавляется в кэш.
    • Пример использования:
    import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'font',
  new CacheFirst({
    cacheName: 'fonts-cache',
    plugins: [
      new CacheableResponsePlugin({statuses: [0, 200]}),
      new ExpirationPlugin({maxAgeSeconds: 60 * 60 * 24 * 365, maxEntries: 30}),
    ],
  })
);

    Особенности:

    • maxAgeSeconds устанавливает срок хранения в кэше (например, один год).
    • maxEntries ограничивает количество сохраненных шрифтов, предотвращая разрастание кэша.

  2. Stale While Revalidate

    • Подходит, если требуется отображение шрифта сразу из кэша, но периодическое обновление ресурса в фоновом режиме.
    • Пользователь видит загруженный шрифт мгновенно, а кэш обновляется при следующем запросе.
    import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'font',
  new StaleWhileRevalidate({
    cacheName: 'fonts-cache',
    plugins: [
      new CacheableResponsePlugin({statuses: [0, 200]}),
    ],
  })
);

Кэширование изображений

Изображения — один из самых тяжелых элементов страницы. Неправильная стратегия кэширования приводит к медленной загрузке и увеличению потребления трафика.

Рекомендуемые стратегии:

  1. Cache First для статических изображений

    • Подходит для изображений, которые редко меняются (иконки, логотипы).
    • Пример конфигурации:
    registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new CacheableResponsePlugin({statuses: [0, 200]}),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

    Особенности:

    • maxEntries предотвращает переполнение кэша.
    • maxAgeSeconds ограничивает срок хранения устаревших изображений.

  2. Stale While Revalidate для часто обновляемых изображений

    • Подходит для динамических изображений (посты, аватары).
    • Кэш используется для мгновенной загрузки, а обновление происходит в фоне.
    registerRoute(
  ({request}) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'dynamic-images-cache',
    plugins: [
      new CacheableResponsePlugin({statuses: [0, 200]}),
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 24 * 60 * 60, // 1 день
      }),
    ],
  })
);

Дополнительные рекомендации

  • Сегментирование кэша: хранить шрифты и изображения в отдельных кэшах позволяет управлять их сроками жизни независимо.
  • Оптимизация размера кэша: использование ExpirationPlugin с ограничением maxEntries предотвращает накопление устаревших ресурсов.
  • Контроль успешных ответов: CacheableResponsePlugin позволяет кэшировать только успешные ответы (например, HTTP 200).
  • Версионирование: для ресурсов, которые могут изменяться, полезно добавлять версию к имени кэша (images-v1, fonts-v2) для принудительного обновления.

Эти подходы обеспечивают баланс между производительностью и актуальностью контента, минимизируют задержки загрузки и снижают нагрузку на сеть.

Оглавление