Поисковики

Оптимизация CLS: как измерить и улучшить этот показатель

Автор: Аймен Лукил (Aymen Loukil) – консультант по SEO, предприниматель и бывший разработчик.

Совокупное смещение макета (Cumulative Layout Shift, CLS) – это одна из самых важных метрик пользовательского опыта и веб-производительности в настоящее время.

CLS является частью Core Web Vitals (LCP, FID и CLS) – набора показателей для оценки UX, предложенного Google, и измеряет стабильность шаблона страницы.

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

Что такое CLS?

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

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

Появляется текст, вы начинаете читать статью и тут загружается изображение и сдвигает текст вниз. Вы думаете, что теперь уже всё загрузилось, хотите нажать на «Подробнее», а страница снова сдвигается и вместо нужно ссылки вы нажимаете на рекламное объявление. Знакомая ситуация? Это очень раздражает.

Что касается оценки CLS, то низкое или равное нулю значение свидетельствует о хорошем пользовательском опыте, а высокое – о плохом.

Хороший, средний или плохой CLS?

Хороший показатель CLS должен быть меньше 0,1. При этом на уровне домена важно добиться 75-го процентиля загрузки страницы для мобильных и десктопных пользователей.

Хороший CLS

Требует улучшения Плохой CLS
Ниже 0,1

0,1 – 0,25 Выше 0,25

По сравнению с LCP показатель CLS имеет меньший вес в расчёте общей оценки по сайту в Lighthouse:

Показатель

Вес

LCP

25%

CLS

5%

Как измерить CLS?

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

CLS в синтетических инструментах:

  • Chrome-расширение Web Vitals
  • Google Lighthouse:

  • WebPageTest:

СОВЕТ: кликните на «View JSON result», чтобы просмотреть подробные данные по сдвигам макета:

  • Инструменты разработчика Chrome (Chrome Dev Tools), вкладка «Network»:

  • С помощью JavaScript

CLS в «полевых» условиях:

  • Chrome User Experience Report (CrUX)
  • Панель по Core Web Vitals, созданная Риком Вискоми (Rick Viscomi)
  • Также можно выполнить следующий SQL-запрос в BigQuery

SELECT

  p75_cls,

  small_cls AS good,

  medium_cls AS needs_improvement,

  large_cls AS poor

FROM

  `chrome-ux-report.materialized.metrics_summary`

WHERE

  origin = ‘https://netflix.com’

  • И проверить отчёт об основных показателях загрузки в Search Console:

  • Кроме того, CLS можно измерить в PageSpeed Insights (и лабораторные, и полевые данные):

Какие элементы смещаются?

Чтобы узнать, какие элементы сдвигаются, выполните аудит в Lighthouse и прокрутите отчёт вниз до раздела «Устраните большие смещения макета». Кликните по нему, чтобы увидеть список элементов.

СОВЕТ: закрепите панель Chrome DevTools слева или справа, чтобы при наведении курсора на элементы в отчёте Lighthouse вы могли видеть их на странице.

Как улучшить CLS

  • Всегда указывайте атрибуты «width» и «height» для таких элементов, как:
      • Изображения
      • Видео
      • Встраиваемый контент и iframes
      • Рекламные блоки и баннеры
  • Резервируйте необходимое место для элементов веб-страницы, чтобы браузер выделил необходимое пространство (см. CSS Aspect Ratio);
  • Никогда не вставляйте контент динамически поверх существующего без взаимодействия с пользователем;
  • При наличии элементов, добавляемых при взаимодействии с пользователем, показывайте их в окне 0.5s, в противном случае это будет считаться смещением макета;
  • Если на странице нужна анимация, отдайте предпочтение анимации с помощью свойства transition (CSS-переходы);
  • Не обновляйте DOM асинхронно;
  • Убедитесь, что необходимые веб-шрифты быстро загружаются, чтобы избежать  FOIT/FOUT;
  • Выполняйте сортировку по загруженным шрифтам. Часто мы загружаем шрифты без надобности;
  • Используйте предварительную загрузку для самых важных шрифтов;
  • Добавьте свойство font-display:optional, чтобы избежать проблем с переключением шрифтов.

Источник:
Web Performance Recipes

Источник: searchengines.ru

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть