Мінімізація CLS для пришвидшення завантаження сторінок

Щоб рекомендації завантажувалися миттєво й не псували Core Web Vitals, потрібно заздалегідь резервувати місце, показувати легкі плейсхолдери та замінювати їх даними атомарно. Нижче — покрокова інструкція для веб-розробника, яка допоможе уникнути layout shift (CLS) і зберегти LCP/INP у зеленій зоні.

Етап 1: Виділення та резервування місця

Мета: Браузер повинен знати розміри елемента до завантаження його вмісту.

Крок	Дія	Рекомендації
1.1. Резервування розміру	Завжди вказуйте атрибути `width` і `height` для елементів, що завантажуються асинхронно (зображення, відео, рекламні блоки).	Використовуйте `aspect-ratio`, а якщо відоме лише співвідношення сторін — «padding-hack» для адаптивного дизайну.
1.2. Оформлення контейнера	Створіть фіксований контейнер (оболонку) для динамічного вмісту, який не змінює свій розмір.	Задайте очікувану висоту через `min-height` для елементів із варіативним обсягом тексту (картки товарів, коментарі тощо).

Етап 2: Відображення плейсхолдера (скелетона)

Мета: Заповнити зарезервоване місце візуальним макетом до приходу даних.

Крок	Дія	Рекомендації
2.1. Відображення скелетона	Усередині контейнера (з кроку 1.2) одразу відобразіть візуальний skeleton screen.	Скелетон повинен мати той самий розмір і співвідношення елементів, що й кінцевий вміст (наприклад, місце для заголовка, аватарки та кількох рядків тексту).
2.2. Стилізація скелетона	Оформіть скелетон так, щоб він імітував майбутні блоки (світло-сірі прямокутники, легка анімація).	Використовуйте чистий CSS або готові бібліотеки для скелетних ефектів. Важливо: розміри цих блоків мають відповідати кінцевим розмірам.

Етап 3: Робота з даними та заміщення

Мета: Плавно замінити плейсхолдер реальними даними.

Крок	Дія	Рекомендації
3.1. Отримання даних	Надішліть запит до API для отримання реальних даних.	Використовуйте сучасні механізми (наприклад, fetch або бібліотеки типу Axios).
3.2. Рендеринг даних	Як тільки дані отримано, створіть реальний елемент вмісту (наприклад, картку товару) у пам'яті (або як прихований елемент).	Переконайтеся, що ваш реальний вміст займає стільки ж місця, скільки займав скелетон, або принаймні не перевищує розміри, зарезервовані в кроці 1.2.
3.3. Атомарна заміна	Замініть скелетон реальним, щойно він готовий.	Використовуйте єдину операцію в DOM (наприклад, заміна вузла або швидке перемикання класів), щоб мінімізувати час між видаленням скелетона та відображенням даних.

Етап 4: Обробка відсутності даних

Мета: Не допустити зсувів, якщо динамічний вміст порожній.

Крок	Дія	Рекомендації
4.1. Дані відсутні	Якщо відповідь API повертає порожній набір даних, і елемент не потрібен, прийміть рішення:	Оберіть один із варіантів:
4.2. Варіант А: Видалення	Видаліть зарезервований контейнер (з кроку 1.2) та скелетон.	Ризик CLS: Якщо видалений елемент знаходився вище "згину" сторінки, це може викликати невеликий CLS для елементів під ним. Рекомендація: Це можна робити, якщо контейнер невеликий і його видалення не сильно вплине на макет.
4.3. Варіант Б: Альтернативний вміст	Замініть скелетон на повідомлення про відсутність даних (наприклад, "Немає доступних товарів" або "Коментарів поки немає").	Найкращий варіант: Це зберігає зарезервоване місце (крок 1.2), запобігаючи стрибкам, і надає користувачеві корисну інформацію. Повідомлення повинно займати ту ж саму область.

Загальні рекомендації для запобігання CLS

Уникайте вставки вмісту над існуючим: Ніколи не вставляйте динамічний вміст (наприклад, банери, спливаючі вікна) у верхню частину сторінки після того, як основний вміст вже завантажився. Якщо це необхідно, використовуйте модальні вікна або плаваючі елементи з фіксованою позицією (position: fixed), які не впливають на макет сторінки.
Веб-шрифти: Використовуйте font-display: swap і, якщо можливо, завантажуйте локальну версію шрифту або використовуйте size-adjust для зменшення ефекту FOUT (Flash of Unstyled Text) або FOIT (Flash of Invisible Text), що також може спричиняти CLS.
Трансформації замість властивостей макета: Для анімацій, які повинні рухати елементи, використовуйте властивості CSS, такі як transform: translate(), замість зміни властивостей, що викликають перемалювання макета (top, left, width, height).

Updated 9 months ago

Did this page help you?