javascript42
Главная
Все учебники
Блог
Учебник Web Vitals
Введение в производительность веб-приложений
Что такое пользовательский опыт с точки зрения производительности
Почему скорость влияет на бизнес-метрики
История метрик производительности в браузерах
Ограничения старых подходов к измерению скорости
Появление Web Vitals как стандарта Google
Основы библиотеки web-vitals
Архитектура и принципы работы библиотеки
Установка через npm и подключение через CDN
Структура пакета и точки входа
Разница между web-vitals и web-vitals/attribution
Поддерживаемые браузеры и ограничения среды
Версионирование и обратная совместимость
Отличия от прямого использования PerformanceObserver
Метрика LCP — Largest Contentful Paint
Определение и смысл метрики
Какие элементы считаются кандидатами на LCP
Алгоритм выбора наибольшего элемента
Когда LCP финализируется
Пороговые значения: хорошо, требует улучшения, плохо
Функция onLCP и её параметры
Объект LCPMetric: поля и типы
Свойство element и определение виновного элемента
Атрибуция через LCPAttribution
Поле url и загрузка внешних ресурсов
Поле timeToFirstByte и его связь с LCP
Поле resourceLoadDelay и resourceLoadTime
Поле elementRenderDelay
Влияние изображений на LCP
Влияние текстовых блоков на LCP
Оптимизация через preload и fetchpriority
Связь LCP с кешированием и CDN
Отладка LCP в DevTools
Метрика CLS — Cumulative Layout Shift
Формула расчёта impact fraction и distance fraction
Что такое layout shift record
Сессионное окно и алгоритм накопления сдвигов
Функция onCLS и её поведение
Объект CLSMetric: поля и типы
Свойство entries и массив LayoutShift
Атрибуция через CLSAttribution
Поле largestShiftTarget и largestShiftValue
Поле largestShiftSource и его геометрия
Анимации и transitions, не влияющие на CLS
Влияние шрифтов и FOUT на CLS
Влияние динамически вставляемого контента
Резервирование места под изображения и медиа
Якорное позиционирование и его роль
Отладка CLS в DevTools и трассировке
Метрика INP — Interaction to Next Paint
Почему INP заменил FID
Какие взаимодействия учитываются
Алгоритм выбора наихудшего взаимодействия
Поправка на количество взаимодействий
Пороговые значения
Функция onINP и её поведение
Объект INPMetric: поля и типы
Атрибуция через INPAttribution
Поле interactionTarget и определение элемента
Поле interactionType
Поле inputDelay и его причины
Поле processingDuration и долгие обработчики
Поле presentationDelay
Связь INP с длинными задачами
Влияние основного потока на INP
Оптимизация обработчиков событий
Передача работы в веб-воркеры
Планировщик задач и scheduler.yield
Отладка INP в DevTools и трассировке
Метрики FCP и TTFB
Определение FCP и его роль среди метрик
Пороговые значения FCP
Функция onFCP и объект FCPMetric
Что влияет на FCP: рендер-блокирующие ресурсы
Связь FCP с LCP
Определение TTFB и границы измерения
Пороговые значения TTFB
Функция onTTFB и объект TTFBMetric
Разбивка TTFB через NavigationTimingAttribution
Поля waitingDuration, dnsDuration, connectionDuration, requestDuration
Редиректы и их учёт в TTFB
Влияние серверного времени ответа
Связь TTFB с остальными метриками
Устаревшая метрика FID
Определение и история метрики
Почему FID ограничен только первым взаимодействием
Отличия FID от INP
Функция onFID в legacy-версиях
Миграция кода с FID на INP
Общий API библиотеки
Тип Metric и его универсальная структура
Поле name и перечень возможных значений
Поле value и единицы измерения
Поле delta и его использование при повторных отчётах
Поле rating и автоматическая оценка
Поле navigationType и типы навигации
Поле entries и связь с Performance API
Поле id и уникальность сессии
Поведение при повторных вызовах callback
Параметр reportAllChanges и когда его использовать
Параметр durationThreshold в onINP
Функция onMetric для единой подписки на все метрики
Attribution build: углублённая диагностика
Что такое attribution-версия и когда её использовать
Импорт из web-vitals/attribution
Общая структура объектов Attribution
NavigationTimingAttribution для FCP и TTFB
LCPAttribution: полная цепочка загрузки
CLSAttribution: геометрия и виновные элементы
INPAttribution: полный цикл взаимодействия
Overhead атрибуции и производительность
Использование атрибуции для построения диагностических отчётов
Интеграция с Performance Observer API
Как web-vitals использует PerformanceObserver внутри
Типы записей: largest-contentful-paint, layout-shift, event, paint
Работа с buffered записями
Понятие visibility state и его влияние на сбор метрик
Back/forward cache и метрики при bfcache-навигации
Prerendering и метрики при активации пред-рендера
Soft navigation и экспериментальный режим
Сбор и отправка метрик
Архитектура pipeline сбора метрик
Использование sendBeacon для отправки при закрытии вкладки
Использование fetch с keepalive
Когда отправлять: on-change против on-unload стратегии
Дедупликация метрик по полю id
Агрегация delta при многократных обновлениях
Семплирование трафика и репрезентативность данных
Фильтрация ботов и синтетических запросов
Формирование payload и схема данных
Отправка в Google Analytics 4
Отправка в собственный бэкенд
Batching нескольких метрик в одном запросе
Визуализация и анализ данных
Разница между медианой и 75-м перцентилем
Почему Google использует p75
Понятие хорошего, среднего и плохого распределения
Сегментация по типу устройства
Сегментация по типу соединения
Сегментация по странице и шаблону
Интерпретация дельта-значений при анализе
Лабораторные и полевые данные
Разница между lab и field данными
Почему лабораторные инструменты не заменяют RUM
Lighthouse и его связь с Web Vitals
PageSpeed Insights и CrUX
Chrome User Experience Report: структура и доступ
BigQuery и работа с CrUX напрямую
CrUX API и программный доступ
Связь между собственным RUM и CrUX
Тестирование кода сбора метрик
Особенности тестирования асинхронного и event-driven кода
Мокирование PerformanceObserver в Jest и Vitest
Симуляция метрических событий вручную
Проверка корректности payload
Интеграционные тесты с реальным браузером через Playwright
Тестирование поведения при bfcache
Проверка edge cases: нет взаимодействий, нет сдвигов
Отладка в браузере
Chrome DevTools: вкладка Performance и метрики
Web Vitals расширение для Chrome
Маркеры и измерения в трассировке
Использование console для вывода метрик в разработке
Логирование attribution-данных для диагностики
Анализ конкретного плохого взаимодействия по трассировке
Поиск виновного кода по стеку вызовов
Web Vitals в различных архитектурах
Метрики в одностраничных приложениях
Мягкие навигации в SPA и их обработка
Метрики в серверном рендеринге
Метрики в статически генерируемых сайтах
Метрики в приложениях на Next.js
Встроенный хук useReportWebVitals
Метрики в приложениях на Nuxt
Метрики в приложениях на Astro
Метрики в PWA и при офлайн-навигации
Iframes и ограничения сбора метрик
Влияние Web Vitals на поисковую выдачу
Page Experience Signal и его компоненты
Как Google использует CrUX для ранжирования
Требования к порогу хороших метрик для всего сайта
Мониторинг через Google Search Console
Отчёт Core Web Vitals в Search Console
Справочник типов TypeScript
Полный список экспортируемых типов
Metric и его дженерик-параметры
MetricType и MetricRatingThresholds
ReportOpts и его поля
LCPMetric, CLSMetric, INPMetric, FCPMetric, TTFBMetric
Attribution-типы для каждой метрики
Типизация callback-функций
Использование типов в TypeScript-проектах