Як оптимізувати CLS і не зійти з розуму

Уявіть собі, що ви – користувач, який заходить на сайт щось подивитися. Ви заходите на сторінку, починаєте щось читати, але раптово відбувається зрушення тексту і вам потрібно шукати місце, на якому сталася зупинка. Або ви збираєтеся натиснути на кнопку “подивитися товар”, але через зрушення контенту випадково натискаєте кнопку “купити” або “підписатися”.

Найчастіше це дратує, а в деяких випадках може принести шкоду власнику сайту – сайт буде втрачати відвідувачів через незручності роботи з ним.

Причини зсуву тексту при завантаженні сторінки:

  1. Завантаження реклами. Ви читаєте текст і в процесі скролла довантажується реклама, яка вклинюється в текст і зрушує його.
  2. Асинхронне завантаження окремих елементів сайту: підвантаження на сторінку сайту елементів без чітко заданих розмірів зображення або відео.
  3. Неправильне використання шрифтів. Наприклад, не вказано динамічної зміни шрифтів при завантаженні сторінки.

Проблему вирішує вимірювання частоти у користувачів подібних зрушень.

Що таке CLS

У 2020 році Google представив нову систему метрик – Core Web Vitals. Вона вимірює три основні критерії: швидкість завантаження сторінок, інтерактивність і візуальну стабільність з боку користувача сайту.

CLS (Cumulative Layout Shift) – це показник який оцінює частоту та обсяг зсуву сторінкового макета. Він дозволяє побачити, як часто відвідувачі сторінки стикаються з непередбаченими зрушеннями.

Вимірюється за шкалою від 0,0 до 1,0. 0,0 – очікувані зрушення, які вважаються нормою. Чим більше випадкових зрушень, тим вище показник і тим нижче буде ранг сайту в пошуковій видачі. Хорошим показником вважається значення до 0,1. Вище 0,25-У сторінки є проблеми. Приклади інструментів для вимірювання CLS-PageSpeed Insights, Lighthouse.

Як знизити показник CLS

  • Резервуйте місце під зображення. Включайте атрибути розміру у свої картинки і відео або якимось іншим способом резервуйте місце так, щоб браузер сам вибирав потрібний обсяг зображення при завантаженні сторінки. Найпростіший спосіб – використовуйте атрибути ширини (width) і висоти (height). Якщо такої можливості немає, резервуйте обсяг за допомогою CSS стилів.
  • Використовуйте інструменти анімації перетворень замість анімації властивостей, які змінюють макет сторінки. Користувач повинен бачити плавність зміни макета. І для цього можна застосовувати замість HTML-атрибутів розміру width І height атрибут CSS transform: scale(). Замість HTML-атрибутів переміщення top, right, bottom або left – атрибут transform: translate(). Властивість transform дозволяє плавно анімувати сторінкові елементи, не зрушуючи макет.
  • Уникайте встановлення вмісту на вершині того, що вже завантажено на сторінку. Користувач дивиться вже завантажений контент і його не повинні збивати спливаючі поверх вікна, вкладки або реклама. Виняток-відповідь на будь-яку дію користувача. Будь-яка зміна макета сторінки має бути передбачувано і зрозуміло користувачеві. Ніяких несподіванок.
  • Контролюйте швидкість завантаження шрифтів – чим швидше і синхронніше вони завантажуються, тим краще для показника CLS. Найважливіші шрифти повинні завантажуватися попередньо, сортуйте завантажувані шрифти і виключайте невикористовувані. Для завантаження зовнішніх шрифтів використовуйте атрибут rel= “preload” для тега <link>.
  • Додайте властивість font-display: optional – вона допоможе уникнути проблеми при перемиканні шрифтів.
  • Для аналізу використовуйте додатки у хромі на кшталт CLS Visualizer або інші доступні інструменти.
Оцініть статтю
Додати коментар