CLS (Cumulative Layout Shift)
CLS измерва общото количество неочаквани измествания на оформлението, които се случват през целия жизнен цикъл на страницата, като количествено определя колко видимо съдържание се мести неочаквано.
Cumulative Layout Shift (CLS) е Core Web Vital, който измерва визуалната стабилност. Той количествено определя колко съдържанието на страницата се мести неочаквано, докато се зарежда. Изместване на оформлението се случва, когато видим елемент промени позицията си от един рендиран кадър към следващия без взаимодействие от потребителя. Добрият резултат за CLS е под 0,1. Между 0,1 и 0,25 изисква подобрение, а над 0,25 е лош. Резултатът се изчислява, като се умножи фракцията на въздействие (каква част от видимия прозорец е засегната) по фракцията на разстоянието (колко далеч са се преместили елементите).
Честите причини за изместване на оформлението включват изображения и видеа без размери (браузърът не знае колко място да запази, докато не се заредят), реклами или вградени елементи, които се зареждат динамично и избутват съдържанието надолу, уеб шрифтове, които карат текста да се преоразмери при зареждане (Flash of Unstyled Text), и съдържание, което се инжектира динамично над съществуващото съдържание. Отстраняването на CLS обикновено включва винаги да се включват атрибути width и height на изображенията и видеата, запазване на място за реклами и динамично съдържание, използване на font-display: swap или optional за уеб шрифтове с предварително зареждане и избягване на вмъкване на съдържание над съществуващо съдържание.
На практика
- Новинарски уебсайт намали CLS от 0,42 на 0,05, като запази място за рекламни слотове и добави размери към всички изображения, което доведе до 30% по-дълги средни сесии за четене
- Продуктова страница в сайт за електронна търговия имала CLS от 0,35, защото звездите за оценки на клиенти се зареждали късно и избутвали бутона „Добави в кошницата“ надолу, причинявайки погрешни кликвания; поправянето на това подобрило процента на добавяне в кошницата с 8%
- Блог отстрани проблема си с CLS, причинен от късно зареждане на уеб шрифтове, като предварително зареди файла на шрифта и използва font-display: optional, елиминирайки напълно изместванията на текстовото оформление
- Целева страница запази фиксирани размери за вградено видео, което караше съдържанието под него да подскача, намалявайки CLS от 0,28 на 0,02
Не сте сигурни как се отнася за Вас?
Старши инженер разглежда сайта Ви, присъствието Ви в търсачките и начина, по който стигат запитванията до Вас, след което записва трите неща, които си струва да се поправят първо. Документът остава за Вас във всеки случай.