Am acoperit cele trei semnale web esentiale in articolul nostru anterior despre Google Core Web Vitals. Cu toate acestea, nu putem vorbi despre Core Web Vitals fara sa aprofundam un factor cheie: CLS, cunoscut si sub numele de Cumulative Layout Shift.
In acest ghid, vom analiza ce este LCP, de ce este important, beneficiile sale si ce imbunatatiri puteti aduce pentru a va optimiza site-ul.
SEO-UX integreaza experienta utilizatorului cu SEO, este o adevarata revolutie pentru activitatile de optimizare pentru motoarele de cautare!
Algoritmul Google va tine cont de:
- Largest Contentful Paint (LCP), care va permite sa masurati performanta de incarcare a celui mai mare element vizibil din pagina, de indata ce un utilizator ajunge pe acesta;
- First Input Delay ( FID ), care masoara timpul dintre prima data cand un utilizator interactioneaza cu o pagina si momentul in care browserul este capabil sa raspunda efectiv;
- Cumulative Layout Shift (CLS) care masoara stabilitatea vizuala a unei pagini.
Sa analizam impreuna Cumulative Layout Shift (CLS): cum este posibil sa o optimizam pentru a face site-ul nostru mai performant si pentru a garanta o user experience pozitiva.
Continut
Ce este Cumulative Layout Shift (CLS)
Cumulative Layout Shift masoara stabilitatea vizuala : detecteaza toate miscarile (si modificarile ulterioare) ale structurii grafice a unei pagini web in timpul incarcarii si in timpul interactionaii cu aceasta.
Dupa cum a raportat web.dev, un site dedicat webmasterilor, CLS pentru Google este:
„O metrica axata pe experienta utilizatorului, care este foarte importanta deoarece ajuta la cuantificarea frecventei cu care vizitatorii experimenteaza schimbari neasteptate de aspect: un CLS scazut garanteaza o user experience pozitiva”.
Pentru a intelege concret despre ce vorbim, ganditi-va la cat de enervant este sa doriti sa dati clic pe un continut sau un link dintr-o pagina si sa vedeti ca se misca de mai multe ori. Acest lucru se datoreaza faptului ca este instabil si continua sa pluteasca in fereastra de vizualizare in timpul incarcarii.
Google clarifica ca nu toate modificarile de aspect trebuie considerate negative: „nu sunt pozitive decat daca utilizatorul nu se asteapta la ele. Cele care apar ca raspuns la interactiunile utilizatorului (facand clic pe un link, apasand un buton, tastand intr-o caseta de cautare si altele asemenea) sunt de obicei bune, atata timp cat mutarea are loc rapid si secvential”.
Cum se calculeaza scorul CLS
Pentru a oferi o experienta buna pentru utilizator, site-urile ar trebui sa urmareasca sa aiba un scor CLS mai mic de 0,1.
In timp ce pentru celelalte doua Core Web Vitals, unitatea de masura de referinta este timpul, pentru CLS este spatiul. Cel stabilit de Google este un scor specific care identifica nivelul variatiilor de aspect in timpul incarcarii paginii, ceea ce poate compromite experienta utilizatorului.
Pentru a calcula scorul CLS, Google inmulteste doua masuri ale acelei miscari: fractiunea de impact si fractiunea de distanta, care analizeaza procentul din ecranul browserului afectat de modificarile aspectului.
Fractiunea de impact
Fractiunea de impact ia in considerare aria ecranului browserului afectata de modificarile aspectului : masoara cat de mult afecteaza elementele instabile spatiul ferestrei dintre doua cadre, de la pozitia in care se afla la prima vizualizare pana la locul in care vor fi vazute dupa ce pagina va fi redata.
Zonele vizibile combinate ale tuturor elementelor instabile pentru cadrele anterioare si actuale, ca o parte din suprafata totala a ferestrei de vizualizare, constituie fractiunea de impact pentru cadrul curent.
Exemplu de variatie de aspect intre doua cadre, sursa: Google Developers
Dupa cum puteti vedea din exemplu, un element ocupa 50% din fereastra intr-un cadru si se misca in jos cu 25% in urmatorul. Partea punctata rosie indica unirea zonei vizibile a elementului in cele doua cadre care, in acest caz, ocupa 75% din spatiul total: fractia de impact este de 0,75.
Fractiunea de distanta
A doua masura importanta pentru scorul CLS este cat de departe (vertical sau orizontal) parcurg elementele instabile din fereastra de vizualizare.
Se calculeaza impartind cea mai mare distanta pe care un element instabil, deplasat in fereastra, a parcurs-o la cea mai mare dimensiune a casetei (latime sau inaltime).
Exemplu de distanta diferita in fereastra de vizualizare, sursa: Google Developers
Exemplul arata bine ca cea mai mare dimensiune a ferestrei este inaltimea si elementul instabil s-a deplasat cu 25%: fractiunea de distanta este 0,25.
Calculati scorul
Odata ce cele doua fractiuni pe care Google le ia in considerare sunt intelese, CLS reiese din urmatorul calcul:
fractiune de impact × fractiune de distanta = scor CLS
Tinand cont de valorile rezultate din exemplele anterioare, calculul se face usor:
0,75 × 0,25 = 0,1875
Impactul CLS asupra SEO
Un scor scazut va ajuta sa va asigurati ca UX-ul este bun pe mobil si desktop si ca utilizatorii nu sunt frustrati atunci cand va navigheaza site-ul, nu sunt dusi la o alta pagina sau, si mai rau, nu au efectuat din greseala o achizitie.
Un UX ingrijit, ne ajuta sa atingem toate obiectivele pe care ni le-am propus in SEO : clasament, trafic, conversii.
Cum puteti masura CLS
CLS poate fi masurat cu patru instrumente:
- Raport despre experienta utilizatorului Chrome;
- PageSpeed Insights;
- Google Search Console (cu raportul Core Web Vitals);
- Biblioteca JavaScript de Web-vitals.
Apoi masuratorile pot fi facute in laborator cu:
- Chrome DevTools;
- Lighthouse;
- WebPageTest.
Principalele cauze a unui CLS scazut
Principalele cauze ale unui scor CLS scazut se gasesc in utilizarea:
- imagini sau videoclipuri cu o dimensiune incorect setata sau necunoscuta;
- reclame, continut incorporat sau cadre iframe fara dimensiuni;
- continut injectat dinamic;
- fonturi web care ascund textul pana la descarcarea completa (FOIT) sau folosesc caractere alternative care genereaza alunecare (FOUT);
- Elemente de pagina care asteapta raspunsuri din retea inainte de a aparea.
Prin urmare, este esential sa punem in practica tehnici si strategii valide adecvate pentru minimizarea dificultatilor pentru utilizator.
Tehnici pentru imbunatatirea scorului CLS
Cele mai bune practici de adoptat pentru a avea un scor CLS scazut includ:
- Plasati intotdeauna atributele de dimensiune in imagini, videoclipuri, cadre iframe si continut incorporat. Daca un element se incarca dinamic, rezervati spatiul necesar cu casete CSS. In acest fel, browserul poate aloca spatiul corect in document la incarcarea continutului si pagina nu va aluneca;
- favorizati transformarea animatiilor in animatii de proprietate care declanseaza modificari de aspect: aceasta schimbare va oferi context si continuitate de la o stare la alta;
- nu adaugati niciodata continut peste continutul existent, decat ca raspuns la o interactiune a utilizatorului.
CLS este o valoare considerata in mare parte de Google. Asigurarea ca site-ul dvs. are un scor scazut este esentiala pentru o experienta buna de utilizator si pentru a mentine o pozitionare eficienta.
Este necesara o expertiza tehnica considerabila pentru a o masura si imbunatati. Daca doriti sa va verificati scorul si aveti nevoie de asistenta in faza de optimizare, contactati o agentie SEO pentru a evalua cum sa procedati.
