Кеширование

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

Типы кеширования

  1. HTTP-кеширование Использует стандартные заголовки HTTP (Cache-Control, Expires, ETag, Last-Modified) для определения политики хранения ресурсов. Lighthouse проверяет наличие этих заголовков и их правильную конфигурацию.

    • Cache-Control: max-age=31536000 — ресурс может храниться в течение одного года.
    • ETag и Last-Modified позволяют браузеру проверять, изменился ли ресурс, минимизируя объем передаваемых данных.

  2. Service Workers и кеширование через PWA Service Worker позволяет создавать пользовательский кеш с расширенной логикой. Lighthouse оценивает, насколько правильно настроен кеш для оффлайн-доступа и повторного использования ресурсов. Используются методы caches.open() и cache.put() для управления кешированными данными.

  3. Кеширование динамического контента Даже динамические страницы могут использовать кеширование через стратегии типа stale-while-revalidate, что позволяет отдавать пользователю устаревший контент, пока загружается обновленный. Lighthouse фиксирует отсутствие подобных стратегий как потенциальную точку улучшения.

Метрики Lighthouse, связанные с кешированием

  • Serve static assets with an efficient cache policy Этот аудит проверяет, что статические ресурсы (CSS, JS, изображения) имеют правильные HTTP-заголовки кеширования. Нарушение рекомендаций снижает оценку производительности.

  • Avoid unnecessary network requests Lighthouse анализирует повторные загрузки ресурсов, которые могли бы быть закешированы. Это важно для сокращения трафика и ускорения отклика страниц.

  • Time to First Byte (TTFB) и кеширование Использование кеша на стороне клиента уменьшает количество запросов к серверу, что напрямую влияет на TTFB. Lighthouse учитывает задержки сети и эффективность кеша в расчетах производительности.

Настройка кеширования для оптимизации

  1. Выбор стратегии кеширования

    • Cache-Control: public, max-age=<seconds> — для неизменяемых ресурсов.
    • Cache-Control: no-cache — для динамического контента с проверкой актуальности.
    • stale-while-revalidate — для балансировки между скоростью отдачи и актуальностью.

  2. Разделение ресурсов по важности

    • Основной CSS и JS следует кешировать дольше, чтобы ускорить повторные визиты.
    • Часто изменяемый контент требует короткого времени жизни или использования Service Worker с актуализацией.

  3. Управление версионированием ресурсов

    • Добавление хеша в имя файла (app.abc123.js) позволяет установить долгий срок кеширования, не опасаясь устаревших версий.
    • Lighthouse учитывает отсутствие контроля версий как потенциальный источник проблем с кешем.

Анализ Lighthouse и рекомендации по кешированию

  • Проверка заголовков Cache-Control и ETag для всех статических ресурсов.
  • Выявление ресурсов, загружающихся повторно без необходимости.
  • Оценка использования Service Worker для PWA и правильного управления кешем.
  • Определение неэффективных стратегий кеширования динамического контента.

Эффективное кеширование снижает нагрузку на сервер, ускоряет загрузку страниц и повышает показатели Lighthouse, такие как Performance и SEO. Понимание того, какие ресурсы и как кешируются, позволяет реализовать точечные оптимизации без лишних сетевых запросов.

Оглавление