Assertions и бюджеты

Lighthouse предоставляет мощные инструменты для контроля качества веб-приложений. Два ключевых аспекта, которые позволяют держать производительность, доступность и SEO под строгим контролем, — это assertions и budgets. Они помогают формализовать требования к метрикам и ресурсам, а также интегрировать проверку в CI/CD.

Assertions

Assertions в Lighthouse — это механизм проверки соответствия определённых метрик заданным условиям. Они позволяют не просто измерять показатели, но и гарантировать, что они находятся в допустимых пределах. Основные метрики, которые можно проверять через assertions, включают:

  • Performance: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS).
  • Accessibility: ошибки контраста, недостающие атрибуты alt, проблемы с фокусом.
  • SEO и Best Practices: наличие метатегов, правильные заголовки, безопасные соединения и другие рекомендации.

Assertions задаются в JSON-конфигурации Lighthouse и могут быть включены в процесс запуска через CLI или программно через Node.js. Структура assertion проста: указывается метрика и условие проверки, например:

{
  "assertions": {
    "first-contentful-paint": ["warn", "<2000"],
    "largest-contentful-paint": ["error", "<2500"],
    "total-blocking-time": ["error", "<300"]
  }
}

Особенности работы assertions:

  • warn — предупреждение, не блокирует CI/CD.
  • error — нарушение условий считается критическим и может прерывать сборку или деплой.
  • Поддерживаются логические операторы и диапазоны (<, <=, >, >=), что позволяет гибко настроить требования под проект.

Assertions можно использовать в сочетании с custom audits, расширяя стандартный набор проверок Lighthouse под специфические требования проекта.

Budgets

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

Основные типы бюджетов:

  1. Network request budgets Ограничивают количество сетевых запросов по категориям:

    • Скрипты (JS)
    • Стили (CSS)
    • Изображения
    • Шрифты
    • Другие ресурсы

    Пример ограничения числа запросов:

    {
  "resourceCounts": {
    "script": 20,
    "image": 50
  }
}

  2. Resource size budgets Ограничивают размер загружаемых ресурсов в килобайтах:

    {
  "resourceSizes": {
    "script": 500,
    "image": 2000
  }
}

  3. Total page budget Задаёт общий лимит на суммарный вес страницы, что позволяет контролировать скорость загрузки.

Особенности работы budgets:

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

Использование вместе: Assertions + Budgets

Совмещение assertions и budgets даёт комплексный контроль над качеством страницы:

  • Assertions следят за ключевыми метриками производительности, доступности и SEO.
  • Budgets контролируют ресурсы, чтобы метрики не ухудшались из-за больших скриптов или изображений.

Пример конфигурации с объединением:

{
  "assertions": {
    "largest-contentful-paint": ["error", "<2500"],
    "total-blocking-time": ["warn", "<300"]
  },
  "budgets": [
    {
      "path": "/",
      "resourceSizes": {
        "script": 500,
        "image": 2000
      },
      "resourceCounts": {
        "script": 20,
        "image": 50
      }
    }
  ]
}

Такой подход позволяет сразу выявлять узкие места, связанные как с метриками производительности, так и с размером и количеством ресурсов, предотвращая их накопление в процессе разработки.

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

  • Assertions и budgets лучше интегрировать в CI/CD, чтобы ошибки фиксировались до деплоя.
  • Для команд с большим количеством разработчиков полезно вести общий набор правил, чтобы метрики и лимиты были едиными.
  • Использование дифференцированных уровней строгости (warn и error) позволяет поддерживать баланс между строгим контролем и гибкостью в разработке.
  • Регулярно пересматривать бюджеты и assertions при добавлении новых функций или сторонних библиотек — это предотвращает «раздутие» страницы.

Механизмы assertions и budgets превращают Lighthouse из инструмента отчётов в инструмент контроля качества, интегрируемый в процесс разработки, который помогает держать производительность и ресурсные ограничения под строгим контролем.

Оглавление