Кумулятивний зсув макета (CLS)

Що таке кумулятивний зсув макета (CLS)?

Кумулятивний зсув макета (CLS) - це показник Core Web Vitals, розроблений Google для вимірювання візуальної стабільності веб-сторінки. Вона кількісно оцінює загальну кількість усіх неочікуваних змін макета, які відбуваються протягом усього життя сторінки. Зрушення макета відбуваються, коли видимий елемент змінює своє положення від одного відрендереного кадру до іншого.

Як вимірюється CLS

Оцінки CLS варіюються від 0, що означає відсутність зсуву, до значень вище 0, які вказують на різний ступінь нестабільності. Формула враховує частку удару і частку відстані кожного зсуву, обчислюючи, наскільки сильно переміщуються елементи і яку частину вікна перегляду вони покривають.

Інтерпретація балів CLS

• Добре: 0 - 0.1
• Потребує покращення: 0.1 - 0.25
• Бідні: понад 0,25

Чому CLS важливий?

CLS має вирішальне значення для користувацького досвіду, оскільки несподівані зміни макета можуть призвести до розчарування користувачів. Наприклад, якщо користувач збирається натиснути кнопку, а макет змінюється, і він ненавмисно натискає щось інше, це може призвести до погіршення користувацького досвіду і потенційної втрати конверсій.

Поширені причини поганої якості CLS

1. Зображення без вимірів:

   • Включення зображень в HTML без зазначення їхньої ширини та висоти може призвести до зсуву макета, оскільки браузер не знає, скільки місця виділити спочатку.

2. Оголошення, вбудовування та іфрейми без розмірів:

   • Ці елементи можуть динамічно навантажуватися і викликати зміщення макета, якщо їх розміри не вказані заздалегідь.

3. Динамічно впроваджуваний вміст:

   • Додавання контенту над існуючим контентом в DOM може виштовхнути елементи вниз, що призведе до їхнього зсуву.

4. Веб-шрифти, що спричиняють FOIT/FOUT:

   • Спалах невидимого тексту (FOIT) і спалах нестилізованого тексту (FOUT) можуть спричинити зміну макета під час завантаження веб-шрифтів браузером.

Найкращі практики для мінімізації CLS

1. Включити атрибути розміру для зображень і відео:

   • Завжди визначайте ширину і висоту зображень і відео в HTML, щоб зарезервувати місце в макеті до їх завантаження.

2. Зарезервуйте місце для реклами та вбудовування:

   • Використовуйте CSS для встановлення розмірів рекламних слотів, iframe і вбудовувань, щоб уникнути зсуву макета при їх завантаженні.

3. Уникайте динамічного додавання вмісту поверх наявного:

   • Додайте новий вміст під згином або всередині контейнерів, які вже мають зарезервоване місце.

4. Використовуйте стратегії завантаження шрифтів:

   • Використовуйте властивість CSS font-display, щоб контролювати відображення веб-шрифтів і мінімізувати зсуви через FOIT/FOUT.

5. Використовуйте трансформацію CSS для анімації:

   • Використовуйте властивість transform замість top, bottom, left або right, щоб анімувати елементи, не спричиняючи зсувів макета.

Висновок

Кумулятивний зсув макета (CLS) - це життєво важливий показник для забезпечення стабільного та візуально привабливого користувацького досвіду. Розуміючи фактори, які впливають на зміну макета, і впроваджуючи найкращі практики для їх мінімізації, ви можете покращити показник CLS вашої веб-сторінки і підвищити загальну задоволеність користувачів.

Для отримання додаткової інформації про вдосконалення CLS та інших основних веб-показників, ознайомтеся з документацією Google про веб-показники.