автор: Roger Montti
Cumulative Layout Shift (CLS) – это метрика Google, измеряющая событие пользовательского опыта и ставшая фактором ранжирования в 2021 году.
Это означает, что важно понимать, что такое CLS и как его оптимизировать.
Определение Cumulative Layout Shift
Что такое Cumulative Layout Shift?
CLS – это неожиданное смещение элементов веб-страницы во время её загрузки. Элементы, которые обычно вызывают смещение, включают шрифты, изображения, видео, формы обратной связи, кнопки и другие виды контента.
Минимизация CLS важна, потому что страницы, которые меняют своё положение, могут создавать плохой пользовательский опыт.
Низкий балл CLS указывает на проблемы в коде, которые можно исправить.
Почему происходит Cumulative Layout Shift
Согласно Google, есть пять причин, по которым происходит Cumulative Layout Shift:
- Изображения без указанных размеров.
- Реклама, внедрения и фреймы без указанных размеров.
- Динамически вставляемый контент.
- Веб-шрифты, вызывающие FOIT/FOUT.
- Действия, ожидающие ответа сети перед обновлением DOM.
Изображениям и видео необходимо иметь указанные высоту и ширину в HTML. В отношении адаптивных изображений убедитесь, что различные размеры изображений для разных видовых порталов используют одно и то же соотношение сторон.
Google рекомендует использовать AspectRatioCalculator.com для расчета соотношений сторон. Это хороший ресурс.
Реклама может вызвать Cumulative Layout Shift
Это немного сложно решить. Один из способов справиться с рекламой, вызывающей Cumulative Layout Shift – это стилизовать элемент, где будет показана реклама.
Например, если вы стилизуете блок с указанием конкретной высоты и ширины, то реклама будет ограничена этими размерами.
Есть два решения, если не хватает рекламных мест и реклама не отображается.
Если элемент, содержащий рекламу, не показывает рекламу, вы можете настроить его так, чтобы использовалась альтернативная баннерная реклама или заполнительное изображение.
В некоторых макетах, где реклама занимает всю строку вверху, возможно, столбец справа или слева от веб-страницы, если страница не отображается, смещения не произойдет. Это не сделает разницы ни на мобильных устройствах, ни на настольных компьютерах. Но это зависит от макета темы.
Вам придется проверить это, если у вас есть проблемы с рекламными блоками.
Динамически вставляемый контент
Это контент, который вставляется в веб-страницу.
Например, в WordPress вы можете добавить ссылку на видео на YouTube или твит, и WordPress отобразит видео или твит как внедренный объект.
Веб-шрифты
Загруженные веб-шрифты могут вызвать явление, известное как Flash of Invisible Text (FOIT) и Flash of Unstyled Text (FOUT).
Способ предотвратить это – использовать rel="preload" в ссылке для загрузки этого веб-шрифта.
Lighthouse может помочь вам диагностировать, что вызывает Cumulative Layout Shift.
CLS может проникнуть в процесс разработки
Кумулятивный сдвиг макета может возникнуть в процессе разработки. Может произойти так, что многие ресурсы, необходимые для отображения страницы, загружаются в кэш браузера.
Когда разработчик или издатель в следующий раз посещает страницу в процессе разработки, ему не будет заметен сдвиг макета, потому что элементы страницы уже загружены.
Поэтому полезно иметь измерение в лабораторных условиях или в реальных условиях использования.
Как рассчитывается Cumulative Layout Shift
Расчет включает две метрики/события. Первая из них называется Impact Fraction (Коэффициент воздействия).
Impact Fraction
Коэффициент воздействия – это измерение того, сколько места занимает нестабильный элемент в области просмотра.
Область просмотра – это то, что вы видите на экране мобильного устройства.
Когда элемент загружается, занимаемое элементом пространство из места, занятого в области просмотра при первом рендеринге съезжает до конечного положения при рендеринге страницы.
Пример, используемый Google, – это элемент, который занимает 50% области просмотра, а затем опускается еще на 25%.
Когда эти значения объединяются, получается значение 75%, которое называется Коэффициент воздействия, и оно выражается в виде оценки 0,75.
Distance Fraction
Второе измерение называется Коэффициент расстояния. Коэффициент расстояния – это количество пространства, на которое элемент страницы переместился от изначальной позиции до конечной позиции.
В приведенном выше примере элемент страницы переместился на 25%.
Теперь Cumulative Layout Score рассчитывается умножением Коэффициента воздействия на Коэффициент расстояния:
0,75 x 0,25 = 0,1875
В расчет включено еще некоторое количество математики и других соображений. Важно запомнить, что эта оценка – это один из способов измерения важного фактора пользовательского опыта.
Как измерить Cumulative Layout Shift
Существует два способа измерения Cumulative Layout Shift. Первый способ, по словам Google, называется в лаборатории. Второй способ называется в полевых условиях.
В лаборатории подразумевает симуляцию реального пользователя, загружающего веб-страницу. Google использует симулированный устройство Moto G4 для создания оценки CLS в лабораторных условиях.
Инструменты для лаборатории наилучшим образом подходят для понимания того, как макет может проявить себя перед его размещением в режиме реального времени для пользователей. Это дает издателям возможность проверить макет на наличие проблем.
Инструменты для лаборатории включают в себя Chrome Dev Tools и Lighthouse.
Понимание Cumulative Layout Shift
Важно понимать Cumulative Layout Shift. Необязательно уметь самостоятельно проводить расчеты.
Однако понимание того, что это означает и как это работает, является ключевым, поскольку это теперь стало частью фактора ранжирования Core Web Vitals.