Настройка автоматического мониторинга Core Web Vitals сайта

Настройка автоматического мониторинга Core Web Vitals сайта

Core Web Vitals — LCP, CLS, INP — входят в сигналы ранжирования Google с 2021 года. Но важнее SEO-аспекта то, что они напрямую коррелируют с конверсией: каждые 100ms задержки LCP снижают конверсию примерно на 1%, CLS выше 0.25 на мобильных приводит к случайным нажатиям и уходам. Мониторинг нужен постоянный, а не разовый аудит.

Два уровня данных

Лабораторные — Lighthouse, симулированный пользователь, стабильное окружение. Запускаются после каждого деплоя, дают мгновенную обратную связь.

Полевые — CrUX (Chrome UX Report), реальные данные Chrome-пользователей за 28 дней. Доступны через PSI API и CrUX API. Отражают реальный опыт — учитывают медленные устройства, плохие сети, кешированные/некешированные загрузки.

Разрыв между ними — норма. Лабораторный LCP = 1.8s, полевой = 3.1s. Это не значит, что измерения неверны: реальные пользователи пришли с медленных соединений на дешёвых телефонах.

CrUX API — полевые данные без посредников

Google предоставляет CrUX API бесплатно с ключом Cloud Console:

import requests

CRUX_API_URL = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord'

def fetch_crux(url: str, api_key: str, form_factor: str = 'PHONE') -> dict:
    payload = {
        'url': url,
        'formFactor': form_factor,  # PHONE, DESKTOP, TABLET
        'metrics': [
            'largest_contentful_paint',
            'cumulative_layout_shift',
            'interaction_to_next_paint',
            'first_contentful_paint',
            'experimental_time_to_first_byte',
        ],
    }
    resp = requests.post(
        f'{CRUX_API_URL}?key={api_key}',
        json=payload,
        timeout=30,
    )
    if resp.status_code == 404:
        return {'error': 'insufficient_data', 'url': url}
    resp.raise_for_status()
    return resp.json()

def parse_crux_metrics(crux_data: dict) -> dict:
    record = crux_data.get('record', {})
    metrics = record.get('metrics', {})

    def extract(key):
        m = metrics.get(key, {})
        histo = m.get('histogram', [])
        p75 = m.get('percentiles', {}).get('p75')
        return {'p75': p75, 'histogram': histo}

    return {
        'lcp': extract('largest_contentful_paint'),
        'cls': extract('cumulative_layout_shift'),
        'inp': extract('interaction_to_next_paint'),
        'fcp': extract('first_contentful_paint'),
        'ttfb': extract('experimental_time_to_first_byte'),
    }

Lighthouse через Node.js для лабораторных данных

Для автоматизации после деплоя — Node.js CLI или programmatic API:

// monitor.js
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const fs = require('fs');

async function runLighthouse(url, options = {}) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const opts = {
    port: chrome.port,
    onlyCategories: ['performance'],
    formFactor: options.formFactor || 'mobile',
    throttlingMethod: 'simulate',
    ...options,
  };

  const runnerResult = await lighthouse(url, opts);
  await chrome.kill();

  const { lhr } = runnerResult;
  const audits = lhr.audits;

  return {
    score: lhr.categories.performance.score,
    lcp: audits['largest-contentful-paint'].numericValue,
    fcp: audits['first-contentful-paint'].numericValue,
    tbt: audits['total-blocking-time'].numericValue,
    cls: audits['cumulative-layout-shift'].numericValue,
    tti: audits['interactive'].numericValue,
    speed_index: audits['speed-index'].numericValue,
    server_response_time: audits['server-response-time'].numericValue,
  };
}

// Запуск для нескольких страниц
const pages = [
  'https://example.com/',
  'https://example.com/catalog/',
  'https://example.com/product/1/',
];

(async () => {
  const results = [];
  for (const url of pages) {
    const mobile = await runLighthouse(url, { formFactor: 'mobile' });
    const desktop = await runLighthouse(url, { formFactor: 'desktop' });
    results.push({ url, mobile, desktop, timestamp: new Date().toISOString() });
  }
  fs.writeFileSync('cwv_results.json', JSON.stringify(results, null, 2));
})();

Интеграция в CI/CD

После деплоя — автоматическая проверка с провалом pipeline при деградации:

# .github/workflows/cwv-check.yml
name: Core Web Vitals Check

on:
  deployment_status:

jobs:
  cwv:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install lighthouse chrome-launcher

      - name: Run CWV check
        run: |
          node scripts/cwv-check.js \
            --url ${{ github.event.deployment_status.environment_url }} \
            --budget '{"performance": 0.7, "lcp": 4000, "cls": 0.1, "tbt": 600}'
        env:
          FAIL_ON_REGRESSION: 'true'

// scripts/cwv-check.js
const args = require('minimist')(process.argv.slice(2));
const budget = JSON.parse(args.budget);

runLighthouse(args.url).then(result => {
  const failures = [];
  if (result.score < budget.performance)
    failures.push(`Performance score ${result.score} < ${budget.performance}`);
  if (result.lcp > budget.lcp)
    failures.push(`LCP ${result.lcp}ms > ${budget.lcp}ms`);
  if (result.cls > budget.cls)
    failures.push(`CLS ${result.cls} > ${budget.cls}`);
  if (result.tbt > budget.tbt)
    failures.push(`TBT ${result.tbt}ms > ${budget.tbt}ms`);

  if (failures.length > 0) {
    console.error('CWV check FAILED:\n' + failures.join('\n'));
    if (process.env.FAIL_ON_REGRESSION === 'true') process.exit(1);
  } else {
    console.log('CWV check passed.');
  }
});

Хранение и тренды

CREATE TABLE cwv_snapshots (
    id SERIAL PRIMARY KEY,
    url TEXT NOT NULL,
    source VARCHAR(20) NOT NULL,     -- 'lighthouse' или 'crux'
    form_factor VARCHAR(10) NOT NULL, -- 'mobile', 'desktop'
    measured_at TIMESTAMP NOT NULL,

    -- Core Web Vitals
    lcp_ms INTEGER,
    cls NUMERIC(6,4),
    inp_ms INTEGER,
    fcp_ms INTEGER,
    ttfb_ms INTEGER,

    -- Lighthouse-only
    performance_score NUMERIC(4,2),
    tbt_ms INTEGER,
    tti_ms INTEGER,
    speed_index_ms INTEGER,

    -- Метаданные
    deploy_id TEXT,
    commit_sha TEXT
);

Хранить commit SHA вместе с замером — позволяет точно определить, какой деплой сломал метрики.

Визуализация трендов в Grafana

Grafana-дашборд на основе PostgreSQL с отображением недельного тренда по каждой метрике и маркерами деплоев:

-- Запрос для панели Grafana: тренд LCP
SELECT
    date_trunc('day', measured_at) AS time,
    AVG(lcp_ms) AS avg_lcp,
    PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY lcp_ms) AS p75_lcp
FROM cwv_snapshots
WHERE url = '${url}'
  AND form_factor = 'mobile'
  AND source = 'crux'
  AND measured_at >= NOW() - INTERVAL '90 days'
GROUP BY 1
ORDER BY 1;

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

Ориентиры Google (p75 полевых данных):

Для лабораторного мониторинга разумнее использовать более жёсткие пороги (LCP ≤ 3.0s, TBT ≤ 500ms) с учётом разрыва между лаб и полевыми данными.

Сроки

Настройка CrUX API + Lighthouse + хранение в PostgreSQL + Grafana-дашборд — 3–4 рабочих дня. Интеграция в CI/CD с провалом по бюджету — 1 дополнительный день. Алерты в Telegram/Slack при ухудшении полевых метрик — ещё 0.5–1 день.