Remedierea Cumulative Layout Shift în 2026: Pas cu Pas

Scorurile Cumulative Layout Shift (CLS) peste 0.1 sunt clasificate ca "necesită îmbunătățiri" de pragurile Core Web Vitals de la Google, iar scorurile peste 0.25 sunt considerate "slabe". Remedierea CLS înainte ca acesta să ajungă la utilizatori este mai ieftină decât recuperarea clasamentelor pierdute ulterior – începeți cu măsurătorile, apoi remediați cauzele principale în ordinea priorității.

Ce este Cumulative Layout Shift?#

CLS este o măsurătoare Core Web Vitals care cuantifică cât de mult se mișcă vizibil conținutul paginii în mod neașteptat pe durata unei vizite pe pagină. Fiecare modificare individuală a aspectului contribuie cu un scor egal cu fracția de impact (cât de mult s-a mișcat din viewport) înmulțită cu fracția de distanță (cât de departe s-a mișcat). Google le adună într-un scor de fereastră de sesiune și raportează cea mai proastă fereastră.

Un scor de 0 înseamnă că nimic nu s-a mișcat. Un scor de 0.1 sau mai mic este "bun". Orice valoare peste aceasta este o problemă măsurabilă pentru UX și pentru clasament.

De ce mai contează CLS în 2026?#

Google folosește datele de teren din Chrome User Experience Report (CrUX) – nu doar datele de laborator – pentru a evalua Core Web Vitals pentru clasament. CLS este unul dintre cele trei semnale din actualizarea Page Experience, alături de Largest Contentful Paint (LCP) și Interaction to Next Paint (INP).

Dincolo de clasamente, un CLS ridicat provoacă daune reale: utilizatorii apasă accidental butonul greșit, formularele se resetează și fluxul de citire se întrerupe la mijlocul unei propoziții. Aceste rezultate cresc ratele de respingere și reduc conversia.

Cum măsurați CLS cu precizie?#

Utilizați atât instrumente de laborator, cât și instrumente de teren, deoarece acestea surprind diferite moduri de eșec.

Instrumente de laborator (pentru depanare):

• Panoul Chrome DevTools Performance – înregistrați o încărcare a paginii și inspectați clusterele Layout Shift din track-ul Experience
• Lighthouse (încorporat în DevTools sau CLI) – semnalează CLS și link-uri către elementele care contribuie
• WebPageTest – oferă o vizualizare filmstrip, astfel încât să puteți verifica vizual când au loc modificări

Instrumente de teren (pentru date reale ale utilizatorilor):

• Google Search Console → raportul Core Web Vitals – arată starea CLS grupată după tipul URL-ului
• PageSpeed Insights – combină datele de teren CrUX cu datele de laborator Lighthouse pe același ecran
• Biblioteca JavaScript Web Vitals (web-vitals pachet npm) – vă permite să înregistrați CLS în propriile analize

Prioritizează întotdeauna remedierea URL-urilor semnalate ca "slabe" în Search Console, deoarece acestea afectează direct clasamentul.

Ce cauzează un CLS ridicat?#

Marea majoritate a problemelor CLS se încadrează într-un set restrâns de cauze principale.

Imagini și videoclipuri fără dimensiuni explicite

Când browserul nu cunoaște dimensiunile unei imagini înainte de a se încărca, alocă zero spațiu. Apoi, imaginea împinge conținutul în jos când sosește. Remediere: setați întotdeauna atributele width și height pe elementele <img> și <video> și utilizați CSS aspect-ratio ca fallback.

Reclame, încorporări și iframe-uri fără spațiu rezervat

Sloturile de anunțuri terță parte și încorporările sociale injectează conținut asincron. Browserul nu are un avertisment prealabil cu privire la dimensiunea lor. Remediere: rezervați înălțimea maximă așteptată a slotului cu un marcaj CSS înainte ca anunțul să se încarce.

Fonturi web care cauzează FOUT sau FOIT

Flash of Unstyled Text (FOUT) sau Flash of Invisible Text (FOIT) provoacă reflow de text atunci când fontul personalizat se schimbă, deplasând elementele din jur. Remediere: utilizați font-display: optional pentru fonturile non-critice sau font-display: swap combinat cu descriptorii size-adjust și ascent-override pentru a potrivi metricile de fallback cu fontul personalizat.

Conținut injectat dinamic deasupra conținutului existent

Bannerele, notificările de consimțământ pentru cookie-uri și anteturile "sticky" inserate deasupra pliului după redarea inițială împing pagina în jos. Remediere: pre-redă aceste elemente pe partea de server sau utilizează CSS position: fixed / sticky, astfel încât să se suprapună mai degrabă decât să înlocuiască conținutul.

Animații care utilizează proprietăți CSS care declanșează aspectul

Animarea top, left, width, height sau margin forțează recalcularea aspectului și contribuie la CLS. Remediere: animați doar transform și opacity, care sunt compuse pe GPU și nu declanșează aspectul.

Cum remediați CLS-ul legat de imagini?#

Aceasta este cea mai importantă remediere pentru majoritatea site-urilor.

1. Verificați fiecare etichetă <img> – confirmați că atât atributele width, cât și height sunt prezente cu dimensiunile pixelilor intrinseci.
2. Adăugați global CSS img { height: auto; }, astfel încât scalarea responsivă să funcționeze în continuare chiar și atunci când sunt setate dimensiuni explicite.
3. Pentru imagini responsive care utilizează srcset, setați cele mai mari dimensiuni ca atribute width/height – browserul folosește raportul de aspect, nu dimensiunea literală.
4. Pentru elementele <picture> cu crop-uri de art-direction la diferite puncte de întrerupere, utilizați proprietatea CSS aspect-ratio per punct de întrerupere într-un bloc <style>.
5. Pentru imaginile lazy-loaded sub muchie, includeți în continuare dimensiunile – lazy loading întârzie preluarea, dar nu și alocarea spațiului.

Cum remediați CLS-ul legat de fonturi?#

CLS-ul de font-swap este subtil, dar măsurabil, mai ales pe paginile cu mult text.

1. Găzduiți-vă singur fonturile ori de câte ori este posibil pentru a elimina latența de căutare DNS, care întârzie disponibilitatea fonturilor.
2. Utilizați <link rel="preload" as="font"> pentru fontul primar al corpului, astfel încât să sosească înainte de prima pictură.
3. Adăugați font-display: optional pentru fonturile decorative care nu sunt esențiale pentru aspect – browserul folosește fallback-ul dacă fontul nu este stocat în cache, evitând orice swap.
4. Utilizați descriptorii CSS size-adjust, ascent-override și descent-override în interiorul @font-face pentru a potrivi metricile fontului de fallback cu fontul personalizat, eliminând reflow-ul la swap.
5. Testați cu fila Network redusă la Slow 3G pentru a reproduce scenariile de swap în cel mai rău caz.

Cum remediați CLS-ul de reclame și terțe părți?#

Conținutul terță parte este cea mai dificilă sursă CLS de controlat, deoarece nu dețineți codul.

1. Rezervați dimensiuni explicite ale sloturilor. Împachetați fiecare anunț sau încorporare într-un container cu un min-height fix care să se potrivească cu cea mai mare dimensiune creativă așteptată.
2. Utilizați un marcaj schelet CSS. Un bloc de fundal gri de aceeași dimensiune ca și anunțul așteptat previne o schimbare bruscă goală-apoi-conținut.
3. Încărcați scripturi terță parte cu async sau defer. Scripturile care blochează firul principal întârzie punctul în care spațiul rezervat este umplut, extinzând fereastra de schimbare.
4. Verificați cu funcția "Block" a WebPageTest. Blocați domenii terțe individuale pentru a izola ce script cauzează ce schimbare.
5. Luați în considerare mutarea bannerelor de consimțământ și a notificărilor cookie în modale de suprapunere, mai degrabă decât bannere în partea de sus a paginii, care deplasează conținutul.

Cum utilizați bfcache pentru a preveni CLS la navigare?#

Cache-ul back-forward (bfcache) restaurează un snapshot de pagină complet randat atunci când utilizatorii navighează înapoi sau înainte, eliminând modificările aspectului cauzate de reîncărcarea conținutului dinamic. Cele mai multe browsere moderne acceptă bfcache, dar paginile cu listenere de evenimente unload, headere Cache-Control: no-store sau tranzacții IndexedDB în curs sunt neeligibile.

Pentru a maximiza eligibilitatea bfcache:

• Eliminați toți listenerii de evenimente unload; înlocuiți cu pagehide
• Evitați Cache-Control: no-store pe paginile care nu conțin date sensibile
• Închideți conexiunile IndexedDB deschise înainte ca utilizatorul să navigheze

Aceasta este o prioritate pentru 2025–2026, deoarece Google măsoară acum CLS în timpul navigărilor, nu doar la încărcările inițiale.

Cum validați corecțiile înainte de implementare?#

Nu implementați niciodată reparații CLS orbește – verificați mai întâi într-un mediu de staging.

1. Rulați Lighthouse împotriva adresei URL de staging și confirmați că scorul CLS scade la 0.1 sau mai puțin.
2. Înregistrați un profil Performance în Chrome DevTools și confirmați că nu apar intrări Layout Shift în track-ul Experience în timpul călătoriei critice a utilizatorului.
3. Utilizați API-ul PerformanceObserver cu type: 'layout-shift' pentru a înregistra intrări de shift individuale în timpul testării QA:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift value:', entry.value, entry);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

4. După implementare, monitorizați raportul Core Web Vitals din Search Console. Datele de teren se actualizează de obicei în termen de 28 de zile pe măsură ce sunt colectate noi date CrUX.

Ce este un scor CLS bun pentru 2026?#

Țintește 0.1 sau mai puțin. Multe site-uri de înaltă calitate ating 0.05 sau mai puțin. Plafonul practic pentru "nicio schimbare vizibilă" pe care majoritatea utilizatorilor o percep este de aproximativ 0.05 – peste acesta, mișcările subtile devin vizibile, mai ales pe dispozitivele mobile, unde fracțiunile de viewport sunt mai mari în termeni de pixeli absoluti.

Prioritizează CLS-ul mobil separat de desktop. Semnalele de clasare Google se bazează pe datele mobile CrUX pentru paginile indexate pe mobil, iar viewports-urile mobile fac ca fiecare modificare a aspectului să aibă un impact vizual mai mare.

Ordinea de prioritate a remedierilor CLS#

Când timpul este limitat, remediați în această ordine, în funcție de frecvență și impact:

1. Imagini fără dimensiuni – impactul cel mai larg, cea mai ușoară remediere
2. Reflow de font swap – impact ridicat pe paginile cu mult text
3. Conținut dinamic deasupra pliului (bannere, avize) – întrerupere vizuală imediată
4. Rezervarea sloturilor de reclame și încorporări – dificilă, dar esențială pentru site-urile cu suport publicitar
5. Animații care declanșează aspectul – de obicei o contribuție CLS mai mică, dar merită verificată
6. Eligibilitatea bfcache – prioritate modernă, câștiguri ușoare cu eliminarea listenerului unload