Core Web Vitals explicat pentru antreprenori
LCP, INP și CLS explicate fără jargon: pragurile actuale, cum îți măsori site-ul gratuit, cele șase cauze frecvente și ce se repară fără reconstrucție.
Core Web Vitals sunt trei măsurători prin care Google evaluează cât de bine se simte un om pe pagina ta. Nu cât de repede se încarcă în laborator, ci ce trăiește un vizitator real, pe telefonul lui, pe conexiunea lui. Sunt un factor de clasare confirmat, dar mai important e că măsoară exact lucrurile care fac oamenii să închidă o pagină înainte să vadă ce vinzi.
Articolul explică fiecare dintre cele trei fără jargon: ce măsoară, care e pragul, ce le strică și ce se poate repara pe un site existent. La final ai și cifrele reale dintr-o optimizare făcută de noi, ca să vezi ordinul de mărime al câștigului.
Cuprins
- Ce măsoară Google, de fapt
- LCP: cât durează până apare lucrul principal
- INP: cât durează până site-ul răspunde
- CLS: cât sare pagina sub deget
- Sunt Core Web Vitals un factor de clasare
- Cum îți măsori site-ul în zece minute
- Cele șase cauze care produc majoritatea problemelor
- De ce imaginile sunt aproape întotdeauna vinovate
- Scripturile terțe: costul ascuns al fiecărui widget
- Fonturile, cauza pe care nu o suspectează nimeni
- Ce se repară și ce cere reconstrucție
Ce măsoară Google, de fapt
Cele trei măsurători corespund la trei momente prin care trece orice vizitator:
- Se încarcă? — cât aștept până văd ceva util. (LCP)
- Răspunde? — apăs și se întâmplă ceva? (INP)
- Stă locului? — sau conținutul sare și apăs pe altceva decât voiam? (CLS)
Datele de laborator și datele reale
Există două feluri de măsurători, și confuzia dintre ele produce multe discuții inutile:
- De laborator — un test rulat controlat, care dă un scor. Util pentru diagnostic.
- De teren — date colectate de la utilizatori reali, în ultimele 28 de zile. Astea contează pentru clasare.
Un site poate avea scor bun în laborator și date de teren proaste, pentru că vizitatorii reali au telefoane mai slabe și conexiuni mai proaste decât mașina de test.
Percentila 75
Google nu se uită la media utilizatorilor, ci la percentila 75: trei sferturi dintre vizitatori trebuie să aibă o experiență bună. E o alegere corectă — media ascunde exact utilizatorii cu probleme.
LCP: cât durează până apare lucrul principal
Largest Contentful Paint măsoară cât trece de la începutul încărcării până când apare cel mai mare element vizibil din partea de sus a paginii — de obicei o imagine mare sau titlul.
| Prag | Interpretare |
|---|---|
| sub 2,5 s | bine |
| 2,5–4 s | necesită îmbunătățiri |
| peste 4 s | slab |
LCP e metrica pe care cad cele mai multe site-uri pe mobil — doar aproximativ 62% dintre paginile mobile trec pragul, față de 77% la INP și 81% la CLS (corewebvitals.io(se deschide într-o filă nouă)).
Ce strică LCP
- Imaginea mare din capul paginii, nedimensionată și în format vechi.
- Un server lent — dacă răspunsul întârzie 800 ms, ai consumat o treime din buget înainte să înceapă ceva.
- Fonturi care blochează afișarea textului.
- Cod JavaScript care trebuie descărcat și executat înainte să apară conținutul.
- Un video de fundal cu redare automată. Cel mai scump lucru pe care îl poți pune pe o pagină.
INP: cât durează până site-ul răspunde
Interaction to Next Paint măsoară timpul de la o atingere sau un clic până când ecranul se actualizează vizibil. A înlocuit o măsurătoare mai veche care evalua doar prima interacțiune; INP le ia în calcul pe toate.
| Prag | Interpretare |
|---|---|
| sub 200 ms | bine |
| 200–500 ms | necesită îmbunătățiri |
| peste 500 ms | slab |
INP e metrica ratată cel mai des: 43% dintre site-uri nu trec pragul de 200 ms (NitroPack(se deschide într-o filă nouă)).
De ce e cea mai grea
Pentru că nu depinde de cât de repede se încarcă pagina, ci de cât cod rulează după încărcare. Un site cu multe scripturi — chat, hărți, urmărire, animații, module de consimțământ, widget-uri de recenzii — poate arăta perfect și răspunde cu o întârziere pe care utilizatorul o percepe ca „s-a blocat”.
Ce strică INP
- Prea multe scripturi terțe. Fiecare widget adăugat consumă din bugetul de răspuns.
- Module de urmărire care se execută la fiecare interacțiune.
- Animații implementate prost, care forțează browserul să recalculeze pagina.
- Meniuri și filtre care procesează liste lungi la fiecare apăsare.
CLS: cât sare pagina sub deget
Cumulative Layout Shift măsoară cât se mută conținutul în timpul încărcării. E măsurătoarea frustrării: începi să citești un paragraf, se încarcă o imagine deasupra lui și textul coboară.
| Prag | Interpretare |
|---|---|
| sub 0,1 | bine |
| 0,1–0,25 | necesită îmbunătățiri |
| peste 0,25 | slab |
Ce strică CLS
- Imagini fără dimensiuni declarate. Browserul nu știe cât spațiu să rezerve, așa că nu rezervă nimic, iar când imaginea sosește împinge tot ce e sub ea.
- Reclame sau conținut încărcat ulterior, inserat între elemente existente.
- Bannere care apar deasupra conținutului după o secundă.
- Fonturi care se schimbă la încărcare, cu diferență mare de dimensiune între fontul de rezervă și cel final.
Cel mai ușor de reparat
CLS e, dintre cele trei, cea care se rezolvă cel mai simplu: se declară dimensiunile imaginilor și se rezervă spațiu pentru orice element care apare mai târziu. E o muncă mecanică, cu rezultat imediat.
Sunt Core Web Vitals un factor de clasare
Da, sunt un factor de clasare confirmat, integrat în semnalele de experiență a paginii din 2021. Dar sunt un factor secundar: relevanța conținutului rămâne decisivă. În practică, Core Web Vitals funcționează ca departajare între pagini cu conținut de calitate comparabilă. O pagină rapidă cu conținut slab nu va depăși o pagină lentă cu conținut excelent.
Motivul mai bun pentru a le urmări
Nu clasarea, ci comportamentul. O pagină care se încarcă greu pe telefon pierde vizitatori înainte ca ei să vadă ce vinzi. Fiecare secundă în plus taie din numărul celor care ajung la formularul de contact.
Cu alte cuvinte: optimizează pentru oameni, iar clasarea vine ca efect secundar. Invers nu funcționează.
Cum îți măsori site-ul în zece minute
PageSpeed Insights
Deschide pagespeed.web.dev, introdu adresa unei pagini, alege Mobil.
Ce citești, în ordine:
- Secțiunea de sus, „Descoperiți ce experimentează utilizatorii reali”. Astea sunt datele de teren, singurele care contează pentru clasare. Dacă lipsesc, site-ul nu are trafic suficient pentru colectare — folosește restul raportului ca ghid.
- Cele trei valori, cu verde, galben sau roșu.
- Lista de oportunități de mai jos, sortată după impact.
Testează pagina de start, o pagină de serviciu și o pagină de portofoliu. Sunt structuri diferite și pot avea probleme diferite.
Search Console
În raportul dedicat vezi datele de teren pentru tot site-ul, grupate pe tipuri de pagini. E vederea corectă la nivel de site, în timp ce PageSpeed Insights e vederea la nivel de pagină.
Ce nu contează
Scorul general de la 0 la 100. E o medie ponderată a mai multor măsurători de laborator și nu e folosit la clasare. Un site cu scor 78 și toate cele trei valori de teren verzi e într-o poziție mai bună decât unul cu scor 95 și date de teren roșii.
Cele șase cauze care produc majoritatea problemelor
| # | Cauză | Metrica afectată | Efort de reparare |
|---|---|---|---|
| 1 | Imagini negestionate | LCP, CLS | mic |
| 2 | Prea multe scripturi terțe | INP, LCP | mic–mediu |
| 3 | Server lent | LCP | mic (se schimbă găzduirea) |
| 4 | Fonturi care blochează afișarea | LCP, CLS | mic |
| 5 | Extensii și module în exces | toate | mediu |
| 6 | Șablon greu, cu editor vizual | toate | mare |
Primele patru sunt lucrări de câteva ore. A cincea e o curățenie. A șasea e, de obicei, motivul pentru care celelalte cinci nu ajung să fie suficiente.
De ce imaginile sunt aproape întotdeauna vinovate
Într-un audit obișnuit, imaginile explică peste jumătate din problemă. Patru greșeli, toate frecvente:
1. Se trimite fișierul original. O fotografie de 2.000 de pixeli lățime, afișată într-un card de 400 de pixeli, obligă telefonul să descarce o imagine mult mai mare decât cea de care are nevoie.
2. Format nepotrivit. Pentru multe imagini web, fișierele JPEG și PNG pot fi considerabil mai mari decât variantele AVIF sau WebP la o calitate vizuală comparabilă.
3. Fără dimensiuni declarate. Cauza principală a saltului de conținut.
4. Totul se încarcă deodată. Imaginile de la baza paginii, pe care nimeni nu le va vedea fără să deruleze, se descarcă în același timp cu cele de sus.
Cifre dintr-o optimizare reală
Când am refăcut acest site, am aplicat exact aceste patru corecții pe grila de portofoliu. Rezultatul, măsurat:
| Înainte | După | |
|---|---|---|
| Grila de portofoliu, 12 carduri vizibile | ~2,4 MB | ~180–260 KB |
| Octeți pentru un card de 400 px lățime | 206 KB | ~18–28 KB |
O reducere de aproximativ 90%, fără nicio pierdere vizibilă de calitate. Nu s-a schimbat nicio imagine: s-au generat variante la dimensiunile efectiv folosite, în formate moderne, cu dimensiuni declarate și cu încărcare amânată pentru ce e sub prima secțiune vizibilă.
Scripturile terțe: costul ascuns al fiecărui widget
A doua cauză ca frecvență, după imagini, și cea care explică majoritatea problemelor de INP.
Cum se acumulează
Nimeni nu decide să pună opt scripturi pe un site. Se adaugă câte unul, în luni diferite, fiecare cu un motiv bun:
| Ce se adaugă | Motivul de atunci |
|---|---|
| Analiza traficului | „trebuie să știm câți vizitatori avem” |
| Banner de consimțământ | obligatoriu |
| Chat | „să poată întreba repede” |
| Pixel de rețea socială | „pentru campanii” |
| Hartă încorporată | „să vadă unde suntem” |
| Widget de recenzii | „să se vadă că avem recenzii bune” |
| Video încorporat | „e mai simplu decât să-l găzduim” |
| Formular de la un serviciu extern | „era gata făcut” |
Opt scripturi, fiecare de la alt domeniu. Fiecare cere o conexiune nouă, descarcă cod și îl execută. Efectul nu e aditiv, e cumulativ: se blochează reciproc pe firul principal al browserului, iar rezultatul se vede în INP.
Cât costă, aproximativ
Un chat obișnuit adaugă câteva sute de kiloocteți de JavaScript și zeci de milisecunde de execuție. O hartă încorporată e adesea cel mai greu element de pe o pagină de contact — mai greu decât toate imaginile la un loc.
Ce faci
Inventariază. În instrumentele de dezvoltare, secțiunea de rețea, sortează după domeniu. Vei vedea exact de la cine vine ce.
Pentru fiecare, întreabă: ce aduce, și cine s-a uitat ultima dată dacă e folosit? Widget-urile de recenzii și pixelii de la campanii încheiate rămân ani întregi pe site.
Înlocuiește ce se poate:
| În loc de | Folosește |
|---|---|
| Hartă interactivă încorporată pe fiecare pagină | o imagine statică a hărții, cu legătură către aplicația de hărți |
| Video încorporat, încărcat automat | o imagine de previzualizare care încarcă playerul doar la clic |
| Widget de recenzii | recenziile ca text pe pagină, actualizate periodic |
| Font extern | fontul găzduit local |
Amână ce nu e necesar imediat. Chatul, pixelii de campanie și scripturile de analiză suplimentare nu trebuie să pornească odată cu pagina. Încărcate după interacțiunea utilizatorului, dispar complet din bugetul de încărcare inițială.
Legătura cu consimțământul
Cele mai multe scripturi terțe setează cookie-uri și nu au voie să pornească înainte de acordul vizitatorului. Corect implementat, asta rezolvă parțial și problema de performanță: pentru cine nu acceptă, scripturile nici nu se încarcă. Vezi Cookie banner și Consent Mode v2.
Fonturile, cauza pe care nu o suspectează nimeni
Un font e un fișier care trebuie descărcat înainte ca textul să poată fi afișat în forma finală. Prost configurat, produce probleme la două dintre cele trei măsurători.
Textul invizibil
Comportamentul implicit al unor configurații e să ascundă textul până se încarcă fontul. Rezultatul: o pagină goală câteva sute de milisecunde, deși textul era gata de afișat. Dacă elementul cel mai mare din partea de sus a paginii e un titlu, LCP-ul crește direct cu întârzierea fontului.
Soluția: fontul se configurează să afișeze imediat un font de rezervă și să comute când cel definitiv sosește.
Saltul la comutare
Comutarea produce o schimbare de aspect. Dacă fontul de rezervă are lățimi mult diferite, textul se rearanjează și crește CLS-ul. Se rezolvă alegând un font de rezervă cu metrici apropiate și ajustând diferența.
Cele patru reguli
- Găzduiește fonturile local. Un font de pe un domeniu extern înseamnă o conexiune suplimentară înainte ca textul să apară — plus o problemă de consimțământ.
- Încarcă doar greutățile folosite. Un font cu nouă greutăți din care folosești două înseamnă de patru ori mai mulți octeți degeaba.
- Restrânge setul de caractere la ce ai nevoie. Pentru română: latin plus latin extins — diacriticele ș, ț, ă, î, â sunt în extensie. Fără ea, se afișează cu font de rezervă.
- Preîncarcă fontul principal, cel folosit pentru titlul din capul paginii.
Verificarea rapidă
În secțiunea de rețea a instrumentelor de dezvoltare, filtrează după fonturi. Câte fișiere se descarcă? De unde? Cât cântăresc? Peste trei fișiere de font pe o pagină e aproape sigur prea mult.
Ce se repară și ce cere reconstrucție
Se repară pe un site existent
- Optimizarea imaginilor și declararea dimensiunilor.
- Eliminarea scripturilor terțe care nu aduc nimic.
- Configurarea fonturilor pentru afișare imediată.
- Activarea compresiei și a memorării în cache pe server.
- Mutarea pe o găzduire mai bună.
- Eliminarea extensiilor nefolosite.
Câștig realist: LCP redus cu 30–50%, CLS adesea complet rezolvat. Câteva zile de muncă.
Nu se repară fără reconstrucție
- Un șablon care încarcă bibliotecile pentru toate funcțiile, indiferent ce folosești.
- Un editor vizual care generează straturi de cod pentru fiecare secțiune.
- O acumulare de extensii care se suprapun și se blochează reciproc.
Semnul: ai făcut tot ce e mai sus și LCP-ul e tot peste 4 secunde pe mobil. În acest caz, optimizarea în continuare e bani aruncați — problema e fundația.
Cum arată alternativa
Un site construit ca fișiere statice, cu imaginile procesate la momentul construirii și cu dimensiunile știute dinainte, trece pragurile prin construcție, nu prin optimizare ulterioară. Nu e magie: e absența codului care nu trebuia să existe. Subiectul e discutat pe larg în WordPress sau site static.
Vrei să știi unde stă site-ul tău și ce se poate repara fără reconstrucție? Scrie-ne adresa — ne uităm la datele de teren și îți spunem concret ce se câștigă și cu ce efort.
Citește mai departe: Structura SEO a unui site de prezentare, Găzduire web: ce contează cu adevărat și ce include un proiect de creare site de prezentare.