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

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

Lighthouse

Чтобы использовать этот инструмент, все, что вам нужно сделать, это вставить URL-адрес в основное поле и нажать Enter. Алгоритм рассчитает ваш показатель CLS, ориентируясь на поведенческие факторы среднестатистического пользователя. В отличие от других типов показателей производительности, этот инструмент отдает приоритет не скорости, а общему количеству смещений макета.

Показатели CLS:

• 0,1 или меньше: хорошо
• 0,1 - 0,15: нормально, но можно улучшить
• 0,15 - 0,25: дольше, чем рекомендуется
• 0,25 или выше: намного дольше, чем рекомендуется

PageSpeed Insights

PageSpeed Insights (PSI) использует данные из статистических данных браузера Chrome. Просто введите свой URL-адрес, чтобы PSI рассчитала три основных веб-показателя вашей страницы (CWV - Core Web Vitals): время до первого взаимодействия (FID - First Input Delay), скорость загрузки основного контента (LCP - Largest Contentful Paint) и совокупное смещение макета (CLS). Как только PSI завершит тестирование, вы получите отчет со сводкой о том, насколько хорошо работает ваша страница.

Показатели PSI:

• 90 баллов и выше - это хорошо
• 50 - 90 баллов означают необходимость улучшения
• ниже 50 баллов считается плохим показателем

Web Vitals Tester

Этот инструмент содержит комплексную проверку, предоставляющую полный анализ CWV, включая:

• LCP
• FID
• CLS
• TTFB (Time To First Byte) - время до получения первого байта
• FCP (First Contentful Paint) - первая отрисовка контента
• TTI (Time To Interactive) - время до интерактивности
• TBT (Total Blocking Time) - общее время блокировки
• SI (Speed Index) - индекс скорости

Layout Shift GIF Generator

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

Cumulative Layout Shift Debugger

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