Навчання
CLS layout shifts: як виправити Cumulative Layout Shift і Page Experience
Практичний гайд з пошуку й виправлення Cumulative Layout Shift: чому елементи стрибають, як зарезервувати місце й як довести, що layout стабільний.
Запусти свіжий аудит DomainLens і використовуй звіт як список пріоритетів.
Що вимірює CLS і чому це дратує користувачів
Cumulative Layout Shift (CLS) вимірює візуальну стабільність — наскільки видимий контент зміщується, поки сторінка завантажується й нею користуються. Щоразу, коли елемент, що вже був на екрані, стрибає на нову позицію не з вини користувача, це рахується як layout shift, а оцінка підсумовує найбільші сплески руху за візит.
Хороший CLS — 0.1 або менше; понад 0.25 — погано. І це не абстракція: зсуви змушують людей натискати не ту кнопку, губити місце в статті або випадково клікати рекламу. Це метрика, що найпряміше відповідає відчуттю «ця сторінка дешева й зламана».
Типові джерела зсувів layout
Майже кожен зсув виникає, коли контент приходить із запізненням у місце, яке під нього не зарезервували. Найчастіші винуватці:
- Зображення й відео без атрибутів width і height, тож браузер не може зарезервувати блок, поки файл не завантажиться.
- Веб-шрифти, які підмінюються й перерозкладають текст (FOUT), штовхаючи все нижче вниз.
- Реклама, embeds та iframes, вставлені після рендера в контейнер без фіксованої висоти.
- Банери, cookie-повідомлення й віджети «вам також сподобається», втиснуті над наявним контентом.
- Динамічно вставлений DOM — промо-бар або A/B-тест, що зʼявляється за мить після first paint.
Як знайти зсуви, яких можна не помітити
Зсуви часто відбуваються швидше, ніж їх фіксує око, або лише на повільному зʼєднанні, тож потрібні інструменти, а не швидкий погляд.
- У панелі Performance запиши завантаження з тротлінгом мережі й відкрий трек Layout Shifts — кожен запис підсвічує елемент, що зрушив, і його внесок в оцінку.
- Використовуй розширення Web Vitals, щоб бачити, як CLS накопичується наживо під час скролу й взаємодії.
- Перевір field data в Search Console/CrUX, щоб підтвердити, що реальні користувачі це бачать, і на якому шаблоні.
- Тестуй на сповільненому зʼєднанні: багато зсувів зʼявляються лише коли шрифти, зображення чи реклама приходять пізно.
Як зарезервувати місце, щоб нічого не стрибало
- Завжди задавай width і height (або CSS aspect-ratio) для зображень, відео та iframes, щоб браузер зарезервував блок ще до завантаження файлу.
- Дай рекламним слотам, embeds і динамічним віджетам min-height за їхнім типовим розміром, щоб пізній контент заповнював зарезервоване місце, а не штовхав сторінку.
- Вантаж шрифти з font-display: optional або swap плюс добре підібраний fallback і size-adjust, щоб мінімізувати перерозклад, коли приходить веб-шрифт.
- Резервуй місце під банери й повідомлення в layout, а не вставляй їх над контентом після завантаження — або фіксуй їх, щоб вони накривали, а не штовхали.
- Використовуй CSS transforms для анімації, ніколи властивості на кшталт top чи height, які запускають layout.
Помилки, що повертають зсуви layout
- Прибирати розміри при переході на «адаптивне» зображення й покладатися лише на CSS width без aspect-ratio.
- Робити lazy-load для зображень над згином, що відкладає їх у незарезервоване місце.
- Тестувати лише на швидкому desktop, де шрифти й зображення приходять миттєво й зсув невидимий.
- Виправити головну й вважати, що шаблон товару чи статті в порядку — CLS рахується для кожного шаблону.
Як перевірити стабільність layout
Перезапиши завантаження в панелі Performance з тротлінгом і переконайся, що трек Layout Shifts порожній для viewport, а потім стеж, як CLS у field data Search Console йде вниз наступні тижні, поки накопичуються реальні візити.
У DomainLens розглядай CLS поряд із LCP та INP: сторінка, що швидко вантажиться, але стрибає, все одно провалює page experience. Найсильніше виправлення — layout, стабільний із first paint, на тому повільному мобільному зʼєднанні, яким реально користуються твої відвідувачі.