Schimbarea cumulativă a configurației (CLS)

Ce este deplasarea cumulativă a layout-ului (CLS)?

Cumulative Layout Shift (CLS) este o măsurătoare Core Web Vitals dezvoltată de Google pentru a măsura stabilitatea vizuală a unei pagini web. Aceasta cuantifică totalul tuturor schimbărilor neașteptate de aspect care au loc pe parcursul întregii durate de viață a paginii. Schimbările de dispunere au loc atunci când un element vizibil își schimbă poziția de la un cadru redat la altul.

Cum se măsoară CLS

Scorurile CLS variază de la 0, care nu reprezintă nicio schimbare, la valori peste 0, care indică grade diferite de instabilitate. Formula ia în considerare fracțiunea de impact și fracțiunea de distanță a fiecărei deplasări, calculând cât de mult se deplasează elementele și cât de mult acoperă acestea din fereastra de vizualizare.

Interpretarea scorului CLS

• Bun: 0 - 0.1
• Necesită îmbunătățiri: 0.1 - 0.25
• Slab: Peste 0,25

De ce este important CLS?

CLS este esențial pentru experiența utilizatorului, deoarece schimbările neașteptate de aspect pot duce la frustrare. De exemplu, dacă un utilizator este pe punctul de a face clic pe un buton și aspectul se schimbă, făcându-l să facă clic pe altceva în mod neintenționat, aceasta poate duce la o experiență slabă a utilizatorului și la o potențială pierdere de conversii.

Cauze comune ale unui CLS slab

1. Imagini fără dimensiuni:

   • Includerea imaginilor în HTML fără a specifica lățimea și înălțimea acestora poate cauza modificări de aspect, deoarece browserul nu știe cât spațiu să aloce inițial.

2. Anunțuri, inserții și iframe fără dimensiuni:

   • Aceste elemente se pot încărca în mod dinamic și pot provoca modificări ale aspectului dacă dimensiunile lor nu sunt specificate în prealabil.

3. Conținut injectat dinamic:

   • Adăugarea de conținut deasupra conținutului existent în DOM poate împinge elementele în jos, provocând deplasări.

4. Fonturi web care cauzează FOIT/FOUT:

   • Flash of Invisible Text (FOIT) și Flash of Unstyled Text (FOUT) pot provoca modificări ale aspectului pe măsură ce browserul încarcă fonturile web.

Cele mai bune practici pentru a minimiza CLS

1. Includeți atribute de mărime pe imagini și videoclipuri:

   • Definiți întotdeauna lățimea și înălțimea imaginilor și videoclipurilor în HTML pentru a rezerva spațiu în machetă înainte de a le încărca.

2. Rezervați spațiu pentru anunțuri și inserții:

   • Folosiți CSS pentru a seta dimensiunile pentru sloturile publicitare, iframe și embed-uri pentru a evita schimbarea aspectului la încărcare.

3. Evitați injectarea dinamică a conținutului deasupra conținutului existent:

   • Adăugați conținut nou sub pliu sau în containere care au deja un spațiu rezervat.

4. Utilizați strategii de încărcare a fonturilor:

   • Utilizați proprietatea CSS font-display pentru a controla modul în care sunt afișate fonturile web și pentru a minimiza modificările datorate FOIT/FOUT.

5. Utilizați CSS Transform pentru animații:

   • Folosiți proprietatea transform în loc de top, bottom, left sau right pentru a anima elementele fără a provoca modificări ale aspectului.

Concluzie

Cumulative Layout Shift (CLS) este o măsură vitală pentru a asigura o experiență de utilizare stabilă și atractivă din punct de vedere vizual. Înțelegând factorii care contribuie la schimbările de aspect și implementând cele mai bune practici pentru a le reduce la minimum, puteți îmbunătăți scorul CLS al paginii dvs. web și spori satisfacția generală a utilizatorilor.

Pentru mai multe informații despre îmbunătățirea CLS și a altor Vitalii Web de bază, consultați documentația Google privind Vitalii Web.