Кумулативно изместване на оформлението (CLS)

Кумулативното изместване на оформлението измерва визуалната нестабилност, като определя количествено колко видимо съдържание се премества неочаквано по време на жизнения цикъл на страницата. Това е един от основните показатели за уеб съдържание на Google и за разлика от мерките за зареждане и бързина на реакция, това е безмерна оценка, а не продължителност, изчислена от дела на видимата част, засегната от изместването, и разстоянието, на което е преместено съдържанието. Публикуваният от Google праг третира 0.1 или по-малко като добро на седемдесет и петия персентил от реалното потребителско изживяване.

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

Причините са добре документирани и в повечето случаи лесни за предотвратяване. Изображенията и видеоклиповете без изрично определени размери причиняват преоформяне при зареждане, тъй като браузърът не може да резервира предварително правилното пространство. Реклами, вградени елементи и iframe-ове, вмъкнати в потока без резервиран контейнер, изместват съдържанието надолу. Уеб шрифтовете, които се разменят от резервен вариант с различни показатели, преоформят текста. Съдържание, инжектирано динамично над съществуващо съдържание, като банери, известия и съобщения за съгласие, измества всичко отдолу. Анимации, които променят свойствата на оформлението, вместо да трансформират и непрозрачността, задействат преоформяне на всеки кадър.

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

Измерването изисква внимание към сесията, а не само към зареждането на страницата. Метриката се натрупва през целия живот на страницата, включително промени, които се случват по време на скролиране и взаимодействие, което означава, че страница, която се класира добре при първоначално зареждане, все още може да се класира лошо като цяло поради лениво заредено съдържание, пристигащо без резервирано пространство. Промени, които се случват в рамките на кратък прозорец след взаимодействие с потребителя, се изключват, поради причината, че движението на съдържанието в отговор на умишлено действие е очаквано, а не е разрушително.

Известията за съгласие и промоционалните банери заслужават специално внимание, защото се вмъкват късно, обикновено се управляват извън основния процес на разработка и често изместват съдържанието. Банер, който се появява в горната част на документа след рендиране, измества всичко надолу точно в момента, в който посетителят започва да чете или да търси връзка. Представянето на елементи като наслагвания, които не участват в оформлението, или запазването на място за тях преди рендирането им, решава проблема, без да ги премахва. Тъй като тези компоненти често се конфигурират от маркетингови или правни екипи чрез инструменти на трети страни, решението обикновено изисква разговор между функциите, а не само промяна на кода.

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