Cumulative Layout Shift (CLS): Ce este și cum să vă optimizați site-ul pentru aceasta

Imaginați-vă acest lucru: încărcați un site web și pare gata să funcționeze. Faceți clic pe o imagine prezentată pe blog pentru a citi articolul și dintr-o dată întreaga pagină se schimbă, deoarece altceva tocmai s-a încărcat. Și faceți clic pe ceva complet diferit și încărcați o pagină pe care nu ați intenționat-o niciodată. Dacă ați întâmpinat această problemă dvs., știți cum Cumulative Layout Shift (CLS) poate avea un impact negativ asupra experienței utilizatorului (UX) a unui site.

Schimbarea aspectului cumulativ este termenul pentru cât de mult se schimbă aspectul unei pagini în timp ce se încarcă, iar în acest articol vom săpa mai mult în ceea ce înseamnă. Vă vom arăta cum să măsurați CLS și vă vom explica ce este un scor bun. Apoi vom discuta despre cum să optimizați scorul CLS al site-ului dvs. web. Sa trecem la treaba!

Abonați-vă la canalul nostru Youtube

Ce este Cumulative Layout Shift (CLS)?

Nu există o modalitate mai bună de a ilustra ce reprezintă un scor CLS ridicat (adică ceva peste 0,10 din Google's PageSpeed ​​Insights) decât cu un exemplu vizual. Iată un site web cu un aspect care continuă să se schimbe pe măsură ce pagina se încarcă. Rețineți că nu derulăm deloc atunci când capturați acest lucru. Vizualizarea noastră rămâne aceeași, dar pagina se schimbă drastic singură:

În calitate de utilizator care vizitează acest site, este posibil să nu fiți sigur când s-a terminat încărcarea. Puteți încerca să faceți clic pe o știre, doar pentru ca aspectul să se schimbe drastic. Drept urmare, ajungeți pe pagina greșită și trebuie să pierdeți timpul întorcându-vă. În funcție de pagină, acest lucru se poate întâmpla de mai multe ori. În caz contrar, există o probabilitate bună să plecați.

La fel și utilizatorii dvs.

Cu cât este mai complex un site web, cu atât este mai probabil să ai un scor CLS ridicat. Cu aspectele simple, cum ar fi iconica pagină de pornire Google, nu există CLS, deoarece includ atât de puține elemente:

Asta nu înseamnă că toate site-urile web complexe au scoruri CLS ridicate. Luați în considerare Amazon, de exemplu. Nimeni nu ar spune că gigantul de comerț electronic folosește un design web simplu. Cu toate acestea, nu există prea puține schimbări de aspect în timpul navigării în catalog.

Schimbările de aspect se întâmplă deoarece browserele tind să încarce elemente de pagină în mod asincron. Mai important, ar putea exista elemente media pe pagina dvs. cu dimensiuni inițial necunoscute. Această combinație înseamnă că browserul nu știe cât spațiu vor ocupa elementele individuale până când nu se termină încărcarea. De aici și schimbarea drastică a aspectului.

CLS este interesant prin faptul că poate fi măsurat în mod obiectiv folosind diverse instrumente, dar este, de asemenea, centrat pe utilizator prin faptul că dispozitivul fiecărui utilizator poate afecta modul în care aspectul site-ului dvs. se poate schimba. Deși nu puteți controla acest aspect, puteți lua cu siguranță măsuri de precauție, astfel încât acesta să aibă cel mai mic impact posibil.

CLS este unul dintre cele trei elemente vitale web pe care Google le măsoară pentru a-l determina dacă site-ul dvs. web oferă o experiență de utilizare puternică (UX). Celelalte elemente vitale de bază web sunt First Input Delay (FID) și Largest Contentful Paint (LCP), care merită cu siguranță orice efort pe care îl cheltuiți optimizând.

Cum se măsoară CLS

A afla dacă site-ul dvs. web prezintă schimbări de aspect marcate este relativ simplu. În primul rând, vă recomandăm să încercați să accesați site-ul dvs. web dintr-o varietate de dispozitive și să cereți altora să facă același lucru. Pe măsură ce faceți, puteți observa dacă aspectul rămâne consistent în timp ce paginile se încarcă.

Ceea ce veți găsi probabil este că experiența CLS poate varia foarte mult. Depinde nu numai de cât de optimizat este site-ul dvs., ci și de dispozitivul pe care îl utilizați. Având în vedere acest lucru, cel mai bun instrument pentru măsurarea CLS-ului site-ului dvs. web este PageSpeed ​​Insights. Acest lucru se leagă direct de Core Web Vitals de la Google, astfel încât să puteți vedea direct modul în care scorul dvs. CLS afectează modul în care Google vă vede site-ul.

Acest serviciu vă permite să introduceți o adresă URL și să primiți un scor general de performanță pentru aceasta pe baza ultimelor 28 de zile de date colectate de Google. Scorul respectiv ia în considerare mai multe valori, inclusiv CLS, FCP și LCP.

Pentru acest test, am ales un site web fără CLS perceptibil. PageSpeed ​​Insights ne-a confirmat suspiciunile, deoarece a dat rezultate covârșitor de pozitive, cu un scor CLS puternic.

Observați că PageSpeed ​​Insights oferă o defalcare procentuală pentru fiecare scor. În acest caz, 91% dintre utilizatori au experimentat o schimbare a aspectului zero în timpul încărcării site-ului web de testare. Cu toate acestea, vizitatorii rămași au experimentat un anumit nivel de schimbare a aspectului.

Acest lucru este de așteptat atunci când vine vorba de CLS și restul Core Web Vitals. Experiența utilizatorului va varia drastic în funcție de dispozitivul pe care îl accesează, de conexiunea la internet și de mulți alți factori. Nu există practic nicio modalitate de a explica niciun utilizator care să nu experimenteze vreodată CLS, dar puteți lua cu siguranță măsuri de precauție pentru a-l optimiza, astfel încât procentul să fie cât mai mic posibil.

În plus față de datele de câmp, PageSpeed ​​Insights oferă, de asemenea, ceea ce numește date de laborator . Acestea sunt scoruri de performanță bazate pe un singur test, în loc de date colectate pe o perioadă lungă de timp (care este considerată date de câmp ).

La testul nostru am primit un scor CLS de zero, ceea ce înseamnă că nu a existat nicio schimbare de aspect. Pentru acest test special. Acum să comparăm acest lucru cu un alt site web care nu a obținut un scor CLS atât de puternic.

Pentru a respecta standardele Google, scorul dvs. CLS ar trebui să fie sub 0,10. Orice lucru de mai sus înseamnă că există schimbări semnificative, vizibile în aspect, ceea ce duce la o experiență slabă a utilizatorului.

Cum se identifică cauzele care modifică aspectul

Dacă doriți să identificați ce elemente cauzează schimbări de aspect pe site-ul dvs. web, puteți face acest lucru folosind instrumentele Chrome Dev. Dacă deschideți instrumentele (CTRL-SHIFT-I) și treceți la fila Performanță , veți putea înregistra teste de performanță în timp ce navigați pe web.

După ce opriți înregistrarea, Chrome Dev Tools va returna o cronologie care afișează timpii de încărcare, solicitările individuale și elementele vitale de bază. Din această cronologie puteți selecta evenimente individuale Schimbare aspect care sunt listate în Experiență . În acest fel, puteți vedea cu ce elemente corespund.

După ce știți ce elemente cauzează schimbări de aspect, puteți lua măsuri pentru a remedia problema. Vom vorbi despre asta în secțiunea următoare.

Dacă doriți să monitorizați elementele Web Vitals de bază ale site-ului dvs., vă recomandăm să configurați un cont Google Search Console. Veți putea monitoriza valorile de performanță și Core Web Vitals din Search Console, care este un avantaj atunci când vine vorba de optimizarea motorului de căutare (SEO). Considerăm că este în interesul dumneavoastră să monitorizați regulat Search Console, indiferent, dar nu este niciodată rău să aveți o anumită valoare pe care o urmăriți.

Cum să vă optimizați scorul CLS

În general, există doi mari vinovați când vine vorba de scoruri CLS mari: fișiere media și reclame. De exemplu, dacă încărcați un fișier imagine cu o rezoluție masivă, dar nu specificați înălțimea și lățimea acestuia, este posibil să rupă aspectul paginii.

În ceea ce privește performanța site-ului web, cel mai bine este să folosiți imagini care au deja dimensiunile precise pe care le veți afișa. În acest fel, browserul nu trebuie să cheltuiască puterea de procesare (și timpul) pentru a le redimensiona corespunzător. Cu toate acestea, acest lucru nu este întotdeauna posibil. Atunci când nu este, ar trebui să setați atributele de lățime și înălțime pentru fiecare imagine afișată. În acest fel, browserul utilizatorului va ști exact unde se potrivește imaginea și nu va trebui să schimbe aspectul în ultima secundă posibilă.

Iată cum arată aceste atribute în HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Dacă utilizați WordPress, unele pluginuri de optimizare a imaginii pot redimensiona automat fișierele pe măsură ce le încărcați, ceea ce se ocupă de setarea atributelor de lățime și înălțime necesare.

Când vine vorba de imagini receptive, vă puteți baza pe CSS în loc să declarați manual lățimea și înălțimea. CSS vă permite să utilizați atributul de lățime maximă pentru a spune browserelor ce procent din portul de vizualizare ar trebui să ia imaginea:

img {
max-width: 90vw;
height: auto;
}

În acest exemplu, îi spunem browserului să redimensioneze imaginea, astfel încât să ocupe 90% din vizualizarea utilizatorului. În același timp, setăm atributul înălțime la automat , astfel încât browserul să calculeze înălțimea ideală pe baza lățimii noi a imaginii și a raportului său de aspect.

Aceleași elemente fundamentale se aplică anunțurilor ca și imaginilor. De obicei, veți lucra cu iframe, iar uneori rețelele publicitare vor folosi elemente de dimensiuni dinamice. Acest lucru poate face ravagii cu aspectul paginilor dvs.

În loc să lăsați rețelele publicitare să decidă cât de mari ar trebui să fie anunțurile pe site-ul dvs. web, puteți rezerva zone pentru acestea. Aceasta înseamnă declararea atributelor de lățime și înălțime pentru zonele publicitare și setarea de rezervă în cazul în care acestea nu se încarcă, astfel încât spațiul gol nu provoacă o schimbare a aspectului.

Puteți utiliza același tip de CSS și stil în linie pentru orice container publicitar pe care îl doriți, menținându-l blocat în poziție, indiferent de ce anunțuri sunt difuzate.

Întrebări frecvente despre schimbarea aspectului cumulativ (CLS)

CLS poate fi puțin mai complicat de înțeles decât valorile LCP și FCP. Având în vedere acest lucru, haideți să trecem în revistă câteva întrebări obișnuite pe care utilizatorii le au despre CLS, pentru a ne asigura că nu vă lipsesc nicio informație cheie.

Cum afectează CLS performanța site-ului meu web?

În teorie, puteți avea un site web foarte rapid, care obține în continuare un scor CLS relativ slab. Ca și în cazul altor elemente vitale web, scorurile CLS s-ar putea să nu se coreleze direct cu performanța generală a site-ului. Este posibil ca site-ul dvs. să ardă rapid, dar pe măsură ce se încarcă, se desfășoară ca un acordeon. Chiar și atunci, schimbările mari de aspect au cu siguranță un impact negativ asupra UX-ului site-ului. Google consideră acest lucru incredibil de important. Acesta este motivul pentru care Google evaluează atât de mult acest punct de date.

CLS este mai puțin important decât scorurile FCP sau LCP?

Mulți utilizatori acordă mai multă atenție scorurilor FCP și LCP decât CLS. Acest lucru se datorează faptului că aceste două valori sunt mai ușor de corelat cu performanța site-ului web. Chiar dacă FCP este în mod specific un indicator centrat pe utilizator, de asemenea, CLS este mai greu de măsurat în mod constant la un număr mare de utilizatori.

Toate cele trei valori alcătuiesc Google Core Web Vitals. Aceasta înseamnă că, dacă ignorați una dintre ele, riscați să plasați mai puțin rezultatele relevante ale căutării. Asigurarea faptului că site-ul dvs. este optimizat pentru un CLS scăzut nu are, în general, altceva decât un impact pozitiv asupra performanței site-ului, cum ar fi LCP și FCP. Dacă cea mai mare vopsea conținută este împinsă pe ecran imediat ce utilizatorul o vede, cât de util este timpul de încărcare rapid?

Ce este un scor CLS bun?

După cifre, Google consideră că orice sub 0.10 este un scor CLS bun. Cu toate acestea, dacă luați măsurile corespunzătoare, obținerea unui scor CLS de 0 nu este exclusă și este relativ obișnuită printre site-urile web bine optimizate. Rețineți, însă, chiar și site-urile care înregistrează în mod regulat 0 pot avea un procent ușor de utilizatori care experimentează schimbări. Acest lucru nu este controlat de dvs. și tot ce puteți face este să țineți cont de majoritatea utilizatorilor care au 0 CLS.

Concluzie

Există o mulțime de factori care oferă o ofertă UX puternică pe site-ul dvs. web. În mod ideal ar trebui să se încarce rapid. Ar trebui să fie ușor de interacționat cu. Nu ar trebui să schimbe poziția aspectului pe măsură ce apar elemente. Schimbările drastice de aspect duc la frustrare și la greșeli. Acestea duc la o rată de respingere mai mare. Ceea ce nu este bun pentru niciun site web.

CLS este unul dintre elementele vitale de bază pe care Google le folosește pentru a măsura UX-ul general al site-ului dvs. Și utilizatorii sunt motivul pentru care aveți un site web în primul rând. Experiența lor este prioritatea 1. Un scor redus CLS (sub 0,10) înseamnă că site-ul dvs. web ar trebui să se încarce fluid, iar fiecare aspect al aspectului său va apărea la locul potrivit de la început.

Aveți vreo întrebare despre CLS sau despre cum să o reduceți? Să vorbim despre ele în secțiunea de comentarii de mai jos!

Imagine prezentată prin intermediul fratelui mai mare / shutterstock.com