Каким образом можно выявить сдвиг макета (Layout Shift) на странице?

Сдвиг макета (Layout Shift) можно выявить с помощью инструментов разработчика в браузере и специальных метрик:

• Chrome DevTools: во вкладке "Performance" можно записать сессию загрузки страницы и увидеть моменты сдвигов макета, они отображаются как Layout Shift Events.

• Метрика CLS (Cumulative Layout Shift) из Web Vitals показывает суммарный сдвиг макета за время загрузки.

• JavaScript API: с помощью PerformanceObserver можно отследить события layout-shift:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift detected:', entry);
    }
  }
});
observer.observe({type: 'layout-shift', buffered: true});

Таким образом можно программно выявлять и анализировать сдвиги макета на странице.