Cumulative Layout Shift

Ce măsoară CLS

Cumulative Layout Shift măsoară instabilitatea vizuală întâlnită de utilizatori. O deplasare de layout apare când un element vizibil își schimbă poziția în mod neașteptat. De exemplu, textul poate coborî după încărcarea unei imagini, iar un buton poate fi mutat exact când utilizatorul încearcă să îl selecteze.

Scorul CLS nu este exprimat în secunde sau milisecunde. Este o valoare fără unitate, calculată în funcție de cât conținut vizibil s-a deplasat și de distanța parcursă de elementele afectate. Pentru o experiență bună, web.dev recomandă un CLS de 0,1 sau mai mic pentru cel puțin 75% dintre vizitele paginii. Valorile mai mari de 0,25 sunt considerate slabe.

Cauze frecvente

Printre cauzele comune se află imaginile, elementele video, reclamele, embedurile și iframe-urile fără dimensiuni definite. Browserul nu poate rezerva corect spațiul înainte ca aceste resurse să fie încărcate. Conținutul introdus dinamic și fonturile web pot produce, de asemenea, deplasări.

CLS poate apărea atât la încărcarea inițială, cât și după încărcare. Deplasările ulterioare pot fi provocate de conținut încărcat în timpul derulării sau de tranziții care durează prea mult după o interacțiune. Anumite schimbări produse ca răspuns la o acțiune a utilizatorului sunt excluse din scor dacă apar în intervalul acceptat de definiția metricii.

Date reale și teste de laborator

Datele CrUX reflectă experiențele utilizatorilor pe întreaga durată de viață a paginii. Lighthouse efectuează, în mod obișnuit, un test de încărcare și poate să nu surprindă toate deplasările ulterioare. De aceea, valorile din teren și cele de laborator pot fi diferite. PageSpeed Insights le prezintă separat, iar Chrome DevTools poate evidenția elementele deplasate și posibilele cauze.

CLS face parte din Core Web Vitals, alături de metricile pentru încărcare și interactivitate. Google Search Central recomandă obținerea unor valori bune pentru succesul în Search și pentru o experiență bună a utilizatorilor. Core Web Vitals se aliniază, împreună cu alte aspecte ale experienței paginii, cu ceea ce sistemele principale de clasare Google urmăresc să recompenseze.

Un CLS slab poate face conținutul dificil de urmărit. Utilizatorul își poate pierde poziția într-un articol sau poate apăsa alt element după mutarea unui buton. Optimizarea trebuie privită ca parte a SEO tehnic și a calității paginii, nu ca o garanție izolată de clasare.

Extrasele furnizate nu stabilesc CLS drept criteriu direct pentru includerea sau citarea în răspunsuri generate de sisteme bazate pe AI. AEO și GEO sunt termeni de industrie, nu funcții Google. Într-o strategie descrisă prin acești termeni, CLS poate fi tratat ca o componentă tehnică a experienței paginii, fără a înlocui relevanța și calitatea conținutului.

Un magazin online românesc afișează pagina unui produs. Fotografia principală nu are dimensiuni declarate. Browserul afișează inițial titlul și butonul „Adaugă în coș” mai sus, apoi încarcă fotografia și împinge elementele în jos. Această mutare neașteptată contribuie la CLS.

O soluție este declararea dimensiunilor imaginii, astfel încât browserul să poată rezerva spațiul înainte de descărcare:

<img
  src="/imagini/produs.webp"
  alt="Produs fabricat în România"
  width="800"
  height="600"
>

Același principiu se aplică elementelor video, reclamelor, embedurilor și iframe-urilor: spațiul necesar trebuie rezervat înainte ca elementul să fie afișat complet.

1. Deschide URL-ul în PageSpeed Insights.
2. Verifică secțiunea cu experiența utilizatorilor reali. Confirmă dacă datele afișate sunt la nivel de URL sau la nivel de origine.
3. Compară CLS din datele CrUX cu valoarea de laborator. O diferență poate indica deplasări produse după încărcarea inițială.
4. Rulează o înregistrare în panoul Performance din Chrome DevTools. Consultă pista „Layout Shifts” și selectează marcajele pentru a vedea elementele deplasate.
5. Interacționează cu pagina în vizualizarea de metrici live. Derulează, deschide meniuri și urmărește încărcarea conținutului dinamic.
6. Verifică raportul Core Web Vitals din Google Search Console pentru a vedea cum performează paginile.
7. Pentru monitorizare proprie în teren, folosește biblioteca JavaScript web-vitals și funcția onCLS. Datele colectate prin API-uri publice pot diferi de CrUX.

• Definește atributele width și height pentru imagini și elemente video.
• Rezervă spațiu pentru reclame, embeduri, iframe-uri și conținut încărcat dinamic.
• Verifică fonturile web și modul în care încărcarea lor afectează poziția textului.
• Testează deplasările atât la încărcare, cât și în timpul derulării și al interacțiunilor.
• Folosește date reale pentru prioritizare și Chrome DevTools pentru identificarea cauzei tehnice.
• Verifică elementul care a provocat deplasarea, nu doar elementele mutate și raportate de instrument.