CLS (кумулативно изместване на оформлението)
Какво е CLS (кумулативно изместване на оформлението)?
CLS (кумулативно изместване на оформлението) е показателят, който измерва доколко съдържанието на страницата се размества неочаквано, докато тя се зарежда и използва. Всяко изместване се оценява по това колко от екрана засяга и на какво разстояние, а CLS е най-големият сбор от измествания в кратък интервал. Добро е до 0,1, а над 0,25 е лошо. Това е един от трите показателя Core Web Vitals, на английски Cumulative Layout Shift.
Пример
Да вземем продуктова страница на телефон с екран, висок 800 пиксела. Докато тя зарежда, отгоре се появява лента за безплатна доставка, висока 80 пиксела, и избутва цялото съдържание надолу. Изместването засяга целия екран (1,0) на разстояние 80 от 800 пиксела (0,1): 1,0 × 0,1 = 0,10. Малко след това се зарежда снимка без зададени размери и избутва долната половина на екрана (0,5) с 280 пиксела (0,35): 0,5 × 0,35 = 0,175. Сборът е 0,275 — над 0,25, в лошата зона. Човекът, който в този момент е посегнал към „Добави в кошницата“, натиска друго.
Поправката е проста: лентата има запазено място от самото начало, а снимката — зададени ширина и височина, така че браузърът оставя място за нея. Двете измествания изчезват и CLS пада до 0.
Защо има значение за бизнеса
CLS е показателят, който клиентите описват с думите „натиснах, а то отиде другаде“. В магазин това значи грешен размер в кошницата, случайно отворена реклама или изоставена поръчка. Най-честите причини са дребни и се поправят бързо: снимки и видеа без размери, банери и ленти, вмъкнати отгоре, шрифтове, които променят размера на текста при зареждане, и банер за бисквитки, който избутва страницата, вместо да стои върху нея. Изместването удря най-често по призива за действие — бутона, заради който страницата съществува.
Как се подобрява
- Всяка снимка, видео и вграден елемент има зададени размери или пропорция.
- Банери, ленти и известия заемат запазено място или стоят върху съдържанието, без да го бутат.
- Шрифтовете се зареждат така, че резервният и истинският да заемат почти едно и също място.
- Над вече показаното съдържание не се вмъква нищо, освен ако посетителят го е поискал.
Проверяваме CLS на телефон и на компютър като част от оптимизацията на скоростта на сайта, защото изместванията често се появяват само при единия размер на екрана.