Ce sunt Core Web Vitals și ce legatura au cu SEO

Web Vitals sunt parametri standard pentru masurarea calitatii experientei de navigare a unui utilizator pe un site web. Printre acestea se numara trei numite „Core” considerate fundamentale de Google si consta in metrici si indicatori legati de viteza, timpul de raspuns si stabilitatea aspectului unui site web.

Acestia sunt cei trei factori principali:

1. LCP: Largest Contentful Paint – Viteza de incarcare
2. FID: First Input Delay – Interactivitatea paginii (interctivity)
3. CLS: Cumlative Layout Shift – Stabilitatea vizuala a incarcarii (visual stability)

Largest Contentful Paint (LCP)

Valoarea LCP indica timpul de redare al celui mai mare element (Largest) vizibil in ecran la incarcarea site-ului si masoara performanta incarcarii.

In detaliu poate fi intre:

• elemente de tip imagini <img>
• elemente de tip imagini <imagine> in interiorul elementelor de tip <svg>
• elemente de tip video <video>
• elemente de imagine de fundal incarcate prin legendara functie url() care sunt utilizate in interiorul CSS
• Un element la nivel de bloc care contine text sau alte elemente

Ceea ce conteaza este ceea ce apare in fereastra de deschidere a site-ului, in timp ce nu este luat in considerare tot ceea ce „below the fold”.

Aceasta masuratoare presupune ca cel mai mare obiect vizibil in fereastra este continutul principal si penalizeaza continutul intruziv, cum ar fi titluri foarte mari, imagini de deschidere uriase, videoclipuri, anunturi banner si ferestre pop-up. In urmatoarele doua exemple, cel mai mare element identificat sunt cele doua imagini principale.

Pentru a oferi o experienta buna pentru utilizator, site-urile ar trebui sa incarce continut „above the fold” in primele 2,5 secunde si sunt considerate lente deja peste 4 secunde.

Retineti ca nu se ia in considerare timpul de descarcare, ci cantitatea de spatiu pe care obiectul o foloseste in fereastra utilizatorului. Daca elementele sunt redate atat deasupra, cat si sub limita paginii, doar partea vizibila este considerata relevanta.

Acelasi lucru este valabil si pentru elementele de scara. O pictograma de 800×800 pixeli cand este redusa la 50×50 pixeli conteaza doar pentru 50 de pixeli. Daca mariti imaginile, doar dimensiunea imaginii originale este relevanta.

Prin urmare, ca regula generala, este important sa nu plasati „above the fold” videoclipuri sau imagini mai mari de 250 de pixeli latime. Imaginile de 300 de pixeli sau bannere publicitare de 336×280 sau 300×250 presupun deja o penalizare semnificativa.

First Input Delay (FID)

First Input Delay este timpul dintre prima interactiune a unui utilizator cu o pagina de pe site-ul dvs. (cum ar fi clic pe un link, un buton sau pe orice ascultator JavaScript) si cand browserul raspunde efectiv la acea interactiune. Masoara interactivitatea in functie de timpul necesar browserului pentru a raspunde la actiunea utilizatorului. Alte interactiuni, cum ar fi derularea si marirea, sunt actiuni continue si nu sunt luate in considerare.

Google ia in considerare doar primul input delay deoarece va fi semnalul initial pe care utilizatorul il va avea asupra capacitatii de raspuns a site-ului si va fi fundamental pentru modelarea impresiei generale de calitate si fiabilitate a navigatiei.

Pana in prezent, principalele probleme de interactivitate de pe un site web apar in timpul incarcarii paginii, deoarece codul este impartit in mai multe incarcari sau prea mult JavaScript este incarcat inainte de timp.

Pentru o experienta buna, utilizatorii ar trebui sa poata interactiona cu pagina in 100 de milisecunde.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift masoara deplasarea elementelor vizibile si modificarile de aspect care apar brusc si pe toata durata vizitei paginii provocand o schimbare dupa incarcarea zonei site-ului din cauza redimensionarii.

Calculul CLS este destul de complicat si este exprimat ca produsul a doua valori, componenta de impact si componenta de distanta folosind aceasta formula:

layout shift score = componenta de impact * componenta de distanta

Componenta de impact masoara spatiul normal ocupat de un element din fereastra si spatiul pe care il ocupa dupa miscarea acestuia. Unirea zonei vizibile a elementului inainte si dupa miscare determina procentul vederii totale si, prin urmare, componenta sa de impact.

Componenta distanta este cea mai mare distanta pe care un element instabil a parcurs-o in fereastra in timpul miscarii (orizontal sau vertical) impartita la cea mai mare dimensiune a ferestrei (latimea sau inaltimea, oricare dintre acestea este mai mare) si este intotdeauna masurata ca procent.

CLS este produsul acestor doua componente si pentru un UX bun ar trebui sa fie mai mic de 0,1.

Imaginea de mai sus arata un bloc de text – care ocupa jumatate din partea vizibila a ecranului – care se deplaseaza in jos cu 25% din inaltimea ferestrei. Dreptunghiul rosu indica unirea zonei vizibile a elementului inainte si dupa miscare, adica 50% + 25% = 75% din fereastra, deci componenta de impact este 0,75.

Si deoarece elementul instabil s-a deplasat cu 25% din inaltimea ferestrei, valoarea componentei distantei este de 0,25.

Pe baza formulei scrise mai sus, scorul CLS este egal cu 0,75 * 0,25 = 0,1875 care poate fi imbunatatit.