Google Chrome DevTools добавляет расширенную отладку CLS

Google Chrome DevTools добавляет расширенную отладку CLS

В сборках Canary появилась новая функция Layout Shift Culprits, которая значительно улучшает возможности отладки кумулятивного сдвига макета (CLS). Это заметное обновление в данной области, которое произошло впервые за последние годы.

Новый интерфейс отладки интегрирован в панель Insights в Chrome, предоставляя разработчикам широкий спектр возможностей:

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

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

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

Эта разработка имеет большое значение, поскольку CLS является ключевым параметром в наборе Core Web Vitals от Google.

CLS оценивает визуальную стабильность, которая влияет на:

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

Барри Поллард, специалист по работе с разработчиками Google Chrome, отметил эту функцию в числе последних обновлений DevTools.

Этот инструмент может стать незаменимым помощником в процессе оптимизации производительности.