Cumulative Layout Shift (CLS) — це показник, що вимірює ступінь несподіваних змін макету веб-сторінки під час її завантаження. Ці зміни можуть спричиняти зміщення елементів сторінки, таких як зображення, текст чи кнопки, що негативно впливає на досвід користувача. CLS є частиною Core Web Vitals — набору ключових показників, що визначають продуктивність та якість веб-сторінок.
Як це працює?
- Вимірювання зміщень елементів: CLS реєструє раптові зміщення елементів на сторінці під час її завантаження.
- Розрахунок результату: значення CLS розраховується на основі розміру та обсягу зміщення елементів, з урахуванням площі, що змістилась на екрані, та відстані цього зміщення.
- Несподівані зміни: стосується лише змін, що є несподіваними, наприклад завантаження зображень без зарезервованого простору або зміна контенту через динамічно завантажувану рекламу.
Чому це важливо?
- Кращий досвід користувача: раптові зміни в макеті сторінки можуть дезорієнтувати користувачів, знижуючи якість взаємодії.
- Більша конверсія: стабільність макету сторінки впливає на комфорт онлайн-покупок, що може відображатись на кращих показниках продажів.
- SEO та рейтинг Google: Google використовує CLS як один із рейтингових факторів, тому сторінки з низьким показником CLS можуть краще позиціонуватись у результатах пошуку.
- Зменшення роздратування: усунення зміщень мінімізує ризик випадкового кліку на небажані елементи, як реклама чи кнопки.
Практичний приклад
Під час завантаження сторінки інтернет-магазину у верхній частині екрана з'являється реклама. У момент її завантаження весь макет сторінки зміщується, і користувач, який хотів натиснути кнопку «Купити зараз», випадково клікає на рекламу. Це викликає роздратування та вихід зі сторінки. Завдяки оптимізації CLS, елементи, такі як реклама та зображення, належним чином зарезервовані та не спричиняють раптових змін, що забезпечує стабільність макету сторінки та покращує загальний досвід користувача.
