Core Web Vitals sunt cele trei metrici prin care Google măsoară experiența reală a utilizatorului pe site-ul tău: viteza de încărcare a conținutului principal, reactivitatea la interacțiuni și stabilitatea vizuală. Din martie 2024, INP a înlocuit FID, iar pragurile au devenit mai stricte. În 2026, un site care nu trece de aceste praguri pierde poziții în Google și conversii în coș.
La Design Creator Lab vedem zilnic cum un magazin online din Timișoara sau București trece de la o rată de conversie de 1,2% la 2,8% doar prin optimizarea Core Web Vitals, fără a schimba nimic la design sau la oferta comercială. Articolul de față este ghidul tehnic pe care îl folosim intern cu clienții noștri.
Ce sunt Core Web Vitals în 2026
Core Web Vitals sunt trei indicatori standardizați de Google care evaluează performanța percepută a unei pagini web. Sunt parte din semnalele Page Experience și influențează direct ranking-ul în căutarea organică.
- LCP (Largest Contentful Paint): timpul până la afișarea celui mai mare element vizibil în viewport. Prag bun: sub 2,5 secunde.
- INP (Interaction to Next Paint): latența celei mai lente interacțiuni a utilizatorului cu pagina. Prag bun: sub 200 ms.
- CLS (Cumulative Layout Shift): cât de mult sare layout-ul în timpul încărcării. Prag bun: sub 0,1.
Google folosește date reale de la utilizatorii Chrome (CrUX dataset), nu teste de laborator. Înseamnă că un site poate avea scor 100 în Lighthouse și totuși să pice la Core Web Vitals în Search Console, dacă utilizatorii reali au conexiuni mai slabe sau dispozitive medii.
De ce contează pentru un site comercial
Un client al nostru, un retailer de mobilă din Cluj, avea LCP de 4,8 secunde pe categoria principală. După optimizare la 1,9 secunde, sesiunile organice au crescut cu 34% în trei luni și rata de abandon a coșului a scăzut cu 18 puncte procentuale. Investiția în optimizare a fost aproximativ 3.500 EUR, recuperată în 6 săptămâni.
LCP: cum reduci timpul de încărcare a conținutului principal
LCP măsoară când apare cel mai mare bloc vizibil (de obicei imaginea hero, un titlu mare sau un banner). Dacă LCP-ul tău este peste 2,5 secunde, problema vine aproape sigur dintr-una din patru zone.
Server lent sau hosting subdimensionat
Multe site-uri românești rulează pe shared hosting de 5 EUR pe lună, cu TTFB (Time to First Byte) de 1,2 secunde. Pe Laravel sau WordPress cu plugin-uri grele, asta omoară LCP-ul din start. Recomandăm VPS dedicat cu PHP-FPM, OPcache activat și Redis pentru sesiuni și cache. Costul corect pentru un site comercial este între 30 și 80 EUR pe lună la hosting.
Imagini neoptimizate
Imaginea hero de 1.8 MB în format JPEG este cauza numărul unu a LCP-ului prost. Soluții concrete:
- Folosește format AVIF sau WebP cu fallback JPEG.
- Servește dimensiuni adaptive prin srcset și sizes.
- Adaugă fetchpriority="high" pe imaginea LCP.
- Preîncarcă fontul și imaginea hero cu <link rel="preload">.
Render-blocking CSS și JavaScript
CSS-ul critic ar trebui inline în <head>, restul încărcat asincron. JavaScript-ul terț (Google Tag Manager, chat widgets, pixel Facebook) se încarcă cu defer sau async, ideal după evenimentul de interacțiune. Pe Next.js folosim componenta next/script cu strategia lazyOnload pentru tot ce nu e critic.
CDN și caching
Un CDN de calitate (Cloudflare, BunnyCDN, Fastly) reduce LCP-ul cu 30-50% pentru vizitatorii din afara Bucureștiului. Costul: între 10 și 50 EUR pe lună pentru un site mediu. Pentru proiectele noastre Laravel adăugăm și cache la nivel de aplicație cu Cache::remember() pe query-urile grele.
INP: cum faci pagina să răspundă instant la click și tastare
INP a înlocuit FID în martie 2024 și este metrica cea mai greu de optimizat. Măsoară timpul dintre o interacțiune (click, tap, tastare) și următorul frame randat de browser. Sub 200 ms este bine, peste 500 ms este critic.
Cauze tipice ale INP-ului prost
- JavaScript bundle prea mare (peste 300 KB gzipped).
- Event handler-i care fac muncă sincronă lungă (filtre de produse, sortări).
- Third-party scripts care blochează main thread-ul.
- React render-uri inutile la fiecare schimbare de stare.
Soluții practice pentru INP
Spargem bundle-ul JS pe rute cu dynamic imports. În React folosim useMemo și useCallback țintit, nu peste tot. Pentru operațiuni grele de calcul folosim Web Workers. La filtrele de magazin online aplicăm debounce de 150 ms și actualizăm URL-ul cu history.replaceState, nu cu navigare completă.
Pe un proiect e-commerce recent, am redus INP-ul de la 480 ms la 140 ms migrând filtrele de categorie de pe client-side rendering pe server components Next.js 15. Bundle-ul JS al paginii a scăzut de la 412 KB la 89 KB.
CLS: cum elimini saltul de layout
CLS măsoară instabilitatea vizuală. Apare când o reclamă se încarcă peste conținut, când un font web schimbă dimensiunile textului sau când o imagine fără width și height împinge restul paginii în jos.
Reguli stricte pentru CLS sub 0,1
- Atribute width și height pe toate imaginile și iframe-urile.
- Rezervă spațiu pentru bannere, popup-uri de cookie, widget-uri de chat.
- Folosește font-display: optional sau swap cu size-adjust ca să eviți FOUT.
- Animații doar pe transform și opacity, niciodată pe top, left, width, height.
Un client din Iași avea CLS de 0,38 pentru că banner-ul de cookie apărea după 2 secunde și împingea conținutul. Soluția: rezervăm 80px în partea de jos, banner-ul apare instant cu position: fixed. CLS-ul a scăzut la 0,02.
Cum măsori corect Core Web Vitals
Există două tipuri de date: field data (utilizatori reali, ce vede Google) și lab data (teste sintetice, utile pentru debugging).
Unelte pentru field data
- Google Search Console, secțiunea Core Web Vitals: arată ce pagini sunt pe roșu, galben sau verde.
- PageSpeed Insights: combină field data (CrUX) cu lab data (Lighthouse).
- Chrome UX Report direct prin BigQuery pentru analize avansate.
Unelte pentru lab data și debugging
- Lighthouse în Chrome DevTools pentru audit complet.
- WebPageTest pentru teste cu locații și conexiuni reale (recomandăm locația Frankfurt pentru audiență RO).
- web-vitals.js integrat în site pentru monitorizare RUM continuă, cu date trimise în Google Analytics 4 sau în propria bază.
Pentru clienții noștri instalăm dashboard-uri custom care arată LCP, INP și CLS pe percentilă 75, segmentat pe tip de device și pagină. Costul implementării: aproximativ 800-1.200 EUR ca parte a unui audit complet de performanță.
Plan concret de optimizare pentru un site românesc
Dacă pornești de la zero cu un site care pică la toate trei metricile, iată ordinea în care recomandăm să acționezi:
- Audit cu PageSpeed Insights și Search Console pe 5-10 pagini reprezentative. Cost: gratuit, timp: o zi.
- Hosting și CDN: migrare pe VPS dedicat și Cloudflare. Cost: 40-100 EUR pe lună, timp: 2-3 zile.
- Imagini și fonturi: conversie la AVIF/WebP, preload pe LCP, font-display optimizat. Cost: 500-1.500 EUR, timp: 1 săptămână.
- JavaScript: code splitting, lazy loading pentru third-party, optimizare bundle. Cost: 1.500-4.000 EUR, timp: 2-3 săptămâni.
- Monitoring: dashboard RUM pentru urmărire continuă. Cost: 800-1.200 EUR setup, apoi liber.
Pentru un site mediu de e-commerce românesc, bugetul total pentru a trece toate paginile pe verde este între 4.000 și 10.000 EUR. Recuperarea vine din trafic organic crescut și conversii mai mari, de obicei în 3-6 luni.
Concluzie
Core Web Vitals nu sunt o opțiune în 2026, sunt o cerință de bază pentru orice site care vrea să rămână vizibil în Google. LCP sub 2,5s, INP sub 200ms și CLS sub 0,1 sunt pragurile pe care le respectă fiecare proiect pe care îl livrăm la Design Creator Lab, fie că vorbim de o platformă Laravel pentru o companie din Timișoara sau de un site Next.js pentru un brand din București. Dacă scorurile tale actuale te costă clienți, primul pas este un audit corect, urmat de un plan de optimizare etapizat.