Vrei să îți optimizezi site-ul pentru o viteză de încărcare optimă și să treci testul Core Web Vitals? În acest articol îți vom arăta cum îmbunătățești metricul Cumulative Layout Shift (CLS) din cadrul Core Web Vitals.
Odata cu aparitia noilor metrici de performanta si UX, Google a introdus un mod foarte ingenios de testare a proprietatilor web: folosirea datelor in timp real.
Mai exact, Google foloseste date pastrate in cookie-urile salvate care monitorizeaza mai multe elemente precum pagini accesate, timpi de incarcare, procentul de incarcare si care sunt resursele cele mai greu de incarcat.
De asemenea, cookie-urile de tip cache salveaza bucati din pagina pentru a fi preincarcate la urmatoarea vizita. De aceea poate parea ca un site se incarca mai rapid cand este accesat a doua sau a treia oara.
Astfel ca, poate va intrebati ce este metricul CLS si ce face, cum este influentat de actiunile programatorilor sau cum poate fi imbunatatit pentru a obtine un scor de trecere in conformitate cu standardul de performanta Google.
Ce este CLS?
Cumulative Layout Shift (CLS) este un metric important care face parte din Core Web Vitals folosit pentru masurarea stabilitatii vizuale care ajuta la cuantificarea modului in care userii experimenteaza schimbari neasteptate de layout. O valoare mica a CLS-ului face ca experienta utilizatorului sa fie mai buna. Cumulative Layout Shift masoara modificarile de format suferite de o pagina dupa afisarea initiala in browser, de obicei din cauza insertiilor dinamice de continut care apar peste ceea ce este deja afisat.
Pe scurt, CLS reprezinta cat de mult o pagina sufera modificari la nivel de continut si cata fractionare exista pentru o anumita pagina. Mai exact, pentru a intelege pe deplin ce este CLS voi folosi un exemplu din viata reala.
Intri pe Iinternet cu intentia de a citi un articol despre un topic de interes pentru tine. Accesezi Google, cauti folosind cuvinte cheie si gasesti articolul dorit. Dai click pe el si incepi sa citesti, iar dupa un minut sau doua in care deja probabil ai ajuns la 1/3 din articol, pagina accesata termina de incarcat absolut toate resursele si imaginile, moment in care tu ca utilizator vei avea neplacuta experienta de a pierde sirul deoarece continutul afisat in pagina a fost fractionat de alte elemente si a fost mutat conform alinierii in pagina prestabilita de catre dezvoltator.
Mai exact, textul si diverse elemente vizuale cu o marime mai mica, s-au incarcat mai repede, iar imaginile sau anunturile foto/video nu, urmand ca dupa incarcarea din server sa fie afisate in locurile destinate lor. Astfel textul si restul elementelor vor fi “mutate” pentru a face loc acestor elemente mai mari. Si astfel se produce fractionarea despre care vorbeam.
Google spune urmatoarele despre CLS:
”Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”
Cum afecteaza CLS experienta utilizatorilor?
Atunci cand o pagina are probleme legate de CLS, vor exista intreruperi si fractionari constante pana cand pagina va fi incarcata complet. Acest aspect este deranjant pentru utlizatori si se reflecta in statisticile de folosire a site-ului.
Schimbarile neasteptate de afisare in pagina afecteaza experienta utilizatorilor. Un alt exemplu bun este urmatorul: tu doresti sa faci click pe un buton, iar pagina incarca o bucata de continut inserata dinamic. Aceasta “mica inserare” poate cauza o problema serioasa daca doresti sa dai click pe butonul NU, dar ajungi sa dai click pe butonul DA. Exemplul acesta este folosit si in urmatorul demo de la Google:
Insa nu toate “layout shift”-urile sunt negative, ci doar acelea care nu sunt asteptate de catre utilizator sa se intample. Spre exemplu, exista layout shifts bune precum click-ul pe un buton si aparitia unui video sau tastarea intr-o casuta de cautare si aparitia unor sugestii. In concluzie, layout shift-urile trebuie sa se intample in imediata realizare a unei actiuni de catre utilizator si in relatie clara cu actiunea dorita.
Cum este masurat CLS?
CLS este masurat in timp real si este contorizat dupa calcularea scorurilor de modificari de continut pentru fiecare layout shift neasteptat care se petrece in intreaga durata de viata a unei pagini web.
Pentru a calcula un scor de modificare al layout-ului, Google inmulteste fractia de impact cu fractia de distanta.
Fractia de impact reprezinta cat de mult din zona de viewport ocupa un element instabil intre doua cadre.
In exemplul Google, putem observa faptul ca elementul de text ocupa 50% din spatiul de viewport original, dar este “mutat” in jos cu 25%. Intre cele doua cadre, elementul ocupa 50% plus 25% din viewport rezultand o fractie de impact de 75%.
Exemplu de layout shift – Google Developers
Fractia de distanta in acest caz este distanta pe care a suferit-o elementul instabil. In exemplul folosit, elementul a fost mutat cu 25% din “height” sau inaltimea viewport-ului.
Rezumand, Cumulative Layout Shift este masurat folosind un scor care este calculat astfel:
Fractia de impact x Fractia de distanta = Layout Shift Score
Folosind acelasi exemplu ca mai sus, calculul ar arata astfel: 0.75 x 0.25 = 0.1875
Google a setat standardul de scor CLS pentru toate paginile la mai putin de 0.1 pentru toate paginile unui site. Concluzionam ca scorul obtinut din exemplul de mai sus este peste limita impusa de Google si ar rezulta intr-un scor slab.
Similar acestui calcul, Google face zeci de calcule pentru fiecare layout shift neasteptat care apare pe intreaga durata de viata a unei pagini web. Deci cu cat vei avea mai multe elemente care modifica continutul in cadrul viewport-ului, cu atat mai slab va fi scorul obtinut.
Ce impact are CLS asupra strategiei de SEO?
Esenta Core Web Vitals este de a asigura o experienta placuta si neintrerupta pe o pagina web pentru vizitatorii proprietatii tale web – atat pe mobil cat si pe desktop.
Un scor bun de CLS poate ajuta in a asigura Google ca utilizatorii vor avea o experienta placuta si ca nu vor fi frustrati atunci cand iti viziteaza pagina, ca nu vor avea momente cand site-ul le va juca feste si sa fie dusi intr-o alta pagina fata de cea dorita initial sau ca nu vor face o comanda din greseala.
O experienta buna a utilizarii (UX) te ajuta prin obtinerea tuturor asteptarilor dorite de la SEO: trafic, conversii, pozitii principale in Google si nu in ultimul rand, venituri.
Conform acestui studiu realizat de catre Screaming Frog, URL-urile cu pozitia #1 in Google aveau cu 10% mai multe sanse sa obtina calificativ PASS pentru analizele de Core Web Vitals fata de URL-urile din pozitia #9. Desigur, acest studiu se refera la pagini web deja existente, care poate nu au actualizat inca site-ul sa fie conform cu standardele Core Web Vitals.
Daca ne uitam la rezultatele pentru CLS din research-ul celor de la Screaming Frog, observam ca mai putin de jumatate (46% din link-urile de mobil si 47% pentru desktop) au un scor “GOOD” pentru metricul de CLS. Conform calculelor realizate de acestia, media de scor pentru CLS este 0.29 pentru mobil si 0.25 pentru desktop, deci exista loc pentru imbunatatiri pana in 2021 cand Google va integra si va acorda mai multa importanta Core Web Vitals.
Din tabelul realizat de acestia, observam clar faptul ca primele pozitii sunt dominate de site-uri cu scoruri pozitive pentru metricele de CWV, in special CLS pentru acest exemplu.
Cum imbunatatim scorul CLS?
Pentru a optimiza scorul CLS, Google recomanda realizarea unui test folosind instrumentele Page Speed Insights sau Lighthouse, ambele tool-uri avand acelasi modul de testare a paginii pentru indexare.
De asemenea poti folosi si alte tool-uri precum:
– Chrome User Experience Report
– Search Console (Core Web Vitals report)
– Unele tool-uri pot fi gasite pe Web.Dev
Cauze comune ale schimbarilor de format si layout sunt:
– Imagini fara dimensiuni
– Anunturi, videoclipuri si alte obiecte incorporate sau iframe-uri fara dimensiuni
– Continut injectat dinamic
– CSS cu incarcare tarzie unde stilurile se aplica dupa incărcarea altor elemente
– Fonturi Web care cauzeaza flash-uri de text invizibil sau nestilizat
– Elemente din pagina care asteapta incarcarea altor elemente in retea inainte de a aparea
Principii de baza ce ajuta la imbunatatirea CLS :
Cel mai mare inamic pentru CLS este codul JS care se incarca dupa ce se incarca pagina cu continut (LCP).
Alte probleme care impacteaza CLS sunt:
- Imaginile fara dimensiuni specificate , ad-uri , video-uri si iframeuri fara dimensiuni
- CSS care se incarca prea tarziu: asta se intampla cand se aplica CSS pe continut deja incarcat (de ex fundal de imagine sau iconite font etc)
- Font-uri web care produc diferente intre textul normal si cel stilizat
- Alte elemente de cod care asteapta alti itemi sa fie incarcati inainte sa se afiseze , astfel creeand o diferenta de fractie intre pagina incarcata deja si pagina fully loaded
- Utilizati intotdeauna atribute de dimensiune pentru imagini, videoclipuri si alte elemente incorporate sau iframe-uri. Daca un element este incarcat dinamic, utilizati CSS pentru a stila orice elemente container la aceeasi dimensiune sau raport de aspect inainte ca continutul sa fie incarcat. Apoi, atunci cand continutul este incarcat in aceste elemente container, pagina nu se va schimba.
- Nu inserati niciodata continut dinamic deasupra continutului existent.
- Daca utilizati CSS pentru a anima elemente, folositi animatiile „transforma”.
Concluzii
In final, as vrea sa iti amintesc ca Google foloseste Core Web Vitals pentru a masura experienta utilizatorilor pe site si a determina care proprietati web sunt cele mai potrivite pentru a fi afisate pe primele locuri in Google.
CLS este un metric absolut necesar deoarece, cel putin din experienta mea, era deja prea multa agresivitate in continutul injectat dinamic in pagini, iar dupa 2 sau 3 fractiuni, deja era imposibil sa citesti informatia pentru care s-a accesat pagina.
Incepand cu anul 2021 sunt pregatit sa vad din ce in ce mai putine site-uri cu intentii negative asupra utilizatori care folosesc zeci de bannere pe pagini si folosesc tehnici de advertising “indoielnice” pentru a obtine click-uri.
Recomandarea mea este sa iti optimizezi site-ul pentru performanta si experienta de navigare si vei culege roadele muncii in termeni de trafic si conversii in primii ani de functionare. De asemenea, iti recomand sa stai “la curent” cu noutatile standard recomandate de catre Google, este printre cele mai bune metode de a fi cu un pas inaintea competitorilor.
Daca vrei sa afli mai multe despre detaliile de functionare de baza ale Core Web Vitals iti recomand sa citesti si celelalte articole din serie: