Наступний набір рекомендацій стосується кумулятивного зсуву макета (Cumulative Layout Shift, CLS), який є мірою візуальної стабільності веб-сторінок. Наразі близько чверті сайтів все ще не відповідають рекомендованому порогу, тому для них залишаються великі можливості для поліпшення користувацького досвіду.
Встановіть явні розміри для будь-якого контенту, що завантажується зі сторінки.
Зміщення макета зазвичай відбувається, коли наявний контент переміщується після того, як інший контент закінчує завантаження. Тому основним способом боротьби з цим є завчасне резервування будь-якого необхідного простору, наскільки це можливо.
Найпростішим способом усунення зсуву макета, спричиненого безрозмірними зображеннями, є явне задавання атрибутів ширини та висоти (або еквівалентних властивостей CSS).
Однак близько 72% сторінок містять принаймні одне зображення без розміру. Без явної вказівки розміру браузери спочатку встановлюють висоту за замовчуванням у 0px, що може призвести до помітного зсуву макета, коли зображення нарешті завантажиться і його розміри будуть виявлені.
Важливо також пам’ятати, що зображення – не єдині винуватці CLS. Зсув макета може бути викликаний іншим контентом, який зазвичай завантажується після початкового відображення сторінки, включно з рекламою сторонніх виробників або вбудованим відео. Властивість aspect-ratio може допомогти в боротьбі з цим.
Це дасть вам змогу задати динамічну ширину (наприклад, залежно від розміру екрана), а браузеру автоматично розрахувати відповідну висоту, так само, як це робиться для зображень із розмірами.
Іноді неможливо дізнатися точний розмір динамічного вмісту, оскільки він за своєю природою є динамічним. Однак навіть якщо ви не знаєте точного розміру, ви все одно можете вжити заходів, щоб зменшити серйозність зміщення макета. Встановити розумну мінімальну висоту майже завжди краще, ніж дозволити браузеру використовувати висоту за замовчуванням 0px для порожнього елемента.
Уникайте анімацій/переходів, які використовують властивості CSS, що викликають зміщення макета
Ще одним поширеним джерелом зміщення макета є анімація елементів. Наприклад, банери про куки або інші банери-повідомлення, які з’являються зверху або знизу, часто сприяють виникненню CLS. Це особливо проблематично, коли ці банери витісняють інший вміст з екрана, але навіть якщо це не так, їхнє анімування все одно може вплинути на CLS.
Сторінки, що анімують будь-яку властивість CSS, яка може вплинути на макет, мають на 15% менше шансів мати “хороший” CLS, ніж інші сторінки. Це, мабуть, не дивно, оскільки будь-який перехід або анімування будь-якої властивості CSS, що спричиняє зміну макета, призводить до зміщення макета, і якщо це зміщення не відбувається протягом 500 мілісекунд після взаємодії з користувачем, воно впливає на CLS.
Деяких розробників може здивувати те, що це справедливо навіть у тих випадках, коли елемент виноситься за межі нормального потоку документа.
Наприклад, абсолютно позиціоновані елементи, які анімуються зверху або зліва, спричиняють зсув макета, навіть якщо вони не зсувають інший вміст. Однак якщо замість анімації top або left ви анімуєте transform:translateX() або transform:translateY(), це не змусить браузер оновити макет сторінки і, отже, не призведе до зміщення макета.
Ніколи не анімуйте і не переходьте до жодної властивості CSS, яка вимагає від браузера оновлення макета сторінки, якщо тільки ви не робите це у відповідь на дотик або натискання клавіші (але не наведення). І за можливості віддавайте перевагу переходам і анімації за допомогою властивості CSS transform.
