Что такое Lighthouse и какие метрики он измеряет?

# Установка и запуск через CLI
npm install -g lighthouse

# Базовый аудит
lighthouse https://example.com --output html --output-path report.html

# Только performance
lighthouse https://example.com --only-categories=performance

# Мобильный (по умолчанию) и десктопный режимы
lighthouse https://example.com --preset=desktop
lighthouse https://example.com --preset=perf  # урезанный, только performance

Метрика                          Вес     Хорошо    Плохо
---------------------------------------------------------
First Contentful Paint (FCP)     10%     < 1.8s    > 3.0s
Largest Contentful Paint (LCP)   25%     < 2.5s    > 4.0s
Total Blocking Time (TBT)        30%     < 200ms   > 600ms
Cumulative Layout Shift (CLS)    25%     < 0.1     > 0.25
Speed Index (SI)                 10%     < 3.4s    > 5.8s

import lighthouse from 'lighthouse';
import puppeteer from 'puppeteer';

async function runAudit(url) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  const result = await lighthouse(url, {
      port: new URL(browser.wsEndpoint()).port,
      output: 'json',
      onlyCategories: ['performance'],
    });

  const { categories, audits } = result.lhr;

  console.log(`Performance score: ${categories.performance.score * 100}`);
  console.log(`FCP: ${audits['first-contentful-paint'].displayValue}`);
  console.log(`LCP: ${audits['largest-contentful-paint'].displayValue}`);
  console.log(`TBT: ${audits['total-blocking-time'].displayValue}`);
  console.log(`CLS: ${audits['cumulative-layout-shift'].displayValue}`);

  // Конкретные рекомендации
  const opportunities = Object.values(audits).filter(
    (a) => a.details?.type === 'opportunity' && a.details.overallSavingsMs > 0
  );

  for (const opp of opportunities) {
    console.log(`${opp.title}: можно сэкономить ${opp.details.overallSavingsMs} ms`);
  }

  await browser.close();
  return result;
}

runAudit('https:// example.com');

// lighthouserc.js
export default {
  ci: {
    collect: {
      url: ['http:// localhost:3000/', 'http:// localhost:3000/about'],
      numberOfRuns: 3, // среднее из трёх запусков
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.95 }],
        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
      },
    },
  },
};

# Запуск в CI
npm install -g @lhci/cli
lhci autorun --config=lighthouserc.js

// ❌ Сравнивать оценки между запусками напрямую

// Lighthouse показывает разные значения при каждом запуске из-за сети и CPU

// ✅ Делать несколько запусков и брать медиану
// lighthouse --output json | jq '.audits["first-contentful-paint"].numericValue'

// Запустить 5 раз, взять медиану

// ❌ Оптимизировать только DevTools Lighthouse (без throttling)

// DevTools по умолчанию эмулирует медленное соединение и CPU

// ✅ Тестировать в условиях, близких к реальным пользователям

// PageSpeed Insights показывает и лабораторные, и полевые данные (CrUX)