Ce este CLS (Cumulative Layout Shift)?
Cat de mult se misca elementele paginii in timpul incarcarii
Definiție CLS (Cumulative Layout Shift)
CLS masoara stabilitatea vizuala a paginii — cat de mult se misca elementele pe ecran in timpul incarcarii. Ai patit vreodata sa dai click pe un buton si, fix in acel moment, pagina sa se miste si sa apesi altceva? Asta e CLS slab. Un CLS bun este sub 0.1. Se imbunatateste prin setarea dimensiunilor la imagini si fonturi.
De ce contează CLS (Cumulative Layout Shift)
CLS masoara stabilitatea vizuala a paginii — cat de mult se deplaseaza elementele in timpul incarcarii. Un CLS peste 0.1 inseamna ca butoanele, textul si imaginile se muta brusc, cauzand click-uri accidentale si frustrare. Utilizatorii care experimenteaza layout shifts sunt cu 24% mai predispusi sa abandoneze site-ul conform unui studiu Vodafone.
Cum verifici CLS (Cumulative Layout Shift)
SoftAudit calculeaza scorul CLS total al paginii si identifica fiecare element care contribuie la deplasare — imagini fara dimensiuni, fonturi care schimba layoutul, bannere injectate dinamic sau reclame care impinge continutul. Raportul arata contributia fiecarui element la scorul total.
Testează performanța →Greșeli frecvente
Imaginile fara atributele width si height explicite sunt cauza numarul 1 de CLS — browserul nu stie cat spatiu sa rezerve pana cand imaginea nu se incarca complet. A doua cauza este injectarea de bannere sau notificari cookie deasupra continutului, impingand totul in jos dupa ce pagina pare deja incarcata.
Bune practici
Seteaza width si height pe fiecare element <img> si <video>, foloseste CSS aspect-ratio pentru containere responsive si rezerva spatiu fix pentru reclame si elemente dinamice cu min-height. Incarca fonturile cu font-display: optional pentru a evita FOUT (Flash of Unstyled Text) care cauzeaza layout shifts.
Verifică acum
Folosește instrumentul gratuit SoftAudit pentru a verifica cls (cumulative layout shift) pe site-ul tău.
Test Performanță — GratuitÎntrebări frecvente
Ce este CLS (Cumulative Layout Shift)?
CLS masoara stabilitatea vizuala a paginii — cat de mult se misca elementele pe ecran in timpul incarcarii. Ai patit vreodata sa dai click pe un buton si, fix in acel moment, pagina sa se miste si sa apesi altceva? Asta e CLS slab. Un CLS bun este sub 0.1. Se imbunatateste prin setarea dimensiunilor la imagini si fonturi.
De ce este important CLS (Cumulative Layout Shift) pentru un website?
CLS masoara stabilitatea vizuala a paginii — cat de mult se deplaseaza elementele in timpul incarcarii. Un CLS peste 0.1 inseamna ca butoanele, textul si imaginile se muta brusc, cauzand click-uri accidentale si frustrare. Utilizatorii care experimenteaza layout shifts sunt cu 24% mai predispusi sa abandoneze site-ul conform unui studiu Vodafone.
Termeni asociați
Cele 3 metrici Google pentru experienta utilizatorului pe web
Tehnica prin care imaginile se incarca doar cand devin vizibile pe ecran
Numarul de elemente HTML din pagina — prea multe incetinesc site-ul
Proprietatea CSS care controleaza cum se afiseaza textul inainte de incarcarea fontului