LayoutShift

Интерфейс LayoutShift API производительности предоставляет информацию об устойчивости макета веб-страниц на основе перемещений элементов на странице.

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

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

Инструменты производительности могут использовать этот API для расчета оценки CLS.

Этот интерфейс расширяет следующие свойства PerformanceEntry, квалифицируя их следующим образом:

PerformanceEntry.duration Только для чтения Экспериментально

Всегда возвращает 0 (понятие продолжительности не применимо к сдвигам макета).

PerformanceEntry.entryType Только для чтения Экспериментально

Всегда возвращает "layout-shift".

PerformanceEntry.name Только для чтения Экспериментально

Всегда возвращает "layout-shift".

PerformanceEntry.startTime Только для чтения Экспериментально

Возвращает DOMHighResTimeStamp, представляющий время начала сдвига макета.

Этот интерфейс также поддерживает следующие свойства:

LayoutShift.value Экспериментально

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

LayoutShift.hadRecentInput Экспериментально

Возвращает true если lastInputTime меньше 500 миллисекунд в прошлом.

LayoutShift.lastInputTime Экспериментально

Возвращает время последнего исключающего события (ввода пользователя, которое исключило бы эту запись как фактор вклада в оценку CLS) или 0, если не произошло исключающего события ввода.

LayoutShift.sources Экспериментально

Возвращает массив объектов LayoutShiftAttribution с информацией об элементах, которые были сдвинуты.

LayoutShift.toJSON() Экспериментально

Преобразует свойства в JSON.

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

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

• LayoutShiftAttribution
• CLS