Установка через npm и подключение через CDN

Установка через npm

Библиотека Web Vitals доступна в виде пакета для Node.js, что позволяет интегрировать её в современные фронтенд-проекты, использующие сборщики модулей вроде Webpack, Vite или Parcel. Для установки пакета используется стандартная команда npm:

npm install web-vitals

После успешной установки пакет можно импортировать в JavaScript-модули проекта.

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

Здесь используются основные функции для измерения ключевых метрик производительности:

  • getCLS — Cumulative Layout Shift, метрика визуальной стабильности страницы.
  • getFID — First Input Delay, задержка первого взаимодействия пользователя с страницей.
  • getLCP — Largest Contentful Paint, время загрузки наибольшего видимого элемента.
  • getFCP — First Contentful Paint, время появления первого контента на странице.
  • getTTFB — Time to First Byte, время ответа сервера до получения первого байта.

Каждая функция принимает в качестве аргумента callback, который вызывается при изменении соответствующей метрики:

getCLS(console.log);
getFID(console.log);
getLCP(console.log);
getFCP(console.log);
getTTFB(console.log);

Callback получает объект метрики с такими ключевыми свойствами:

  • name — название метрики (например, “CLS”, “FID”).
  • value — числовое значение метрики.
  • delta — разница с предыдущим значением (для некоторых метрик).
  • id — уникальный идентификатор измерения.
  • entries — массив PerformanceEntry, если метрика поддерживает подробное отображение событий.

Подключение через CDN

Для проектов без сборщиков модулей библиотеку можно подключить напрямую через CDN. Это позволяет использовать Web Vitals без установки npm-пакета. Пример подключения через <script>:

<script src="https://unpkg.com/web-vitals@2.1.4/dist/web-vitals.umd.js"></script>
<script>
  webVitals.getCLS(console.log);
  webVitals.getFID(console.log);
  webVitals.getLCP(console.log);
  webVitals.getFCP(console.log);
  webVitals.getTTFB(console.log);
</script>

При подключении через CDN библиотека доступна глобально через объект webVitals. Все функции работают аналогично npm-версии, но не требуют импорта модулей.

Отличия установки через npm и подключения через CDN

Характеристика npm CDN
Интеграция с сборщиками Полная, поддержка tree-shaking Ограниченная, все функции подключены
Возможность обновления Через npm update Через обновление URL версии
Контроль версий Гибкий, фиксирование через package.json Необходим контроль вручную по URL
Размер проекта Только используемые функции Подключается весь UMD-бандл

Практические рекомендации

  • Для крупных приложений с системой сборки предпочтительнее использовать npm-пакет, чтобы интегрировать библиотеку в workflow и минимизировать размер бандла.
  • Для простых страниц или статических сайтов удобно подключение через CDN, так как оно не требует настройки сборки и позволяет быстро получать метрики.
  • Всегда фиксируйте версии, чтобы избежать неожиданных изменений API при обновлении библиотеки.

Настройка передачи метрик на сервер

Для аналитики и мониторинга метрики часто отправляются на сервер. Пример с использованием npm-версии:

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

function sendToAnalytics(metric) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

В случае CDN-подключения используется глобальный объект:

<script>
  function sendToAnalytics(metric) {
    navigator.sendBeacon('/analytics', JSON.stringify(metric));
  }

  webVitals.getCLS(sendToAnalytics);
  webVitals.getFID(sendToAnalytics);
  webVitals.getLCP(sendToAnalytics);
</script>

Использование sendBeacon рекомендуется для минимизации влияния на производительность страницы, особенно при закрытии вкладки браузера.

Итоговые моменты

  • npm — полная интеграция с проектом, контроль версий, возможность tree-shaking.
  • CDN — мгновенное подключение, удобно для быстрых прототипов и статических сайтов.
  • Метрики Web Vitals можно отправлять на сервер для дальнейшего анализа, что особенно важно для мониторинга пользовательского опыта на продуктивных сайтах.

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

Оглавление