Core Web Vitals nu sunt un scor cosmetic — sunt semnale de clasare și, mai important, predictori direcți ai conversiei. Aici intrăm în fiecare metrică cu pragurile exacte, cauzele reale și reparații pe care le poți aplica, cu exemple de cod.
Pragurile pe care le urmărește Google
| Metrica | Bun | De îmbunătățit | Slab |
|---|---|---|---|
| LCP (încărcare) | ≤ 2,5 s | 2,5–4,0 s | > 4,0 s |
| INP (interactivitate) | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS (stabilitate vizuală) | ≤ 0,1 | 0,1–0,25 | > 0,25 |
Google folosește percentila 75 a utilizatorilor reali. Adică nu contează cât de repede se încarcă la tine pe fibră, ci experiența celui de-al 75-lea utilizator din 100, adesea pe mobil, pe o conexiune mai slabă.
LCP — Largest Contentful Paint
Măsoară cât durează să apară cel mai mare element vizibil (de obicei imaginea principală sau titlul). Cauze frecvente și reparații:
Imaginea principală, neoptimizată
Nu pune lazy load pe imaginea din partea de sus și preîncarc-o:
<link rel="preload" as="image" href="/hero.webp">
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="...">Server lent (TTFB mare)
Dacă timpul până la primul byte e mare, atacă găzduirea și cache-ul. Un cache de pagină și un CDN reduc dramatic TTFB.
INP — Interaction to Next Paint
A înlocuit oficial vechiul FID. Măsoară cât de repede răspunde vizual pagina la interacțiunile utilizatorului (clic, atingere, tastare) pe toată durata vizitei. Principalul vinovat: JavaScript care blochează firul principal.
Reparații
- Elimină JS-ul nefolosit. Multe site-uri încarcă biblioteci întregi pentru un singur efect.
- Amână ce nu e critic:
<script src="/analytics.js" defer></script> - Sparge sarcinile lungi în bucăți mai mici, ca browserul să poată răspunde între ele.
CLS — Cumulative Layout Shift
Măsoară cât „sare” conținutul în timp ce se încarcă. Un CLS prost e enervant: dai să apeși un buton și pagina se mișcă. Cauze și reparații:
Imagini fără dimensiuni
Cel mai frecvent vinovat. Soluția e simplă și obligatorie — atribute explicite, ca browserul să rezerve spațiul:
<img src="/produs.webp" width="800" height="600" alt="...">Fonturi web care schimbă layout-ul
Folosește font-display: swap și preîncarcă fontul principal:
@font-face {
font-family: 'Outfit';
src: url('/outfit.woff2') format('woff2');
font-display: swap;
}Bannere și reclame fără spațiu rezervat
Rezervă dimensiunea containerului dinainte, cu min-height, ca inserarea conținutului să nu împingă restul paginii.
Date de laborator vs. date reale
Există două tipuri de măsurători și e crucial să nu le confunzi:
| Laborator (lab) | Teren (field) | |
|---|---|---|
| Sursă | Lighthouse, PageSpeed (test simulat) | CrUX — utilizatori reali |
| Rol | Diagnostic, depanare | Ceea ce clasează Google |
| Unde le vezi | PageSpeed Insights (sus) | Search Console → Core Web Vitals |
Poți avea 100 în Lighthouse și tot să pici pe teren, dacă utilizatorii tăi reali au dispozitive și conexiuni mai slabe. De aceea, raportul din Search Console e sursa de adevăr.
Ordinea reparațiilor pentru impact maxim
Din experiență, cel mai bun raport efort/rezultat este: (1) imaginile — comprimare, WebP/AVIF, dimensiuni explicite; rezolvă simultan LCP și CLS cu efort minim; (2) JavaScript — elimini și amâni, pentru INP; (3) fonturile și detaliile de randare. Optimizarea imaginilor singură mută, pe multe site-uri, toate cele trei metrici din roșu în verde. Dacă vrei o fundație rapidă din construcție, vezi cum lucrăm la experiența digitală și performanță.
