Cumulative Layout Shift (CLS) е част от Core Web Vitals и представлява метрика за измерване на визуалната стабилност на уеб страниците на един сайт. Колкото по-голямо е числото, толкова повече неочаквани за потребителя размествания на елементите в сайта се случват. Повече вижте в сайта на Ganbox.

Какво е CLS - Cumulative Layout Shift

CLS (Cumulative Layout Shift) e чacт oт Соrе Wеb Vіtаlѕ - нaбop oт cпeцифични мeтpиĸи, cвъpзaни cъc cĸopocттa, интерактивността и визyaлнaтa cтaбилнocт нa yeб cтpaницитe. Gооglе ги cчитa зa изĸлючитeлнo cъщecтвeни зa цялocтнoтo пoтpeбитeлcĸo изживявaнe нa дaдeн yeб caйт и от май 2021 са важен ранкинг фактор.

В тази публикация ще научите как се измерва CLS и как да го подобрите, за да стане вашият сайт по-стабилен и бърз.

Cumulative Layout Shift (CLS) е много важна, ориентирана към потребителите метрика за измерване на визуалната стабилност, тъй като помага количествено да се измери колко често потребителите изпитват неочаквани промени в оформлението и разположенията на елементите (layout) на уеб страниците.

Ниският CLS гарантира, че страницата е стабилна и няма нежелани размествания на елементите.

История за непослушния сайт

Случвало ли ви се е да започнете да четете текста на страница и изведнъж цялото съдържание да се размести? Без предупреждение текстът се премества и сте загубили онова, което до този момент сте чели или гледали.

Или още по-лошо, искате да кликнете върху линк или бутон, но преди пръстът ви да е натиснал бутона на мишката - линка се премества и накрая щраквате върху нещо съвсем друго, като например реклама – изключително досадно!

А сега си представете, че сте започнали поръчка в онлайн магазин и вместо бутон [Отказ] за отказване, сте натиснали бутон [Плати] с което потвърждавате поръчката. Ако плащането е моментално, например с кредитна карта, това ще доведе до нежелано изпращане на пари. Как ще се почувствате тогава? Ето подобен визуален пример:

През повечето време този вид “преживявания” са просто досадни, но в някои случаи могат да причинят реални щети.

Ето защо е важно да се уверите, че във вашия сайт няма подобни размествания, които изнервят посетителите и влошават SEO показателите на сайта.

Добрата новина е, че CLS е една от метриките, която най-лесно се поправя и с малко усилия може да се сведе до идеалната стойност - нула. Прочетете статията докрая, за да разберете как.

Внезапното разместване на съдържанието на страницата обикновено се случва, поради нейните ресурси, които се зареждат асинхронно, или DOM елементите се добавят динамично към страницата, върху съществуващото съдържание.

Виновникът за това разместване, може да е изображение или видео с неизвестни размери, шрифт, който се рендира по-голям или по-малък от неговия "резервен вариант" (fallback), реклама или widget (джаджа), която динамично се преоразмерява.

Това, което прави нещата още по-сложни, е разликата в начина по който сайта функционира по време на разработката му, и този по който потребителите го възприемат и използват.

Обикновено, персонализираното съдържание или third party съдържанието (например реклами), във фаза на разработка, се представя съвсем различно, отколкото, когато вече сайтът е завършен и пуснат онлайн. Много често, тестовите изображения вече са в кеша на браузъра на разработчика, докато API заявките, изпълняващи се локално, често са толкова бързи, че забавянето или отместването не се забелязва.

Метриката Cumulative Layout Shift (CLS) ви помага да откриете този проблем, като измервате колко често реалните потребители на сайта се сблъскват с него.

Какво е CLS?

CLS е метрика, калкулирана като се съберат всички размествания на оформлението (layout shifts), които не са причинени от действията на потребителя за целия живот на страницата в браузъра (докато не бъде затворен таба или браузъра, или не бъде напуснат сайта, чрез изходяща връзка).

Layout shift се случва всеки път, когато визуален елемент променя позицията си от първия към последващия рендиран фрейм. (По-долу може да видите подробности за това, как се изчисляват индивидуалните резултати от layout shift.)

Може ли да се говори за добър CLS резултат?

За да осигурят добро потребителско изживяване, собствениците на сайтове трябва да се стремят да имат CLS резултат от 0,1 или по-малко. За да сте сигурни, че постигате тази цел за повечето от вашите потребители, добър праг за измерване е 75-ия процентил (това означава, че 75% от всички имат тази или по-добра стойност) от зареждането на страницата, сегментиран между мобилни и настолни устройства.

Метриката CLS разгледана в детайли

“Разместването на оформлението” се идентифицира с Layout Instability API, което отчита layout shift заявките, всеки път, когато елемент намиращ се във видимата част на екрана промени стартовата си позиция (примерно, горната и лявата позиция във writing mode) между два фрейма. Такива елементи се считат за нестабилни елементи.

Имайте предвид, че layout shift се случва само когато вече съществуващи елементи променят началната си позиция. Ако нов елемент бива добавен към DOM или съществуващ елемент промени размера си, това не се счита за “промяна на оформлението” - стига тази промяна да не причини други видими елементи да променят началната си позиция, например тези под текущия елемент.

Изчисляване на CLS резултати

За да изчисли layout shift score (LSC), браузърът взема предвид размера на видимата част на екрана и разместването на нестабилните елементи, между два рендирани фрейма.

Layout shift score се образува от умножението на две метрики: част на въздействието (impact fraction) и част на разстоянието (distance fraction).

Формулата е LSC = IF * DF

Част на въздействието – Impact fraction (IF)

Метриката част на въздействието измерва влиянието на нестабилните елементи върху видимата част на екрана, между два фрейма.

Обединяването на видимите полета на всички нестабилни елементи за предходния и текущия фрейм (като част от общата площ на видимата част на екрана) е част на въздействието за текущия фрейм.

Визуален пример 1

На изображението по-горе се вижда елемент, заемащ половината от видимата част в един фрейм. В следващия фрейм, елементът се измества надолу с 25% от височината на видимата част на екрана. Червеният, пунктиран правоъгълник показва обединяване на видимата част на елемента и в двата фрейма, което в случая е 75% от видимата част, така че неговата част на въздействие е 0,75.

Част на разстоянието – Distance fraction

Другата част от уравнението за layout shift score измерва разстоянието, която нестабилните елементи са изминали при разместването им, спрямо видимата част на екрана.

Част на разстоянието е най-голямото разстояние, което всеки нестабилен елемент е направил при разместването си във видимата част на екрана (хоризонтално или вертикално), разделено на най-големия размер на видимата част на екрана (ширина или височина, в зависимост от това, коя от величините е по-голяма на конкретното устройство).

В горния пример най-голямата величина на видимата част на екрана е височината, а нестабилният елемент се е преместил с 25% от височината на екрана, което прави част на разстоянието 0,25.

И така, в този пример част на въздействие е 0,75, а част на разстоянието е 0,25, така че layout shift score е 0,75 * 0,25 = 0,1875.

Заб. LSC е числова стойност и няма мерна единица, защото е коефициент на въздействието. Колкото по-близо до 0 е тази стойност, толкова по-добре. Лесно се вижда, че ако една от частите е нула, тогава LSC става 0, което е желаната от нас стойност.

Визуален пример 2

Следващия пример илюстрира как добавянето на ново съдържание към вече съществуващо, влияе на layout shift резултата.

Бутонът [Click Me!] е вмъкнат динамично в долната част, на сивото поле с черен текст, което изтласква зеленото поле с бял текст надолу (и частично извън видимата част на екрана).

В този пример сивото поле променя размера си, но началната му позиция не се променя, затова не може да се счита за нестабилен елемент (част на разстоянието е 0).

Бутонът [Click Me!] не се е намирал в DOM, затова началната му позиция също не се променя.

Началната позиция на зеленото поле обаче се променя, но тъй като е частично преместено извън видимата част на екрана, невидимата площ (invisible area) не се взема предвид при изчисляване на част на въздействие.

Обединяването на видимите площи на зеленото поле и в двата фрейма (обградено с червения, пунктиран правоъгълник) е равно на площта на зеленото поле в първия фрейм (50% от видимата част на екрана). Частта на въздействие е 0,5.

Част на разстоянието е илюстрирана със синята стрелка. Зеленото поле се е преместило надолу с около 14% от видимата част на екрана, така че част на разстоянието е 0,14.

Layout shift резултата е 0,5 х 0,14 = 0,07.

Визуален пример 3

Последния пример илюстрира множество нестабилни елементи:

В първия кадър по-горе са представени четири резултата от API заявка за животни, сортирани по азбучен ред. Във втория кадър към сортирания списък се добавят още резултати.

Първият елемент в списъка "Cat" не променя началната си позиция между фреймовете. Така че, той е стабилен. По същия начин, понеже новите елементи, добавени в списъка не са били в DOM преди това, следователно и техните начални позиции не се променят. Но елементите с надписи „Dog“, „Horse“ и „Zebra“ сменят началните си позиции, което ги прави нестабилни елементи.

Отново червените, пунктирани правоъгълници показват обединението на предишните и последващите области на тези три нестабилни елемента, което в случая е около 38% от площта на видимата част на екрана (част на въздействие от 0,38).

Стрелките показват разстоянията на преместване на нестабилните елементи от началните им позиции. Елементът "Zebra", представен със синята стрелка, се е преместил най-много, с около 30% от височината на видимата част на екрана. Това прави част на разстоянието 0,3.

Layout shift резултата е 0,38 x 0,3 = 0,1172.

Очаквани спрямо неочаквани промени на оформлението

Не всички промени на оформлението са лоши. Всъщност много динамични уеб приложения често променят началната позиция на елементите на страницата.

Инициирани от потребителя layout промени

Промяната на оформлението е лоша практика, само ако потребителят не я е очаквал.

От друга страна, разместванията появяващи се в резултат на потребителски взаимодействия (кликване върху връзка, натискане върху бутон, попълване на форми и други подобни) не са лоша практика, стига те да се случват достатъчно близо до взаимодействието, за потребителя да е наясно с причините довели до тези промени.

Например, ако потребител, взаимодействайки със страницата направи мрежова заявка, която отнема известно време за изпълнение, най-удачно би било да бъде показан индикатор за зареждане (loading indicator), за да се избегне неприятна промяна в оформлението, веднага щом заявката свърши. Ако потребителят чакайки не осъзнава, че страницата се зарежда, той може да кликне върху друг елемент на екрана.

CLS случващ се в рамките на 500 милисекунди (половин секунда) от влизането на потребителя, ще бъдат маркирани с флаг hadRecentInput, така че те могат да бъдат изключени от изчисленията.

Как се измерва CLS

CLS може да се измерва чрез няколко инструмента:

Инструменти за измерване на полеви данни

При този вид измерване данните се събрани от браузърите на посетителите на вашия сайт. Това измерване е много по-точно, но изисква сайтът да бъде силно посещаван, за да може бързо да се съберат повече и по-точни данни. Ето няколко инструмента за полеви данни:

Лабораторни инструменти

При този вид измерване, сайтът се тества от едно единствено място - от уеб сървъра на инструмента, който обикновено е извън България или се тества от вашия браузър.

Един от инструментите, който ползваме в Ganbox за създаване на отчети за сайтове на клиенти, е Core Web Vitals на Google Search Console.

Измерване на CLS в JavaScript

Заб. Тази точка би била полезна за уеб програмисти, ако не се занимавате с програмиране в JavaScript може да я пропуснете и да преминете към точката "Как да подобрим CLS на сайта?" долу, за да разберете как да подобрите скростта на сайта си.

За да измерите CLS в JavaScript, може да използвате Layout Instability API. Следващият пример показва как да създадете PerformanceObserver, който засича неочаквани layout-shift entries (записи), събира ги и ги записва в конзолата (logs):

В горния пример всички layout-shift записи (entries), чийто флаг hadRecentInput е зададен на false, се събират, за да се определи текущата стойност на CLS. В повечето случаи текущата стойност на CLS към момента на “разтоварване” (unloaded) на страницата е крайната стойност на CLS за тази страница, но има няколко важни изключения:

Следващият раздел изброява разликите между това, което API-то отчита и как се изчислява метриката.

Разлики между метриката и API-то

Ако дадена страница е във фоново състояние (background state) за целия си работен цикъл, тя не трябва да отчита никаква стойност на CLS.
Ако дадена страница се възстанови от back/forward cache, нейната CLS стойност трябва да бъде нулирана, тъй като потребителите преживяват това като отделно посещение на страницата.
API не отчита layout-shift entries за промени, които възникват в iframes, но ако целта е точно измерване на CLS, трябва да бъдат взети предвид.

В допълнение към тези изключения, CLS има известна сложност поради факта, че измерва целия живот (lifespan) на страницата:

Потребителите могат да държат отворен таб (tab) на браузъра за много дълго време - дни, седмици, месеци. Всъщност е възможно потребителят никога да не затвори таба.
На мобилните устройства, браузърите обикновено не изпълняват page unload callbacks за табове във фонов режим, което затруднява отчитането на „крайната“ стойност.

За да се превъзмогнат подобни случаи, CLS трябва да се отчита по всяко време, когато дадена страница работи във фонов режим. Системите за анализ, получаващи тези данни, ще трябва да изчислят крайната стойност на CLS в бекенда.

Вместо да помнят всичко това, разработчиците могат да използват web-vitals JavaScript library за измерване на CLS, където подробно е обяснено всичко споменато по-горе:

Можете да разгледате сорс кода за getCLS) за подробно обяснение по измерването на CLS в JavaScript.

Как да подобрим CLS на сайта?

Можете да избегнете всички неочаквани промени в оформлението на вашия уебсайт, като спазвате няколко принципа:

Винаги добавяйте атрибути за размер (size attributes) на вашите изображения и видео елементи или по друг начин си запазете необходимото пространство (required space) за елемента. Това гарантира, че браузърът ще задели правилното количество пространство в документа, още докато изображението се зарежда и няма да се получи разместване. Уверете се, че изображенията не са "извънгабаритни" - големи изображения, които се показват в малко поле. Ако са такива трябва да бъдат преоразмерени (resize) и качени отново на сървъра като заменят старите.

Използвайте поддържани от браузъра шрифтове или шрифтове, които се зареждат от вашия уеб сървър. Зареждането на екзотични шрифтове от отдалечен сървър, може да доведе до премигване или разместване на съдържанието.
Никога не вмъквайте съдържание върху съществуващо такова, освен в отговор на взаимодействието с потребителя (примерно кликване). Това гарантира, че промените в оформлението, които се случват са очаквани от него.
Ползвайте transform animations вместо animations of properties, които предизвикват промени в оформлението (layout).

За да проучите в подробности техниките за подобряване на CLS, прочетете статията Optimize CLS.

Ето и едно видео на български за CLS от колегите от уеб студио Creativiso