CLS (Cumulative Layout Shift) — це метрика Core Web Vitals, яка вимірює візуальну стабільність сторінки через суму несподіваних зсувів макета, що відбуваються протягом життєвого циклу сторінки.
"Зсув макета" відбувається, коли видимий елемент змінює позицію з одного відрендереного кадру на наступний без причини, ініційованої користувачем. Кожен зсув оцінюється за впливом (наскільки багато з області перегляду перемістилося) і відстанню (наскільки далеко все перемістилося); CLS — це сума всіх таких зсувів. Пороги 2026 року: ≤ 0.1 добре, ≤ 0.25 потребує покращення, > 0.25 погано.
Звичайні виправлення CLS для електронної комерції: завжди встановлюйте атрибути width і height для зображень, щоб браузери резервували місце; резервуйте місце для вбудованого контенту (iframes, реклами, відео) з явними розмірами або CSS співвідношенням сторін; уникайте повторних потоків через заміну шрифтів, використовуючи size-adjust на @font-face або font-display: optional; не вставляйте банери або спливаючі вікна над існуючим контентом; переконайтеся, що скелетні завантажувачі відповідають розмірам завантаженого контенту, який вони замінюють.
CLS часто є найпростішою метрикою Core Web Vitals для виправлення і найбільш впливовою для сприйнятої якості — навіть невеликі зсуви макета виглядають непрофесійно.