Обзор накопительного отладчика сдвига макета Cumulative Layout...

Обзор накопительного отладчика сдвига макета Cumulative Layout Shift Debugger (CLS)

Недавно я писал об оптимизации сайта с учетом YMYL, обязательно почитайте. В этом посте я упоминал такую важную штуку как Core Web Vitals – метрики, которые Google использует для оценки скорости работы сайтов.

Одна из них – Cumulative layout shift (CLS) – метрика, которая измеряет визуальную стабильность сайта. Кстати, о ней я тоже писал ранее – вот здесь. Нестабильная работа сайта выглядит приблизительно вот так и это ужасно.

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

Я нашел крутой сервис Cumulative layout shift debugger. Это бесплатный SEO инструмент для обнаружения и измерения этих самых сдвигов. Из основных преимуществ отчетов, который делает инструмент:

Кроссплатформенность в плане девайсов

С помощью инструмента можно анализировать CLS визуализации мобильных девайсов и получать данные мобильного тестирования. Но можно смотреть и на CLS десктопов и также анализировать результаты десктопных тестов. Помимо этого тул определяет HTML- элементы, которые вызывают сдвиги макетов как на мобильных, так и на десктопных девайсах.

Возможность измерения CLS разных типов

Инструмент может измерять CLS реального пользователя для протестированного URL или для имени хоста (происхождения). Это реально круто.

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

––––

Конечно, это не единственный инструмент для оценки. Есть родные от Google – Chrome user experience report (in the field testing) и Chrome DevTools (in the lab testing). Есть пару и от сторонних разработчиков. Самый популярный из них Lighthouse. Но все они генерят общие отчеты по всем метрикам Core Web Vitals и не показывают отдельными блоками HTML-элементы которые подвисают.

Пишите свои мысли по поводу этих инструментов и опыте работы с ними в комментах. Может кто использует другие – обязательно делитесь.

@gelo_seo

Источник новости https://t.me/gelo_seo/50...