Как пользоваться
- Запишите сдвиги макета: в Chrome DevTools панель Performance показывает их время и оценки; то же дают библиотека web-vitals и PerformanceObserver для записей layout-shift.
- Введите время в секундах и оценки в том же порядке через точку с запятой или пробел.
- Смотрите CLS, его оценку и окно, которое его дало.
- При желании введите доли влияния и смещения одного сдвига, чтобы увидеть его оценку.
Как это работает
Сдвиги сортируются по времени и проходятся по порядку:
- сдвиг меньше чем через 1 с после предыдущего и меньше чем через 5 с после начала текущего окна добавляется в него;
- любой другой сдвиг открывает новое окно.
CLS = наибольшая сумма окна. Оценка одного сдвига — доля влияния × доля смещения.
Пример
Сдвиги в 0,4; 0,9; 1,5; 4,2 и 4,6 с с оценками 0,05; 0,02; 0,01; 0,12 и 0,03:
- 0,4 → 0,9 → 1,5 с: промежутки 0,5 и 0,6 с, одно окно: 0,05 + 0,02 + 0,01 = 0,08;
- 4,2 с наступает через 2,7 с после предыдущего сдвига и открывает второе окно вместе с 4,6 с: 0,12 + 0,03 = 0,15;
- CLS = 0,15 (окно 4,2 – 4,6 s) — нужно улучшить, хотя сумма всех сдвигов 0,23.
Баннер на 50 % области просмотра, который сдвигает контент вниз на 25 % её высоты, сам по себе даёт 0,5 × 0,25 = 0,125.
Советы
- Резервируйте место под картинки, рекламу и встраиваемые блоки атрибутами width и height или свойством aspect-ratio, чтобы при загрузке ничего не прыгало.
- Не вставляйте контент над тем, что читают, — например, поздние баннеры; показывайте их поверх или заранее отводите им место.
- Анимируйте через transform, а не top, left, width или height: трансформации не вызывают сдвигов макета.