Формула расчёта impact fraction и distance fraction

Impact fraction и distance fraction являются ключевыми компонентами метрик Web Vitals, особенно в контексте Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS). Они позволяют количественно оценить влияние визуальных изменений на восприятие страницы пользователем, и их корректный расчёт критичен для анализа производительности интерфейсов.

Impact fraction

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

Формула вычисления impact fraction для элемента, который переместился или появился, выглядит следующим образом:

[ = ]

Пояснения к формуле:

  • Площадь перекрытия элемента с viewport — это часть элемента, которая видна пользователю на экране в момент измерения.
  • Общая площадь элемента — это площадь всего DOM-элемента, включая невидимые части.
  • Значение impact fraction всегда находится в диапазоне от 0 до 1, где 0 означает, что элемент полностью вне видимой области, а 1 — что весь элемент полностью видим.

Пример вычисления:

  1. Элемент имеет размеры 400px × 200px (общая площадь 80,000px²).
  2. Видимая часть элемента на экране составляет 300px × 150px (перекрытая площадь 45,000px²).
  3. Impact fraction = 45,000 / 80,000 = 0.5625.

Таким образом, более чем половина элемента видна пользователю, что будет учитываться при расчёте метрик производительности.

Distance fraction

Distance fraction измеряет относительное смещение элемента относительно viewport при визуальном изменении. Она позволяет понять, насколько сильно элемент переместился по экрану, что особенно важно для расчёта CLS.

Формула вычисления distance fraction:

[ = ]

Подробности:

  • Смещение элемента измеряется как абсолютное расстояние между старой и новой позициями элемента на экране.
  • Размер viewport — ширина или высота видимой области страницы, в зависимости от направления смещения (по горизонтали или вертикали).
  • Значение distance fraction также нормализуется до диапазона 0–1. Значение 1 означает, что элемент сместился на всю ширину или высоту видимой области.

Пример расчёта:

  1. Элемент переместился по вертикали на 120px.
  2. Высота viewport составляет 800px.
  3. Distance fraction = 120 / 800 = 0.15.

Это означает, что элемент сместился на 15% высоты видимой области.

Использование impact fraction и distance fraction в метриках

Для CLS общий вклад смещения элемента вычисляется как произведение impact fraction и distance fraction:

[ = ]

Пояснение:

  • Это произведение учитывает одновременно масштаб видимого элемента и масштаб его смещения, создавая количественную оценку визуальной нестабильности страницы.
  • Если элемент виден полностью (impact fraction = 1) и смещается на всю ширину/высоту viewport (distance fraction = 1), максимальный вклад в CLS равен 1.
  • Частичные видимости и смещения дают пропорционально меньшие значения.

Пример полного расчёта:

  1. Элемент видим на 80% (impact fraction = 0.8).
  2. Смещается на 25% высоты viewport (distance fraction = 0.25).
  3. Layout Shift Score = 0.8 × 0.25 = 0.2.

Практические замечания при расчётах

  • Элементы вне экрана не влияют на CLS: impact fraction = 0.
  • Частично видимые элементы дают пропорционально меньший вклад.
  • Анимации и плавные переходы не учитываются, если они запланированы и не являются непредсказуемыми смещениями.
  • Для страниц с динамическим контентом необходимо вычислять impact fraction и distance fraction на каждом кадре визуального изменения, чтобы получить точный CLS.

Встроенные инструменты

В современных браузерах и библиотеке Web Vitals предоставляются API для автоматического вычисления этих показателей:

import { getCLS } from 'web-vitals';

getCLS(console.log);

Библиотека самостоятельно определяет видимые элементы и вычисляет impact fraction и distance fraction на основе текущих размеров viewport и смещений DOM-элементов. Прямой доступ к этим дробям позволяет строить собственные метрики или детализированные отчёты по визуальной стабильности интерфейса.

Хотите, я составлю визуальную схему с формулами, которая наглядно покажет, как impact fraction и distance fraction вычисляются на практике? Это сильно облегчает понимание для учебника.

Оглавление