Кроки по зменшенню CLS
1. Зменшення CLS через fix прижків блоків.
Цей крок найкраще вже робити коли сторінка повністю готова,таким чином буде найлегше відслідкувати що саме нам потрібно поправити цим способом. Для прикладу в нас на головній сторінці є банер,список колекцій та умовно слайдер з продуктами(що саме не дуже важливо,але розглянемо на прикладі Fervens, де саме така структура). Здебільшого показник CLS 0, але якщо з 10 тестів, показник CLS хоч 1 раз покаже більше 0 - можна пофіксити.
На скрішоті вище CLS 0.175. Якщо зайти на pagespeed.web.dev, то під скріншотами з діагностики сайту можна вибрати філ ьтр для категорій діагностики, нам потрібен CLS.
Нижче будуть дропдауни, повʼязані з проблемними блоками.
Знаходимо ці блоки які “пригають” через DevTools,і для прикладу якщо це секція колекції, де є заголовок і сам слайдер,де будуть гортатись слайди з колекціями, то тут проблемний блок це самі слайди. Якщо коротко - спочатку рендериться текст, в такому випадку прорендерився заголовок для блоку колекцій,і якщо нижній блок це також блок де є заголовок та слайдер, то там також прорендерився заголовок. Також, це можна замітити поставивши повільний інтернет у DevTools y Network.
І вже коли починають рендеритись самі слайди, тоді вони завантажуються на своє місце,відкидаючи чим самим заголовок знизу. Це погано впливає на показник CLS, та і візуально якщо дуже повільний інтернет це кидається в очі. Вирішити цю проблему можна звичайним min-height для блок,де відбувається сам стрибок(в нашому випадку блок з слайдами), оптимальне рішення вибрати в DevTools розміри Mobile M, подивитись скільки висотою прогружений блок з слайдами та задати йому таке значення, умовно якщо на Mobile M цей блок займає 185px, то задати йому для медіа запитом для мобілки min-height: 185px, і стрибки пропадуть а СLS знизиться до мінімума, а то і стане 0. Як результат,при завантаженні вже 2 заголовки не будуть один під одним,а кожним на своєму місці(нижче показано на скріні). Зробити це потрібно для всіх проблемних блоків які показувало при діагностиці.
2. Знаходження проблемних блоків для зменшення CLS.
Є випадки, коли або не показує який саме елемент пригає, або показує загальний блок у якому багато елементів(може навіть пригати блок з слайдами продукту, коли одна картинка більша від інших)
Щоб це дослідити, можна через network поставити повільне завантаження сторінки та проаналізувати що та чому саме елемент пригає,і зрозуміти що саме потрібно поправити для зменшення CLS-у.
Також дуже важливо прочитати цю статтю для покращення CLS: Зменшення CLS на Product Page для слайдера продукту