Core Web Vitals pe înțeles: LCP, INP și CLS (și cum le îmbunătățești)

Core Web Vitals sunt trei indicatori pe care Google îi folosește ca să măsoare experiența reală pe o pagină: cât de repede se încarcă, cât de repede răspunde și cât de stabilă rămâne în timpul încărcării. Fac parte din semnalele de experiență pe pagină pe care Google le ia în calcul la clasare și – mai important – reflectă ce simt de fapt vizitatorii despre site-ul tău.

Cele trei Core Web Vitals

O pagină trece când cel puțin 75% din vizitele reale (percentila 75) ating pragul „bun” pentru toți cei trei indicatori.

INP a înlocuit First Input Delay (FID) ca Core Web Vital în martie 2024. INP este mai strict: ia în calcul capacitatea de răspuns la interacțiunile din toată vizita, nu doar la prima.

Date din teren vs date de laborator

Datele din teren provin de la utilizatori Chrome reali și sunt colectate în Chrome UX Report (CrUX) pe o fereastră mobilă de 28 de zile. Pe acestea le folosește Google pentru experiența pe pagină. Le poți vedea în raportul Core Web Vitals din Search Console și în PageSpeed Insights.

Datele de laborator provin dintr-un test simulat, precum Lighthouse, pe un dispozitiv și o rețea fixe. Sunt excelente pentru depanare și pentru testarea schimbărilor, dar nu sunt ce folosește Google la clasare – și nu pot măsura direct INP (Total Blocking Time este cel mai apropiat echivalent de laborator).

Paginile cu trafic mic pot să nu aibă suficiente date din teren; în acest caz, Google poate folosi date pentru pagini asemănătoare sau pentru tot site-ul („originea”).

Largest Contentful Paint (LCP)

LCP marchează momentul în care cea mai mare imagine sau cel mai mare bloc de text din zona vizibilă termină de redat – de obicei imaginea hero, un titlu mare sau imaginea de previzualizare a unui video recomandat.

LCP poate fi împărțit în patru părți, care indică remedierea:

1. Time to First Byte – cât îi ia serverului să răspundă
2. Întârzierea încărcării resursei – cât trece până când browserul începe să descarce resursa LCP
3. Durata încărcării resursei – cât durează descărcarea
4. Întârzierea redării elementului – timpul dintre descărcare și redare

Cum îmbunătățești LCP

• Accelerează serverul: cache de pagini, un CDN, găzduire mai rapidă și mai puține interogări în baza de date
• Fă imaginea LCP descoperibilă devreme: folosește un <img> obișnuit în HTML (nu un fundal CSS sau o imagine inserată prin JavaScript) și adaugă fetchpriority="high"
• Nu încărca niciodată leneș imaginea LCP
• Optimizează imaginea: dimensiuni potrivite, WebP sau AVIF, compresie bună
• Redu resursele care blochează redarea: pune CSS-ul critic inline, amână JavaScriptul necritic
• Preconectează-te la originile terțe necesare, cum ar fi un CDN de imagini

Interaction to Next Paint (INP)

INP măsoară întârzierea dintre o interacțiune a utilizatorului – un clic, o atingere sau apăsarea unei taste – și următoarea actualizare vizuală de pe ecran. Raportează una dintre cele mai lente interacțiuni din timpul vizitei.

Un INP slab vine de obicei din prea mult JavaScript rulat pe firul principal, astfel încât browserul nu poate răspunde repede.

Cum îmbunătățești INP

• Redu și împarte JavaScriptul: elimină bibliotecile nefolosite, împarte codul și încarcă funcțiile doar când e nevoie
• Sparge sarcinile lungi: sarcinile de peste 50 ms blochează firul principal; cedează controlul browserului între bucățile de lucru
• Auditează scripturile terțe: managerii de etichete, widgeturile de chat, instrumentele de testare A/B și scripturile de reclame sunt vinovați frecvenți
• Păstrează DOM-ul suplu: paginile foarte mari fac fiecare actualizare mai lentă
• Oferă feedback vizual imediat la interacțiune, apoi fă munca grea după aceea

Cumulative Layout Shift (CLS)

CLS măsoară mișcările neașteptate ale aspectului – experiența frustrantă a unui buton care fuge exact când vrei să-l atingi. Punctează cât conținut se mișcă și cât de departe.

Cum îmbunătățești CLS

• Setează width și height pe imagini și video sau folosește CSS aspect-ratio, ca spațiul să fie rezervat
• Rezervă spațiu pentru reclame, încorporări și iframe-uri cu containere de dimensiune fixă
• Evită inserarea de conținut deasupra conținutului existent, cum ar fi bannerele care împing pagina în jos după încărcare
• Folosește font-display: swap cu atenție și preîncarcă fonturile web cheie sau folosește metrici de font de rezervă, ca textul să nu se rearanjeze
• Animează cu transform, nu cu proprietăți precum top sau height, care declanșează recalcularea aspectului

Un flux de lucru practic

1. Verifică raportul Core Web Vitals din Search Console ca să vezi ce grupuri de URL-uri nu trec și la ce indicator
2. Alege un URL reprezentativ din fiecare grup care nu trece
3. Rulează un test de laborator ca să afli ce este lent
4. Repară la nivel de șablon – majoritatea problemelor afectează fiecare pagină care folosește același aspect
5. Validează: în Search Console, pornește validarea după implementare; datele din teren au nevoie de până la 28 de zile ca să reflecte îmbunătățirile

Cât de mult influențează Core Web Vitals clasările?

Google a spus clar că experiența pe pagină este un semnal printre multe altele și că relevanța și conținutul util contează mai mult. O pagină rapidă cu conținut slab nu va depăși o pagină excelentă. Dar când paginile sunt la fel de relevante, o experiență mai bună poate ajuta – iar paginile mai rapide convertesc constant mai bine, ceea ce contează indiferent de clasări.

Sfaturi pentru fiecare platformă

WordPress

• Folosește un plugin de cache sau cache la nivel de găzduire ca să reduci timpul de răspuns al serverului
• Alege o temă ușoară; constructorii de pagini grei adaugă adesea mult CSS și JavaScript
• Auditează pluginurile: fiecare poate adăuga scripturi pe fiecare pagină, afectând INP
• Folosește un plugin de optimizare a imaginilor care livrează WebP sau AVIF și adaugă atributele width și height
• Amână sau elimină scripturile terțe de care nu ai nevoie pe fiecare pagină

Shopify

• Revizuiește aplicațiile instalate – multe injectează scripturi pe fiecare pagină chiar și când nu sunt folosite
• Folosește funcțiile integrate ale temei pentru imagini responsive
• Limitează numărul de secțiuni și slidere de pe pagina principală
• Comprimă și redimensionează imaginile înainte de încărcare

Site-uri personalizate și cu mult JavaScript

• Folosește redarea pe server sau generarea statică, ca acel conținut să apară fără să aștepte JavaScriptul
• Împarte codul pe rute și încarcă componentele la cerere
• Măsoară INP-ul utilizatorilor reali cu biblioteca JavaScript web-vitals și trimite datele în analytics, ca să vezi ce interacțiuni sunt lente

Măsurarea datelor de la utilizatori reali

Search Console și PageSpeed Insights arată date Chrome agregate, dar doar pentru paginile cu suficient trafic și cu întârziere. Ca să vezi Core Web Vitals pentru fiecare pagină și fiecare vizitator, adaugă monitorizarea utilizatorilor reali (RUM). Biblioteca open-source web-vitals raportează LCP, INP și CLS din browserele vizitatorilor; poți trimite valorile în Google Analytics 4 sau în alt instrument de analiză. RUM înregistrează și ce element a fost LCP și ce interacțiune a fost cea mai lentă – exact ce îți trebuie ca să rezolvi problema.

O notă despre Total Blocking Time și Speed Index

Lighthouse raportează și alți indicatori în afară de Core Web Vitals. Total Blocking Time (TBT) măsoară cât timp a fost blocat firul principal în timpul încărcării și este corelat cu INP. First Contentful Paint (FCP) marchează momentul în care apare ceva pentru prima dată. Speed Index măsoară cât de repede se umple zona vizibilă. Sunt diagnostice utile, dar nu sunt ei înșiși Core Web Vitals.

Mituri frecvente

• „Ai nevoie de scorul 100 în PageSpeed ca să te clasezi.” Nu. Pentru experiența pe pagină contează să treci pragurile Core Web Vitals în datele din teren, iar relevanța contează mult mai mult.
• „Core Web Vitals contează doar pentru Google.” Paginile mai rapide și mai stabile îmbunătățesc conversiile și satisfacția fiecărui vizitator, indiferent de unde a venit.
• „Mai multe pluginuri de cache ajută.” Suprapunerea mai multor pluginuri de cache sau optimizare provoacă adesea conflicte. Folosește o singură soluție bine configurată.

Concluzii principale

• Core Web Vitals măsoară încărcarea (LCP), capacitatea de răspuns (INP) și stabilitatea vizuală (CLS).
• Pragurile bune sunt LCP ≤ 2,5 s, INP ≤ 200 ms și CLS ≤ 0,1 la percentila 75 a vizitelor reale.
• Contează datele din teren de la utilizatorii Chrome reali; testele de laborator servesc la diagnosticarea problemelor.
• LCP se îmbunătățește de obicei cu servere mai rapide și imagini hero mai bine optimizate.
• INP se îmbunătățește când reduci și spargi JavaScriptul, mai ales scripturile terțe.
• CLS se îmbunătățește când rezervi spațiu pentru imagini, reclame și încorporări.

Întrebări frecvente

De ce diferă scorurile mele de laborator de cele din teren?

Testele de laborator simulează un singur dispozitiv și o singură rețea. Datele din teren reflectă dispozitivele, rețelele și comportamentul vizitatorilor tăi reali, inclusiv interacțiuni pe care testele de laborator nu le fac.

În cât timp apar îmbunătățirile în Search Console?

Datele din teren acoperă ultimele 28 de zile, așa că o remediere are nevoie de până la patru săptămâni ca să se reflecte complet.

Contează Core Web Vitals pe desktop?

Da. Google evaluează separat mobilul și desktopul. Pe mobil e de obicei mai greu să treci, pentru că dispozitivele și rețelele sunt mai lente.

Care este un scor PageSpeed bun?

90 sau peste este bun. Dar scorul este un rezumat de laborator; pentru experiența pe pagină contează să treci Core Web Vitals în datele din teren.