Пороговые значения

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

Основные принципы работы порогов

Lighthouse предоставляет возможность конфигурировать пороговые значения на уровне отдельных метрик или категорий. Конфигурация выполняется через объект config.settings.thresholds, где ключи соответствуют метрикам, а значения — числовым порогам.

Пример структуры:

const config = {
  settings: {
    thresholds: {
      performance: 90,
      accessibility: 95,
      'first-contentful-paint': 2000,
      'largest-contentful-paint': 2500,
      'cumulative-layout-shift': 0.1
    }
  }
};
  • Performance — общая производительность страницы.
  • Accessibility — оценка доступности для пользователей с ограничениями.
  • First Contentful Paint (FCP) — время до появления первого визуального контента.
  • Largest Contentful Paint (LCP) — время до загрузки основного контента.
  • Cumulative Layout Shift (CLS) — показатель стабильности визуальной верстки.

Настройка порогов для метрик

Пороговое значение метрики задаёт конкретное числовое ограничение, которое является критерием прохождения аудита:

  • Метрика FCP: если значение страницы превышает 2000 мс, тест будет провален.
  • Метрика LCP: превышение 2500 мс считается отклонением от нормы.
  • Метрика CLS: любое значение выше 0.1 означает нестабильную верстку и провал теста.

Для категориальных порогов, таких как performance или accessibility, порог задается как процентное соотношение, отражающее оценку Lighthouse от 0 до 100.

Применение порогов в автоматизации

Использование пороговых значений позволяет интегрировать Lighthouse в CI/CD процессы, например, через Node.js API:

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, output: 'json', onlyCategories: ['performance', 'accessibility']};
  const runnerResult = await lighthouse(url, options);

  const report = runnerResult.lhr;
  
  if (report.categories.performance.score * 100 < 90) {
    console.log('Порог производительности не достигнут');
  }
  
  await chrome.kill();
}

В этом примере пороговое значение для производительности установлено на уровне 90%. При нарушении порога скрипт сигнализирует о проблеме, что позволяет автоматически контролировать качество на каждом деплое.

Комбинирование порогов

Lighthouse позволяет задавать пороги как для отдельных метрик, так и для категорий одновременно. При этом логика проверки учитывает оба уровня:

  1. Категория: общий балл по группе аудитов.
  2. Метрика: конкретный числовой показатель.

Такой подход даёт гибкость: можно строго контролировать критические показатели, например, LCP, и одновременно следить за общей производительностью страницы.

Рекомендации по выбору порогов

  • Performance — 90–95% для крупных проектов; 80–85% допустимо для MVP.
  • Accessibility — не ниже 90% для соответствия базовым стандартам WCAG.
  • FCP/LCP — оптимально до 2000–2500 мс.
  • CLS — максимально 0.1 для стабильного пользовательского опыта.

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

Влияние на CI/CD и качество продукта

Настройка порогов позволяет:

  • Отслеживать ухудшение ключевых метрик на ранних стадиях разработки.
  • Автоматически блокировать релизы при нарушении минимальных стандартов.
  • Создавать стандартизированные критерии качества для всей команды.

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

Оглавление