Отладка изменений макета

Узнайте, как выявить и исправить сдвиги макета.

Кэти Хемпениус
Katie Hempenius
X
Барри Поллард

Опубликовано: 11 марта 2021 г., Последнее обновление: 7 февраля 2025 г.

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

Оснастка

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

API нестабильности макета

API нестабильности макета — это механизм браузера для измерения и составления отчетов об изменениях макета. Все инструменты для отладки изменений макета, включая DevTools, в конечном итоге основаны на API нестабильности макета. Однако прямое использование Layout Instability API является мощным инструментом отладки благодаря своей гибкости.

Использование

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

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

При запуске этого сценария имейте в виду, что:

  • Опция buffered: true указывает, что PerformanceObserver должен проверить буфер записей производительности браузера на предмет записей производительности, которые были созданы до инициализации наблюдателя. В результате PerformanceObserver сообщит об изменениях макета, произошедших как до, так и после его инициализации. Имейте это в виду при проверке журналов консоли. Первоначальное избыток изменений макета может отражать невыполненную отчетность, а не внезапное возникновение многочисленных изменений макета.
  • Чтобы избежать влияния на производительность, PerformanceObserver ждет, пока основной поток не будет простаивать, чтобы сообщить об изменениях макета. В результате, в зависимости от того, насколько занят основной поток, может возникнуть небольшая задержка между моментом сдвига макета и его регистрацией в консоли.
  • Этот сценарий игнорирует изменения макета, произошедшие в течение 500 мс после ввода пользователя, и поэтому не учитываются в CLS.

Информация о сдвигах макета передается с помощью комбинации двух API: интерфейсов LayoutShift и LayoutShiftAttribution . Каждый из этих интерфейсов описан более подробно в следующих разделах.

LayoutShift

О каждом сдвиге макета сообщается с помощью интерфейса LayoutShift . Содержимое записи выглядит следующим образом:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Предыдущая запись указывает на сдвиг макета, во время которого три элемента DOM изменили положение. Оценка смещения макета для этого конкретного смещения макета составила 0.175 .

Вот свойства экземпляра LayoutShift , которые наиболее важны для отладки изменений макета:

Свойство Описание
sources Свойство sources перечисляет элементы DOM, которые были перемещены во время изменения макета. Этот массив может содержать до пяти источников. В случае, если сдвиг макета затронул более пяти элементов, сообщается о пяти крупнейших (с точки зрения влияния на стабильность макета) источниках смещения макета. Эта информация передается с помощью интерфейса LayoutShiftAttribution (подробнее описано ниже).
value Свойство value сообщает оценку сдвига макета для конкретного сдвига макета.
hadRecentInput Свойство hadRecentInput указывает, произошел ли сдвиг макета в течение 500 миллисекунд после ввода пользователя.
startTime Свойство startTime указывает, когда произошел сдвиг макета. startTime указывается в миллисекундах и измеряется относительно времени начала загрузки страницы .
duration Свойство duration всегда будет установлено в 0 . Это свойство унаследовано от интерфейса PerformanceEntry (интерфейс LayoutShift расширяет интерфейс PerformanceEntry ). Однако концепция продолжительности не применяется к событиям смещения макета, поэтому для нее установлено значение 0 . Информацию об интерфейсе PerformanceEntry смотрите в спецификации .

LayoutShiftАтрибуция

Интерфейс LayoutShiftAttribution описывает один сдвиг одного элемента DOM. Если несколько элементов смещаются во время изменения макета, свойство sources содержит несколько записей.

Например, следующий JSON соответствует сдвигу макета с одним источником: сдвигу вниз элемента DOM <div id='banner'> с y: 76 на y:246 .

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Свойство node идентифицирует элемент HTML, который сместился. При наведении курсора на это свойство в DevTools выделяется соответствующий элемент страницы.

Свойства previousRect и currentRect сообщают размер и положение узла.

  • Координаты x и y сообщают координату x и координату y соответственно верхнего левого угла элемента.
  • Свойства width и height сообщают ширину и высоту элемента соответственно.
  • Свойства top , right , bottom и left сообщают значения координат x или y, соответствующие заданному краю элемента. Другими словами, значение top равно y ; значение bottom равно y+height .

Если все свойства previousRect установлены в 0, это означает, что элемент переместился в поле зрения. Если все свойства currentRect установлены в 0, это означает, что элемент вышел из поля зрения.

Одна из наиболее важных вещей, которую следует понимать при интерпретации этих результатов, заключается в том, что элементы, указанные в качестве источников, — это элементы, которые сместились во время изменения макета. Однако возможно, что эти элементы лишь косвенно связаны с «основной причиной» нестабильности макета. Вот несколько примеров.

Пример №1

Об этом сдвиге макета будет сообщаться с одним источником: элементом B. Однако основной причиной этого изменения макета является изменение размера элемента A.

Пример, показывающий сдвиг макета, вызванный изменением размеров элемента.

Пример №2

О сдвиге макета в этом примере будет сообщено с помощью двух источников: элемента A и элемента B. Основной причиной этого смещения макета является изменение положения элемента A.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример №3

О сдвиге макета в этом примере будет сообщаться с одним источником: элементом B. Изменение положения элемента B привело к этому сдвигу макета.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример №4

Хотя элемент B меняет размер, в этом примере сдвиг макета не происходит.

Пример, показывающий, как элемент меняет размер, но не вызывает сдвига макета

Посмотрите демонстрацию того, как API нестабильности макета сообщает об изменениях в DOM .

Инструменты разработчика

DevTools имеет ряд инструментов, помогающих отлаживать изменения макета.

Панель производительности

Представление показателей в реальном времени на панели «Производительность» позволяет вам взаимодействовать со страницей и отслеживать оценку CLS, чтобы выявлять взаимодействия, вызывающие большие сдвиги макета.

Записи Layout Shift отображаются на экране показателей в реальном времени панели производительности Chrome DevTools.
Представление показателей в реальном времени на панели производительности позволяет отслеживать оценку CLS веб-страницы во время взаимодействия со страницей.

Как только вы сможете достоверно воспроизвести сдвиг макета, вы можете выполнить трассировку, чтобы получить еще больше деталей:

Записи Layout Shift отображаются на панели производительности Chrome DevTools.
После записи новой трассы на панели «Производительность» дорожка результатов «Сдвиги макета» заполняется фиолетовыми полосами, отображающими кластеры « Layout Shift . При нажатии на ромбы отображается анимация сдвига и подробные сведения на панели «Сводка» .

Сдвиги макета выделяются на дорожке «Сдвиги макета» . Группы фиолетовых линий смещаются в кластеры сдвигов, а ромбы показывают отдельные сдвиги в этом кластере. Размер ромба пропорционален размеру смены, что позволяет вам отточить самые большие смены.

При нажатии на сдвиг отображается всплывающее окно с анимацией сдвига и выделение элемента фиолетовым цветом.

Кроме того, представление «Сводка» для записи Layout Shift включает время начала, оценку сдвига, а также сдвинутые элементы. Это особенно полезно для получения более подробной информации о проблемах CLS при загрузке, поскольку это легко воспроизводится с помощью профиля производительности перезагрузки.

Это также связано с информацией о виновниках смещения макета , отображаемой на панели Insights слева, которая показывает общий CLS вверху, а также возможные причины смещения макета.

Дополнительную информацию об использовании панели «Производительность» см. в документе «Справочник по анализу производительности» .

Выделить области смещения макета

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

Чтобы включить области смещения макета в DevTools, выберите «Настройки» > «Дополнительные инструменты» > «Визуализация» > «Области смещения макета», а затем обновите страницу, которую вы хотите отладить. Области смещения макета будут ненадолго выделены фиолетовым цветом.

Мыслительный процесс для выявления причины сдвигов макета

Вы можете использовать следующие шаги, чтобы определить причину смещения макета независимо от того, когда и как происходит сдвиг макета. Эти шаги можно дополнить запуском Lighthouse, однако имейте в виду, что Lighthouse может определять только изменения макета, произошедшие во время начальной загрузки страницы. Кроме того, Lighthouse также может предлагать только некоторые причины изменений макета, например элементы изображения, у которых нет явно заданной ширины и высоты.

Определите причину сдвига макета

Сдвиги макета могут быть вызваны следующими событиями:

  • Изменения положения элемента DOM
  • Изменения размеров элемента DOM
  • Вставка или удаление элемента DOM
  • Анимации, запускающие макет

В частности, элемент DOM, непосредственно предшествующий смещенному элементу, является элементом, который с наибольшей вероятностью будет вовлечен в «вызывание» сдвига макета. Таким образом, при выяснении того, почему произошел сдвиг макета, учитывайте:

  • Изменилось ли положение или размеры предыдущего элемента?
  • Был ли элемент DOM вставлен или удален перед смещенным элементом?
  • Было ли явно изменено положение сдвинутого элемента?

Если предыдущий элемент не вызвал смещение макета, продолжите поиск, рассматривая другие предыдущие и соседние элементы.

Кроме того, направление и расстояние смещения макета могут подсказать основную причину. Например, большой сдвиг вниз часто указывает на вставку элемента DOM, тогда как сдвиг макета на 1 или 2 пикселя часто указывает на применение конфликтующих стилей CSS или на загрузку и применение веб-шрифта.

Диаграмма, показывающая сдвиг макета, вызванный заменой шрифта
В этом примере замена шрифта привела к смещению элементов страницы вверх на пять пикселей.

Вот некоторые из конкретных действий, которые чаще всего вызывают события смещения макета:

Изменения положения элемента (не связанные с перемещением другого элемента)

Этот тип изменений часто является результатом:

  • Таблицы стилей, которые загружаются с опозданием или перезаписывают ранее объявленные стили.
  • Анимация и эффекты перехода.

Изменения размеров элемента

Этот тип изменений часто является результатом:

  • Таблицы стилей, которые загружаются с опозданием или перезаписывают ранее объявленные стили.
  • Изображения и iframe без атрибутов width и height , которые загружаются после визуализации их «слота».
  • Текстовые блоки без атрибутов width и height , которые меняют шрифты после визуализации текста.

Вставка или удаление элементов DOM

Часто это является результатом:

  • Вставка рекламы и других сторонних вставок.
  • Вставка баннеров, оповещений и модальных окон.
  • Бесконечная прокрутка и другие шаблоны UX, которые загружают дополнительный контент поверх существующего.

Анимации, запускающие макет

Некоторые анимационные эффекты могут вызывать срабатывание макета . Типичным примером этого является то, что элементы DOM «анимируются» путем увеличения таких свойств, как top или left , а не с помощью свойства transform CSS. Прочтите «Как создавать высокопроизводительную CSS-анимацию» для получения дополнительной информации.

Воспроизвести сдвиги макета

Вы не можете исправить сдвиги макета, которые не можете воспроизвести. Одна из самых простых, но наиболее эффективных вещей, которые вы можете сделать, чтобы лучше понять стабильность макета вашего сайта, — это потратить 5–10 минут на взаимодействие с вашим сайтом с целью вызвать изменения макета. При этом держите консоль открытой и используйте API нестабильности макета, чтобы сообщать об изменениях макета.

Если трудно обнаружить изменения в макете, попробуйте повторить это упражнение с разными устройствами и скоростями соединения. В частности, использование более медленной скорости соединения может облегчить выявление изменений макета. Кроме того, вы можете использовать оператор debugger , чтобы упростить пошаговое изменение макета.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

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

,

Узнайте, как выявить и исправить сдвиги макета.

Кэти Хемпениус
Katie Hempenius
X
Барри Поллард

Опубликовано: 11 марта 2021 г., Последнее обновление: 7 февраля 2025 г.

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

Оснастка

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

API нестабильности макета

API нестабильности макета — это механизм браузера для измерения и составления отчетов об изменениях макета. Все инструменты для отладки изменений макета, включая DevTools, в конечном итоге основаны на API нестабильности макета. Однако прямое использование Layout Instability API является мощным инструментом отладки благодаря своей гибкости.

Использование

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

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

При запуске этого сценария имейте в виду, что:

  • Опция buffered: true указывает, что PerformanceObserver должен проверить буфер записей производительности браузера на предмет записей производительности, которые были созданы до инициализации наблюдателя. В результате PerformanceObserver сообщит об изменениях макета, произошедших как до, так и после его инициализации. Имейте это в виду при проверке журналов консоли. Первоначальное избыток изменений макета может отражать невыполненную отчетность, а не внезапное возникновение многочисленных изменений макета.
  • Чтобы избежать влияния на производительность, PerformanceObserver ждет, пока основной поток не будет простаивать, чтобы сообщить об изменениях макета. В результате, в зависимости от того, насколько занят основной поток, может возникнуть небольшая задержка между моментом сдвига макета и его регистрацией в консоли.
  • Этот сценарий игнорирует изменения макета, произошедшие в течение 500 мс после ввода пользователя, и поэтому не учитываются в CLS.

Информация о сдвигах макета передается с помощью комбинации двух API: интерфейсов LayoutShift и LayoutShiftAttribution . Каждый из этих интерфейсов описан более подробно в следующих разделах.

LayoutShift

О каждом сдвиге макета сообщается с помощью интерфейса LayoutShift . Содержимое записи выглядит следующим образом:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Предыдущая запись указывает на сдвиг макета, во время которого три элемента DOM изменили положение. Оценка смещения макета для этого конкретного смещения макета составила 0.175 .

Вот свойства экземпляра LayoutShift , которые наиболее важны для отладки изменений макета:

Свойство Описание
sources Свойство sources перечисляет элементы DOM, которые были перемещены во время изменения макета. Этот массив может содержать до пяти источников. В случае, если сдвиг макета затронул более пяти элементов, сообщается о пяти крупнейших (с точки зрения влияния на стабильность макета) источниках смещения макета. Эта информация передается с помощью интерфейса LayoutShiftAttribution (подробнее описано ниже).
value Свойство value сообщает оценку сдвига макета для конкретного сдвига макета.
hadRecentInput Свойство hadRecentInput указывает, произошел ли сдвиг макета в течение 500 миллисекунд после ввода пользователя.
startTime Свойство startTime указывает, когда произошел сдвиг макета. startTime указывается в миллисекундах и измеряется относительно времени начала загрузки страницы .
duration Свойство duration всегда будет установлено в 0 . Это свойство унаследовано от интерфейса PerformanceEntry (интерфейс LayoutShift расширяет интерфейс PerformanceEntry ). Однако концепция продолжительности не применяется к событиям смещения макета, поэтому для нее установлено значение 0 . Информацию об интерфейсе PerformanceEntry смотрите в спецификации .

LayoutShiftАтрибуция

Интерфейс LayoutShiftAttribution описывает один сдвиг одного элемента DOM. Если несколько элементов смещаются во время изменения макета, свойство sources содержит несколько записей.

Например, следующий JSON соответствует сдвигу макета с одним источником: сдвигу вниз элемента DOM <div id='banner'> с y: 76 на y:246 .

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Свойство node идентифицирует элемент HTML, который сместился. При наведении курсора на это свойство в DevTools выделяется соответствующий элемент страницы.

Свойства previousRect и currentRect сообщают размер и положение узла.

  • Координаты x и y сообщают координату x и координату y соответственно верхнего левого угла элемента.
  • Свойства width и height сообщают ширину и высоту элемента соответственно.
  • Свойства top , right , bottom и left сообщают значения координат x или y, соответствующие заданному краю элемента. Другими словами, значение top равно y ; значение bottom равно y+height .

Если все свойства previousRect установлены в 0, это означает, что элемент переместился в поле зрения. Если все свойства currentRect установлены в 0, это означает, что элемент вышел из поля зрения.

Одна из наиболее важных вещей, которую следует понимать при интерпретации этих результатов, заключается в том, что элементы, указанные в качестве источников, — это элементы, которые сместились во время изменения макета. Однако возможно, что эти элементы лишь косвенно связаны с «основной причиной» нестабильности макета. Вот несколько примеров.

Пример №1

Об этом сдвиге макета будет сообщаться с одним источником: элементом B. Однако основной причиной этого изменения макета является изменение размера элемента A.

Пример, показывающий сдвиг макета, вызванный изменением размеров элемента.

Пример №2

О сдвиге макета в этом примере будет сообщено с помощью двух источников: элемента A и элемента B. Основной причиной этого смещения макета является изменение положения элемента A.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример №3

О сдвиге макета в этом примере будет сообщаться с одним источником: элементом B. Изменение положения элемента B привело к этому сдвигу макета.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример №4

Хотя элемент B меняет размер, в этом примере сдвиг макета не происходит.

Пример, показывающий, как элемент меняет размер, но не вызывает сдвига макета

Посмотрите демонстрацию того, как API нестабильности макета сообщает об изменениях в DOM .

Инструменты разработчика

DevTools имеет ряд инструментов, помогающих отлаживать изменения макета.

Панель производительности

Представление показателей в реальном времени на панели «Производительность» позволяет вам взаимодействовать со страницей и отслеживать оценку CLS, чтобы выявлять взаимодействия, вызывающие большие сдвиги макета.

Записи Layout Shift отображаются на экране показателей в реальном времени панели производительности Chrome DevTools.
Представление показателей в реальном времени на панели производительности позволяет отслеживать оценку CLS веб-страницы во время взаимодействия со страницей.

Как только вы сможете достоверно воспроизвести сдвиг макета, вы можете выполнить трассировку, чтобы получить еще больше деталей:

Записи Layout Shift отображаются на панели производительности Chrome DevTools.
После записи новой трассы на панели «Производительность» дорожка результатов «Сдвиги макета» заполняется фиолетовыми полосами, отображающими кластеры « Layout Shift . При нажатии на ромбы отображается анимация сдвига и подробные сведения на панели «Сводка» .

Сдвиги макета выделяются на дорожке «Сдвиги макета» . Группы фиолетовых линий смещаются в кластеры сдвигов, а ромбы показывают отдельные сдвиги в этом кластере. Размер ромба пропорционален размеру смены, что позволяет вам отточить самые большие смены.

При нажатии на сдвиг отображается всплывающее окно с анимацией сдвига и выделение элемента фиолетовым цветом.

Кроме того, представление «Сводка» для записи Layout Shift включает время начала, оценку сдвига, а также сдвинутые элементы. Это особенно полезно для получения более подробной информации о проблемах CLS при загрузке, поскольку это легко воспроизводится с помощью профиля производительности перезагрузки.

Это также связано с информацией о виновниках смещения макета , отображаемой на панели Insights слева, которая показывает общий CLS вверху, а также возможные причины смещения макета.

Дополнительную информацию об использовании панели «Производительность» см. в документе «Справочник по анализу производительности» .

Выделить области смещения макета

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

Чтобы включить области смещения макета в DevTools, выберите «Настройки» > «Дополнительные инструменты» > «Визуализация» > «Области смещения макета», а затем обновите страницу, которую вы хотите отладить. Области смещения макета будут ненадолго выделены фиолетовым цветом.

Мыслительный процесс для выявления причины сдвигов макета

Вы можете использовать следующие шаги, чтобы определить причину смещения макета независимо от того, когда и как происходит сдвиг макета. Эти шаги можно дополнить запуском Lighthouse, однако имейте в виду, что Lighthouse может определять только изменения макета, произошедшие во время начальной загрузки страницы. Кроме того, Lighthouse также может предлагать только некоторые причины смещения макета, например элементы изображения, у которых нет явно заданной ширины и высоты.

Определите причину сдвига макета

Сдвиги макета могут быть вызваны следующими событиями:

  • Изменения положения элемента DOM
  • Изменения размеров элемента DOM
  • Вставка или удаление элемента DOM
  • Анимации, запускающие макет

В частности, элемент DOM, непосредственно предшествующий смещенному элементу, является элементом, который с наибольшей вероятностью будет вовлечен в «вызывание» сдвига макета. Таким образом, при выяснении того, почему произошел сдвиг макета, учитывайте:

  • Изменилось ли положение или размеры предыдущего элемента?
  • Был ли элемент DOM вставлен или удален перед смещенным элементом?
  • Было ли явно изменено положение сдвинутого элемента?

Если предыдущий элемент не вызвал смещение макета, продолжите поиск, рассматривая другие предыдущие и соседние элементы.

Кроме того, направление и расстояние смещения макета могут подсказать основную причину. Например, большой сдвиг вниз часто указывает на вставку элемента DOM, тогда как сдвиг макета на 1 или 2 пикселя часто указывает на применение конфликтующих стилей CSS или на загрузку и применение веб-шрифта.

Диаграмма, показывающая сдвиг макета, вызванный заменой шрифта
В этом примере замена шрифта привела к смещению элементов страницы вверх на пять пикселей.

Вот некоторые из конкретных действий, которые чаще всего вызывают события смещения макета:

Изменения положения элемента (не связанные с перемещением другого элемента)

Этот тип изменений часто является результатом:

  • Таблицы стилей, которые загружаются с опозданием или перезаписывают ранее объявленные стили.
  • Анимация и эффекты перехода.

Изменения размеров элемента

Этот тип изменений часто является результатом:

  • Таблицы стилей, которые загружаются с опозданием или перезаписывают ранее объявленные стили.
  • Изображения и iframe без атрибутов width и height , которые загружаются после визуализации их «слота».
  • Текстовые блоки без атрибутов width и height , которые меняют шрифты после визуализации текста.

Вставка или удаление элементов DOM

Часто это является результатом:

  • Вставка рекламы и других сторонних вставок.
  • Вставка баннеров, оповещений и модальных окон.
  • Бесконечная прокрутка и другие шаблоны UX, которые загружают дополнительный контент поверх существующего.

Анимации, запускающие макет

Некоторые анимационные эффекты могут вызывать срабатывание макета . Типичным примером этого является то, что элементы DOM «анимируются» путем увеличения таких свойств, как top или left , а не с помощью свойства transform CSS. Прочтите «Как создавать высокопроизводительную CSS-анимацию» для получения дополнительной информации.

Воспроизвести сдвиги макета

Вы не можете исправить сдвиги макета, которые не можете воспроизвести. Одна из самых простых, но наиболее эффективных вещей, которые вы можете сделать, чтобы лучше понять стабильность макета вашего сайта, — это потратить 5–10 минут на взаимодействие с вашим сайтом с целью вызвать изменения макета. При этом держите консоль открытой и используйте API нестабильности макета, чтобы сообщать об изменениях макета.

Если трудно обнаружить изменения в макете, попробуйте повторить это упражнение с разными устройствами и скоростями соединения. В частности, использование более медленной скорости соединения может облегчить выявление изменений макета. Кроме того, вы можете использовать оператор debugger , чтобы упростить пошаговое изменение макета.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

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

,

Узнайте, как выявить и исправить сдвиги макета.

Кэти Хемпениус
Katie Hempenius
X
Барри Поллард

Опубликовано: 11 марта 2021 г., Последнее обновление: 7 февраля 2025 г.

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

Оснастка

Вы можете отлаживать изменения макета с помощью Layout Instability API или с помощью таких инструментов, как DevTools, которые суммируют данные из этого API в более удобном для восприятия формате.

API нестабильности макета

API нестабильности макета — это механизм браузера для измерения и составления отчетов об изменениях макета. Все инструменты для отладки изменений макета, включая DevTools, в конечном итоге основаны на API нестабильности макета. Однако прямое использование Layout Instability API является мощным инструментом отладки благодаря своей гибкости.

Использование

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

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

При запуске этого сценария имейте в виду, что:

  • Опция buffered: true указывает, что PerformanceObserver должен проверить буфер записей производительности браузера на предмет записей производительности, которые были созданы до инициализации наблюдателя. В результате PerformanceObserver сообщит об изменениях макета, произошедших как до, так и после его инициализации. Имейте это в виду при проверке журналов консоли. Первоначальное избыток изменений макета может отражать невыполненную отчетность, а не внезапное возникновение многочисленных изменений макета.
  • Чтобы избежать влияния на производительность, PerformanceObserver ждет, пока основной поток не будет простаивать, чтобы сообщить об изменениях макета. В результате, в зависимости от того, насколько занят основной поток, может возникнуть небольшая задержка между моментом сдвига макета и его регистрацией в консоли.
  • Этот сценарий игнорирует изменения макета, произошедшие в течение 500 мс после ввода пользователя, и поэтому не учитываются в CLS.

Информация о сдвигах макета передается с помощью комбинации двух API: интерфейсов LayoutShift и LayoutShiftAttribution . Каждый из этих интерфейсов описан более подробно в следующих разделах.

LayoutShift

О каждом сдвиге макета сообщается с помощью интерфейса LayoutShift . Содержимое записи выглядит следующим образом:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Предыдущая запись указывает на сдвиг макета, во время которого три элемента DOM изменили положение. Оценка смещения макета для этого конкретного смещения макета составила 0.175 .

Вот свойства экземпляра LayoutShift , которые наиболее важны для отладки изменений макета:

Свойство Описание
sources Свойство sources перечисляет элементы DOM, которые были перемещены во время изменения макета. Этот массив может содержать до пяти источников. В случае, если сдвиг макета затронул более пяти элементов, сообщается о пяти крупнейших (с точки зрения влияния на стабильность макета) источниках смещения макета. Эта информация передается с помощью интерфейса LayoutShiftAttribution (подробнее описано ниже).
value Свойство value сообщает оценку сдвига макета для конкретного сдвига макета.
hadRecentInput Свойство hadRecentInput указывает, произошел ли сдвиг макета в течение 500 миллисекунд после ввода пользователя.
startTime Свойство startTime указывает, когда произошел сдвиг макета. startTime указывается в миллисекундах и измеряется относительно времени начала загрузки страницы .
duration Свойство duration всегда будет установлено в 0 . Это свойство унаследовано от интерфейса PerformanceEntry (интерфейс LayoutShift расширяет интерфейс PerformanceEntry ). Однако концепция продолжительности не применяется к событиям смещения макета, поэтому для нее установлено значение 0 . Информацию об интерфейсе PerformanceEntry смотрите в спецификации .

LayoutShiftАтрибуция

Интерфейс LayoutShiftAttribution описывает один сдвиг одного элемента DOM. Если несколько элементов смещаются во время изменения макета, свойство sources содержит несколько записей.

Например, следующий JSON соответствует сдвигу макета с одним источником: сдвигу вниз элемента DOM <div id='banner'> с y: 76 на y:246 .

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Свойство node идентифицирует элемент HTML, который сместился. При наведении курсора на это свойство в DevTools выделяется соответствующий элемент страницы.

Свойства previousRect и currentRect сообщают размер и положение узла.

  • Координаты x и y сообщают координату x и координату y соответственно верхнего левого угла элемента.
  • Свойства width и height сообщают ширину и высоту элемента соответственно.
  • Свойства top , right , bottom и left сообщают значения координат x или y, соответствующие заданному краю элемента. Другими словами, значение top равно y ; значение bottom равно y+height .

Если все свойства previousRect установлены в 0, это означает, что элемент переместился в поле зрения. Если все свойства currentRect установлены в 0, это означает, что элемент вышел из поля зрения.

Одна из наиболее важных вещей, которую нужно понять при интерпретации этих результатов, заключается в том, что элементы, перечисленные как источники, - это элементы, которые смещались во время смены макета. Тем не менее, возможно, что эти элементы только косвенно связаны с «основной причиной» нестабильности макета. Вот несколько примеров.

Пример № 1

Об этом сдвиге макета будет сообщено с одним источником: элемент B. Однако основной причиной этого сдвига макета является изменение размера элемента A.

Пример, показывающий сдвиг макета, вызванный изменением размеров элементов

Пример № 2

Сдвиг макета в этом примере будет сообщено с двумя источниками: элемент A и элемент B. Основной причиной этого сдвига макета является изменение положения элемента A.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример № 3

Сдвиг макета в этом примере будет сообщено с одним источником: элемент B. Изменение положения элемента B привело к этому сдвигу макета.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример № 4

Хотя элемент B меняет размер, в этом примере нет сдвига макета.

Пример, показывающий изменяющий размер элемента, но не вызывает сдвига макета

Проверьте демонстрацию того, как изменения DOM сообщают об API нестабильности макета .

Devtools

Devtools имеет ряд инструментов, которые помогают отладки смены макета.

Performance Panel

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

Записи смены макета отображаются на экране Live Metrics of Chrome Devtools Performance Panel.
Вид в живых метрик на панели Performance позволяет мониторинг оценки CLS веб -страницы при взаимодействии с страницей.

После того, как вы сможете надежно воспроизвести сдвиг макета, вы можете выполнить след, чтобы получить еще больше подробностей:

Записи смены макета отображаются на панели Performance Chrome Devtools.
После записи новой трассировки на панели Performance, отслеживание смены результатов макета заполнена фиолетовыми стержнями, отображающими кластеры Layout Shift . Нажатие Diamonds показывает анимацию сдвига и детали на сводной панели.

Сдвиги макета выделены в треке смены макета . Группы фиолетовых линий превращаются в кластеры смены с бриллиантами, показывающими индивидуальные сдвиги в этом кластере. Размер алмаза пропорционален размеру сдвига, что позволяет оттачивать самые большие сдвиги.

Нажатие на смену показывает всплывающее окно с анимацией сдвига и выделяет элементы смены в фиолетовом виде.

Кроме того, сводное представление для записи Layout Shift включает в себя время начала, оценку сдвига, а также элементы сдвинулись. Это особенно полезно, чтобы получить более подробную информацию о проблемах нагрузки CLS, поскольку это легко воспроизводить с помощью профиля производительности перезагрузки.

Это также ссылается на проницательность виновников смены макета , отображаемой на панели Insights слева, которая показывает общее количество CLS вверху, а также возможные причины сдвигов макета.

Для получения дополнительной информации об использовании Performance Panel, см. Ссылку на анализ производительности .

Выделите области смены макета

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

Чтобы включить области смены макета в Devtools, перейдите к настройкам> Больше инструментов> рендеринг> области сдвига макета, затем обновите страницу, на которой вы хотите отладить. Области смены макета будут кратко выделены в фиолетовом.

Мыслительный процесс для определения причины смены макета

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

Определите причину смены макета

Сдвиги макета могут быть вызваны следующими событиями:

  • Изменения в положение элемента DOM
  • Изменения в размерах элемента DOM
  • Вставка или удаление элемента DOM
  • Анимации, которые запускают макет

В частности, элемент DOM, непосредственно предшествующего смещению элемента, является элементом, который наиболее вероятно будет вовлечен в «вызывание» сдвига макета. Таким образом, при исследовании того, почему произошел сдвиг макета, рассмотрим:

  • Изменили ли положение или размеры предыдущего элемента?
  • Был ли элемент DOM вставлен или удален перед смещенным элементом?
  • Было ли явно изменено положение смещенного элемента?

Если предыдущий элемент не вызвал сдвига макета, продолжайте поиск, рассматривая другие предыдущие и близлежащие элементы.

Кроме того, направление и расстояние от сдвига макета могут дать подсказки о первопричине. Например, большой сдвиг вниз часто указывает на вставку элемента DOM, тогда как сдвиг макета 1 PX или 2 PX часто указывает на применение противоречивых стилей CSS или загрузку и применение веб -шрифта.

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

Это некоторые из конкретных поведений, которые чаще всего вызывают события смены макета:

Изменения в положении элемента (которые не связаны с движением другого элемента)

Этот тип изменения часто является результатом:

  • Таблицы стилей, которые загружаются поздно или перезаписывают ранее объявленные стили.
  • Эффекты анимации и перехода.

Изменения в размерах элемента

Этот тип изменения часто является результатом:

  • Таблицы стилей, которые загружаются поздно или перезаписывают ранее объявленные стили.
  • Изображения и iframes без width и атрибутов height , которые нагружаются после их «слота».
  • Текстовые блоки без width или атрибутов height , которые обменяются шрифтами после того, как текст был отображен.

Вставка или удаление элементов DOM

Это часто является результатом:

  • Вставка объявлений и других сторонних встроений.
  • Вставка баннеров, оповещений и модалей.
  • Бесконечный свиток и другие шаблоны UX, которые загружают дополнительный контент выше существующего контента.

Анимации, которые запускают макет

Некоторые эффекты анимации могут вызвать макет . Распространенным примером этого является то, когда элементы DOM «анимированы» путем увеличения свойств, таких как top или left а не используя свойство transform CSS. Прочитайте , как создать высокопроизводительные анимации CSS для получения дополнительной информации.

Воспроизведите смены макета

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Наконец, для проблем с макетом, которые не воспроизводимы в разработке, рассмотрите возможность использования API нестабильности макета в сочетании с вашим выбором инструмента для ведения журнала, чтобы собрать дополнительную информацию по этим вопросам. Проверьте пример кода для отслеживания наибольшего смещенного элемента на странице .

,

Узнайте, как идентифицировать и исправить смены макета.

Кэти Хемпениус
Katie Hempenius
X
Барри Поллард

Опубликовано: 11 марта 2021 года, последний обновлен: 7 февраля 2025 г.

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

Инструмент

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

АПИ нестабильности макета

API нестабильности макета является механизмом браузера для измерения и отчетности сменов макета. Все инструменты для отладки смены макета, включая DevTools, в конечном итоге построены на API нестабильности макета. Тем не менее, использование API нестабильности макета напрямую является мощным инструментом отладки из -за его гибкости.

Использование

Тот же самый фрагмент кода, который измеряет совокупный сдвиг макета (CLS), также может служить для отладки смены макета. Следующая информация фрагмента записывает информацию о сдвигах макета на консоли. Проверка этого журнала предоставит вам информацию о том, когда, где и как произошла смена макета.

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

При запуске этого сценария знайте, что:

  • Опция buffered: true указывает, что PerformanceObserver должен проверить буфер ввода производительности браузера на предмет записи, которые были созданы до инициализации наблюдателя. В результате PerformanceObserver сообщит о сдвигах макетов, которые произошли как до, так и после того, как он был инициализирован. Имейте это в виду, осматривая журналы консоли. Первоначальный избыток сдвигов макета может отражать отчетное отставание, а не внезапное появление многочисленных сдвигов макета.
  • Чтобы избежать влияния производительности, PerformanceObserver ждет, пока основной поток не станет холостое, чтобы сообщить о сдвигах макета. В результате, в зависимости от того, насколько занят основной поток, может возникнуть небольшая задержка между тем, когда происходит сдвиг макета, и когда он регистрируется в консоли.
  • Этот скрипт игнорирует сдвиги макета, которые произошли в пределах 500 мс после пользовательского ввода и, следовательно, не учитываются в отношении CLS.

Информация о сдвигах макета сообщается с использованием комбинации двух API: интерфейсы LayoutShift и LayoutShiftAttribution . Каждый из этих интерфейсов объясняется более подробно в следующих разделах.

LayoutStheft

Каждый сдвиг макета сообщается с использованием интерфейса LayoutShift . Содержимое записи выглядит так:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Предыдущая запись указывает сдвиг макета, в течение которого три элемента DOM изменили положение. Оценка сдвига макета этого конкретного сдвига макета составила 0.175 .

Это свойства экземпляра LayoutShift , которые наиболее актуальны для отладки сдвигов макета:

Свойство Описание
sources Свойство sources перечисляет элементы DOM, которые перемещались во время смены макета. Этот массив может содержать до пяти источников. В случае, если существует более пяти элементов, затрагиваемых сдвигом макета, сообщается о пяти крупнейших (измеряемых воздействием на стабильность макета). Эта информация сообщается с использованием интерфейса LayoutShiftAttribution (более подробно объясняется ниже).
value Свойство value сообщает о оценке сдвига макета для конкретного сдвига макета.
hadRecentInput Свойство hadRecentInput указывает, произошла ли сдвиг макета в течение 500 миллисекунд от пользовательского ввода.
startTime Свойство startTime указывает, когда произошла смена макета. startTime указана в миллисекундах и измеряется относительно времени, когда нагрузка страницы была инициирована .
duration Свойство duration всегда будет установлено на 0 . Это свойство унаследовано от интерфейса PerformanceEntry (интерфейс LayoutShift расширяет интерфейс PerformanceEntry ). Однако концепция продолжительности не относится к событиям смены макета, поэтому она установлена ​​на 0 . Для получения информации о интерфейсе PerformanceEntry , см. Спецификацию .

LayoutShiftattribution

Интерфейс LayoutShiftAttribution описывает единый сдвиг одного элемента DOM. Если несколько элементов сдвигаются во время смены макета, свойство sources содержит несколько записей.

Например, следующий JSON соответствует сдвигу макета с одним источником: нисходящее смещение элемента <div id='banner'> dom от y: 76 к y:246 .

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Свойство node идентифицирует элемент HTML, который сдвинулся. Вернувшись на это свойство в Devtools, выделяет соответствующий элемент страницы.

previousRect свойства и currentRect свойства сообщают о размере и положении узла.

  • Координаты x и y сообщают о X-координатном и Y-координате соответственно в верхнем левом углу элемента
  • Свойства width и height сообщают о ширине и высоте соответственно элемента.
  • top , right , bottom и left свойства сообщают о значениях координат X или Y, соответствующие данному краю элемента. Другими словами, значение top равно y ; Значение bottom равно y+height .

Если все свойства previousRect устанавливаются на 0, это означает, что элемент сместился. Если все свойства currentRect устанавливаются на 0, это означает, что элемент сместился из виду.

Одна из наиболее важных вещей, которую нужно понять при интерпретации этих результатов, заключается в том, что элементы, перечисленные как источники, - это элементы, которые смещались во время смены макета. Тем не менее, возможно, что эти элементы только косвенно связаны с «основной причиной» нестабильности макета. Вот несколько примеров.

Пример № 1

Об этом сдвиге макета будет сообщено с одним источником: элемент B. Однако основной причиной этого сдвига макета является изменение размера элемента A.

Пример, показывающий сдвиг макета, вызванный изменением размеров элементов

Пример № 2

Сдвиг макета в этом примере будет сообщено с двумя источниками: элемент A и элемент B. Основной причиной этого сдвига макета является изменение положения элемента A.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример № 3

Сдвиг макета в этом примере будет сообщено с одним источником: элемент B. Изменение положения элемента B привело к этому сдвигу макета.

Пример, показывающий сдвиг макета, вызванный изменением положения элемента

Пример № 4

Хотя элемент B меняет размер, в этом примере нет сдвига макета.

Пример, показывающий изменяющий размер элемента, но не вызывает сдвига макета

Проверьте демонстрацию того, как изменения DOM сообщают об API нестабильности макета .

Devtools

Devtools имеет ряд инструментов, которые помогают отладки смены макета.

Performance Panel

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

Записи смены макета отображаются на экране Live Metrics of Chrome Devtools Performance Panel.
Вид в живых метрик на панели Performance позволяет мониторинг оценки CLS веб -страницы при взаимодействии с страницей.

После того, как вы сможете надежно воспроизвести сдвиг макета, вы можете выполнить след, чтобы получить еще больше подробностей:

Записи смены макета отображаются на панели Performance Chrome Devtools.
После записи новой трассировки на панели Performance, отслеживание смены результатов макета заполнена фиолетовыми стержнями, отображающими кластеры Layout Shift . Нажатие Diamonds показывает анимацию сдвига и детали на сводной панели.

Сдвиги макета выделены в треке смены макета . Группы фиолетовых линий превращаются в кластеры смены с бриллиантами, показывающими индивидуальные сдвиги в этом кластере. Размер алмаза пропорционален размеру сдвига, что позволяет оттачивать самые большие сдвиги.

Нажатие на смену показывает всплывающее окно с анимацией сдвига и выделяет элементы смены в фиолетовом виде.

Кроме того, сводное представление для записи Layout Shift включает в себя время начала, оценку сдвига, а также элементы сдвинулись. Это особенно полезно, чтобы получить более подробную информацию о проблемах нагрузки CLS, поскольку это легко воспроизводить с помощью профиля производительности перезагрузки.

Это также ссылается на проницательность виновников смены макета , отображаемой на панели Insights слева, которая показывает общее количество CLS вверху, а также возможные причины сдвигов макета.

Для получения дополнительной информации об использовании Performance Panel, см. Ссылку на анализ производительности .

Выделите области смены макета

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

Чтобы включить области смены макета в Devtools, перейдите к настройкам> Больше инструментов> рендеринг> области сдвига макета, затем обновите страницу, на которой вы хотите отладить. Области смены макета будут кратко выделены в фиолетовом.

Мыслительный процесс для определения причины смены макета

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

Определите причину смены макета

Сдвиги макета могут быть вызваны следующими событиями:

  • Изменения в положение элемента DOM
  • Изменения в размерах элемента DOM
  • Вставка или удаление элемента DOM
  • Анимации, которые запускают макет

В частности, элемент DOM, непосредственно предшествующего смещению элемента, является элементом, который наиболее вероятно будет вовлечен в «вызывание» сдвига макета. Таким образом, при исследовании того, почему произошел сдвиг макета, рассмотрим:

  • Изменили ли положение или размеры предыдущего элемента?
  • Был ли элемент DOM вставлен или удален перед смещенным элементом?
  • Было ли явно изменено положение смещенного элемента?

Если предыдущий элемент не вызвал сдвига макета, продолжайте поиск, рассматривая другие предыдущие и близлежащие элементы.

Кроме того, направление и расстояние от сдвига макета могут дать подсказки о первопричине. Например, большой сдвиг вниз часто указывает на вставку элемента DOM, тогда как сдвиг макета 1 PX или 2 PX часто указывает на применение противоречивых стилей CSS или загрузку и применение веб -шрифта.

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

Это некоторые из конкретных поведений, которые чаще всего вызывают события смены макета:

Изменения в положении элемента (которые не связаны с движением другого элемента)

Этот тип изменения часто является результатом:

  • Таблицы стилей, которые загружаются поздно или перезаписывают ранее объявленные стили.
  • Эффекты анимации и перехода.

Изменения в размерах элемента

Этот тип изменения часто является результатом:

  • Таблицы стилей, которые загружаются поздно или перезаписывают ранее объявленные стили.
  • Изображения и iframes без width и атрибутов height , которые нагружаются после их «слота».
  • Текстовые блоки без width или атрибутов height , которые обменяются шрифтами после того, как текст был отображен.

Вставка или удаление элементов DOM

Это часто является результатом:

  • Вставка объявлений и других сторонних встроений.
  • Вставка баннеров, оповещений и модалей.
  • Бесконечный свиток и другие шаблоны UX, которые загружают дополнительный контент выше существующего контента.

Анимации, которые запускают макет

Некоторые эффекты анимации могут вызвать макет . Распространенным примером этого является то, когда элементы DOM «анимированы» путем увеличения свойств, таких как top или left а не используя свойство transform CSS. Прочитайте , как создать высокопроизводительные анимации CSS для получения дополнительной информации.

Воспроизведите смены макета

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Наконец, для проблем с макетом, которые не воспроизводимы в разработке, рассмотрите возможность использования API нестабильности макета в сочетании с вашим выбором инструмента для ведения журнала, чтобы собрать дополнительную информацию по этим вопросам. Проверьте пример кода для отслеживания наибольшего смещенного элемента на странице .