Performanță10 min citire

Core Web Vitals: Cum Să Obții Scoruri Perfecte

LCP, CLS, INP — ce sunt, de ce contează și cum le optimizezi concret pentru un site rapid și o experiență excelentă pentru utilizatori.

Echipa Fadi

15 martie 2026

Ce Sunt Core Web Vitals și De Ce Contează?

Core Web Vitals sunt un set de metrici de performanță definite de Google pentru a măsura experiența reală a utilizatorilor pe un website. Introduse ca factor de ranking în mai 2021, ele reflectă trei aspecte esențiale ale experienței de utilizare: viteza de încărcare, stabilitatea vizuală și reactivitatea.

Google colectează date reale de la utilizatorii Chrome (prin Chrome User Experience Report — CrUX) și le folosește atât pentru a evalua site-urile, cât și ca semnal de ranking direct. Un site cu Core Web Vitals bune are avantaj față de unul cu metrici slabe, chiar dacă celelalte semnale SEO sunt similare.

Metricile Core Web Vitals în 2026

Cele trei metrici actuale sunt:

LCP (Largest Contentful Paint) — viteza de încărcare
CLS (Cumulative Layout Shift) — stabilitatea vizuală
INP (Interaction to Next Paint) — reactivitatea la interacțiuni

LCP — Largest Contentful Paint

Ce Măsoară LCP

LCP măsoară cât timp durează până când cel mai mare element de conținut vizibil din viewport se încarcă complet. De obicei acesta este:

Imaginea hero principală a paginii
Un video cover
Un bloc mare de text (dacă nu există imagini mari)

Praguri de Performanță LCP

Bun: sub 2.5 secunde
Necesită îmbunătățiri: 2.5 - 4 secunde
Slab: peste 4 secunde

Cauze Comune ale LCP Slab

Imagini neoptimizate — imaginea hero în format JPEG la 2MB este cea mai frecventă cauză
Server lent — Time to First Byte (TTFB) ridicat trage în jos LCP-ul
Render-blocking resources — CSS sau JavaScript care blochează randarea
Lipsa preload pentru resursele critice — imaginea LCP nu este preîncărcată

Cum Optimizezi LCP

Optimizarea imaginilor:

Convertește imaginile în format WebP sau AVIF (50-70% mai mici decât JPEG/PNG)
Dimensionează imaginile corect: nu folosi o imagine de 3000px pentru un container de 800px
Compresia fără pierderi vizibile cu Squoosh sau TinyPNG
Implementează srcset și sizes pentru imagini responsive

Preîncărcarea imaginii LCP: Adaugă în <head> tag-ul de preload pentru imaginea hero:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Reducerea TTFB:

Alege un hosting performant (VPS sau cloud în loc de shared hosting ieftin)
Implementează caching la nivel de server (Nginx, Varnish)
Folosește un CDN (Cloudflare, Fastly) pentru distribuția geografică a conținutului

Eliminarea render-blocking resources:

CSS critic inline în <head>, restul CSS asincron
JavaScript cu atributele defer sau async sau mutat la finalul body
Elimină sau amână script-urile terțe neesențiale (live chat, analytics secundare)

CLS — Cumulative Layout Shift

Ce Măsoară CLS

CLS măsoară suma deplasărilor neașteptate ale elementelor vizibile din viewport pe parcursul întregii vieți a paginii. Un scor CLS de 0 înseamnă că layout-ul este complet stabil.

Un CLS ridicat înseamnă că utilizatorul a dat click pe un buton, dar între intenția de click și executarea lui un element nou (ex: un banner) s-a încărcat și a deplasat butonul. Rezultat: click greșit și frustrare.

Praguri de Performanță CLS

Bun: sub 0.1
Necesită îmbunătățiri: 0.1 - 0.25
Slab: peste 0.25

Cauze Comune ale CLS Slab

Imagini fără dimensiuni specificate — browserul nu rezervă spațiu până la încărcarea imaginii
Reclame dinamice — bannerele care se inserează târziu deplasează conținutul
Web fonts — fonturile care se încarcă după text cauzează FOUT (Flash of Unstyled Text)
Embeds dinamice — iframe-uri, widgets, videoclipuri fără dimensiuni fixe

Cum Optimizezi CLS

Specifică dimensiunile pentru toate imaginile și videoclipurile:

<img src="photo.webp" width="800" height="450" alt="Descriere">

Rezervă spațiu pentru conținut dinamic: Dacă știi că un banner va apărea, rezervă spațiul în CSS înainte de a-l încărca:

.banner-container {
  min-height: 90px;
}

Optimizează încărcarea fonturilor:

Folosește font-display: swap sau font-display: optional
Preîncarcă fonturile critice în <head>
Setează size-adjust în CSS pentru a preveni deplasarea la schimbarea fontului

INP — Interaction to Next Paint

Ce Măsoară INP

INP (Interaction to Next Paint) a înlocuit FID (First Input Delay) în martie 2024. Spre deosebire de FID care măsura doar prima interacțiune, INP măsoară latența tuturor interacțiunilor (click-uri, atingeri, taste) pe parcursul întregii vizite și raportează valoarea cea mai mare (sau percentila 98).

Practic, INP răspunde la întrebarea: "Cât de repede răspunde pagina mea la ce face utilizatorul?"

Praguri de Performanță INP

Bun: sub 200 ms
Necesită îmbunătățiri: 200 - 500 ms
Slab: peste 500 ms

Cauze Comune ale INP Slab

JavaScript excesiv pe main thread — script-uri mari care blochează thread-ul principal
Event handlers ineficienți — handler-uri care execută operații costisitoare sincron
Rendering excesiv — componente React/Vue care se re-randează ineficient
Third-party scripts — scripturi de publicitate sau analytics care consumă CPU

Cum Optimizezi INP

Împarte task-urile lungi (Long Tasks): Task-urile JavaScript mai lungi de 50ms blochează thread-ul principal. Împarte-le în bucăți mai mici folosind setTimeout(0) sau Scheduler API.

Amână executarea JavaScript neesențial: Tot ce nu este necesar la încărcarea paginii (ex: logica pentru modal-uri) trebuie încărcat și executat lazy.

Optimizează React/Vue:

Folosește React.memo, useMemo și useCallback pentru a preveni re-randările inutile
Virtualizează listele lungi (react-virtual, tanstack-virtual)

Cum Măsori Core Web Vitals

Instrumente Disponibile

Date de teren (Field Data) — date reale de la utilizatori:

Google Search Console — raportul Core Web Vitals
Chrome User Experience Report (CrUX) — date agregate pe domeniu

Date de laborator (Lab Data) — simulare controlată:

PageSpeed Insights (pagespeed.web.dev)
Lighthouse (în Chrome DevTools)
WebPageTest.org — testare avansată cu multiple locații

Diferența Importantă

Datele de teren reflectă experiența reală a utilizatorilor tăi și sunt cele pe care Google le folosește pentru ranking. Datele de laborator sunt utile pentru depanare și testare rapidă, dar pot diferi de realitate.

Plan de Acțiune

Verifică scorurile actuale pe PageSpeed Insights pentru mobil și desktop
Identifică metrica cu scorul cel mai slab
Urmează ghidul specific pentru acea metrică (LCP, CLS sau INP)
Implementează schimbările, testează și re-măsoară
Monitorizează raportul Core Web Vitals din Google Search Console săptămânal

Îmbunătățirile Core Web Vitals nu sunt instantanee în Google Search Console — datele CrUX se actualizează lunar, cu o fereastră de 28 de zile, deci ai nevoie de răbdare.

Verifică-ți Website-ul Acum

Auditează gratuit site-ul tău pe fadiaudit.ro — rezultate în 60 de secunde.