Использование console для вывода метрик в разработке

Для измерения ключевых метрик пользовательского опыта в JavaScript используется библиотека Web Vitals, предоставляемая Google. Основной способ подключения — через npm или CDN:

// Через npm
import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

// Через CDN
<script src="https://unpkg.com/web-vitals/dist/web-vitals.iife.js"></script>

После подключения доступны функции для измерения каждой метрики: CLS, FID, LCP, FCP, TTFB.

Основные метрики Web Vitals

  • CLS (Cumulative Layout Shift) — суммарное смещение элементов страницы во время загрузки и взаимодействия.
  • FID (First Input Delay) — задержка первого взаимодействия пользователя с сайтом.
  • LCP (Largest Contentful Paint) — время рендеринга самого крупного элемента контента.
  • FCP (First Contentful Paint) — время отображения первого видимого контента.
  • TTFB (Time to First Byte) — время до получения первого байта ответа сервера.

Каждая из этих метрик измеряется отдельной функцией, которая принимает колбэк для обработки результатов.

Использование console для вывода метрик

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

import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

function logMetric(metric) {
  console.log(`[Web Vitals] ${metric.name}:`, metric.value, metric);
}

getCLS(logMetric);
getFID(logMetric);
getLCP(logMetric);
getFCP(logMetric);
getTTFB(logMetric);

В этом примере:

  • metric.name — имя метрики (CLS, FID, LCP, FCP, TTFB).
  • metric.value — числовое значение метрики, полезное для анализа производительности.
  • В объекте metric доступны дополнительные свойства: delta, id, entries, которые позволяют глубже исследовать события, влияющие на метрику.

Детализация объекта метрики

Каждая метрика передает в колбэк объект с ключевыми свойствами:

  • name — название метрики.
  • value — измеренное значение метрики.
  • delta — изменение значения метрики с момента предыдущего измерения.
  • id — уникальный идентификатор метрики для отслеживания.
  • entries — массив событий PerformanceEntry, которые привели к текущему значению метрики.

Пример анализа CLS через консоль:

getCLS((metric) => {
  console.log('CLS:', metric.value);
  metric.entries.forEach((entry) => {
    console.log('Layout shift:', entry.startTime, entry.sources);
  });
});

Это позволяет увидеть не только итоговое значение, но и конкретные элементы, вызвавшие сдвиг макета.

Варианты форматирования данных в консоли

Для удобства отладки можно применять:

  • console.table() — отображение массива метрик или событий в виде таблицы.
  • console.group() / console.groupEnd() — структурирование вывода по группам метрик.
  • console.warn() / console.error() — выделение проблемных значений, превышающих пороговые лимиты.

Пример с группировкой:

getLCP((metric) => {
  console.group(`LCP metric (${metric.id})`);
  console.log('Value:', metric.value);
  console.table(metric.entries);
  console.groupEnd();
});

Отслеживание пороговых значений

Для разработки важно сразу видеть метрики, которые выходят за рекомендуемые пороги:

  • CLS — ≤ 0.1
  • FID — ≤ 100 мс
  • LCP — ≤ 2.5 с
  • FCP — ≤ 1.8 с

Пример условного вывода в консоль с предупреждением:

getFID((metric) => {
  if (metric.value > 100) {
    console.warn(`FID превышен: ${metric.value} мс`);
  } else {
    console.log(`FID в норме: ${metric.value} мс`);
  }
});

Использование console для анализа паттернов

При комплексной разработке метрики Web Vitals можно логировать на разных этапах:

  • на первой загрузке страницы;
  • при динамическом рендеринге контента;
  • при взаимодействии пользователя с интерфейсом.

С помощью консоли легко отслеживать, какие изменения кода или новые компоненты вызывают ухудшение показателей производительности.

Совмещение Web Vitals с инструментами профилирования

Консоль можно комбинировать с Performance API:

getLCP((metric) => {
  console.log('LCP:', metric.value);
  console.log('Performance marks:', performance.getEntriesByType('mark'));
});

Это позволяет сопоставить события mark и measure с метриками Web Vitals, выявляя узкие места в рендеринге.

Хотите, я подготовлю следующую часть, посвящённую автоматической отправке Web Vitals на сервер для аналитики?

Оглавление