CLS
PerformanțăCLS (Cumulative Layout Shift) este o metrică Core Web Vitals care măsoară stabilitatea vizuală a unei pagini web. Cuantifică cât de mult se deplasează neașteptat elementele vizibile în timpul încărcării paginii. Un scor CLS bun este sub 0.1. Layout shift-urile frustrează utilizatorii, cauzând click-uri accidentale și o experiență dezorientantă.
CLS (Cumulative Layout Shift) sau Deplasarea Cumulativă a Layout-ului este metrica Core Web Vitals care evaluează stabilitatea vizuală a paginii. Spre deosebire de LCP și INP care măsoară viteza, CLS măsoară cât de „stabil" este conținutul vizual — dacă elementele se mișcă neașteptat în timp ce utilizatorul încearcă să citească sau să interacționeze.
CLS se calculează prin formula: impact fraction × distance fraction. Impact fraction reprezintă procentul din viewport afectat de deplasare, iar distance fraction este distanța deplasării raportată la viewport. Scorul final este suma tuturor deplasărilor neașteptate pe durata vizitei.
Pragurile Google pentru CLS:
Bun: sub 0.1 — pagină stabilă, elementele rămân pe loc.
Necesită îmbunătățire: 0.1 - 0.25 — deplasări vizibile dar moderate.
Slab: peste 0.25 — experiență frustrantă cu elemente care „sar".
Cauzele principale ale CLS:
Imagini fără dimensiuni — când browserul nu cunoaște dimensiunile imaginii, alocă inițial spațiu zero și reface layout-ul când imaginea se încarcă. Soluție: atributele width și height pe toate imaginile.
Fonturi web care cauzează FOUT/FOIT — schimbarea fontului modifică dimensiunile textului. Soluție: font-display: swap cu font metric override sau preload pe fonturi.
Conținut injectat dinamic — bannere publicitare, notificări cookie, sau conținut încărcat prin JavaScript care „împinge" restul paginii. Soluție: spațiu rezervat cu dimensiuni fixe.
Animații care modifică layout-ul — utilizarea proprietăților top/left în loc de transform. Soluție: animați doar transform și opacity.
Pentru site-urile din România, cele mai frecvente probleme CLS sunt: bannere promoționale fără spațiu rezervat, imagini fără dimensiuni specificate și fonturi Google încărcate fără optimizare. Specificarea width și height pe imagini și rezervarea spațiului pentru conținut dinamic rezolvă 80% din problemele CLS.