import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics({ name, delta, id }) {
const body = JSON.stringify({ name, value: delta, id });
// Folosim sendBeacon pentru a nu bloca thread-ul principal la descarcare
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/vitals', body);
} else {
fetch('/api/vitals', { body, method: 'POST', keepalive: true });
}
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);Dacă încă te bazezi doar pe surse sintetice precum Lighthouse ca să vezi cum stă site-ul tău la Core Web Vitals, ai o mare problemă în producție. Am pățit-o acum ceva timp pe un magazin online de nișă: testele mele locale pe un MacBook M2 arătau scoruri impecabile, dar în realitate am pierdut aproape 15% din traficul organic într-o lună. Utilizatorii reali, mulți de pe telefoane ieftine și conexiuni mobile instabile, aveau un INP (Interaction to Next Paint) dezastruos din cauza unui script de cookie-uri prost optimizat.
De ce testele sintetice te mint în 2026
Lighthouse rulează într-un mediu steril, controlat. În viața reală, utilizatorul tău folosește un Android de acum patru ani, are 20 de tab-uri deschise în Chrome și rețeaua îi trece din 4G în 3G exact când încearcă să apese pe butonul de checkout.
Din 2024, de când INP a înlocuit oficial FID (First Input Delay), optimizarea pentru interacțiuni a devenit critică. Spre deosebire de LCP (Largest Contentful Paint), care măsoară doar viteza de încărcare inițială, INP monitorizează latența tuturor interacțiunilor de pe pagină pe tot parcursul vizitei. Dacă ai un script de chat sau un widget de feedback care blochează Main Thread-ul la 3 secunde după ce pagina s-a încărcat, Lighthouse nu va vedea asta în raportul tău standard. În schimb, Google Search Console te va taxa direct în rezultate.
Vercel Analytics vs. RUM (Real User Monitoring) custom
La un proiect Next.js cu aproximativ 80k de vizitatori unici pe lună, am avut de ales între soluția nativă de la Vercel și o implementare proprie de RUM. Ambele au plusuri și minusuri destul de clare.
Vercel Speed Insights este genial ca experiență de utilizare. Apeși pe un buton în consolă, adaugi un pachet mic în cod și ai graficele direct în dashboard. Îți arată exact ce elemente cauzează CLS și unde crapă INP-ul. Trade-off-ul este, evident, costul. La volumul nostru de trafic, am depășit rapid free tier-ul și m-am trezit cu o factură suplimentară de vreo 120 de dolari doar pentru monitorizare de performanță. Nu e o avere, dar devine deranjant la scară mare.
Diferența de abordare e uriașă. Când folosești Vercel Analytics, ei fac și agregarea datelor, îți arată care sunt paginile cu probleme și îți dau detalii despre elementul HTML exact care a declanșat layout shift-ul. Dacă îți faci sistemul tău RUM custom, primești doar niște numere brute. Trebuie să fii pregătit să scrii tu interogările SQL ca să grupezi datele după URL-uri sau user-agent. Pentru o echipă mică, timpul pierdut cu mentenanța infrastructurii de monitorizare s-ar putea să coste mai mult de acei 120$ pe care îi economisești.
Cum implementezi un sistem RUM simplu și ieftin
Dacă vrei să economisești bani sau dacă nu ești găzduit pe Vercel, soluția cea mai sănătoasă este să folosești biblioteca oficială web-vitals direct în producție. Poți folosi navigator.sendBeacon ca să trimiți datele asincron fără să afectezi performanța paginii (vezi exemplul de cod de mai jos).
Am scris acest script simplu pe care îl folosesc acum pe trei proiecte de producție și care îmi salvează metricile direct într-o bază de date TimescaleDB (pe care o vizualizez în Grafana). Avantajul acestei metode e că e practic gratis. Dezavantajul? Trebuie să îți asumi că sendBeacon mai poate pierde ocazional pachete pe browserele vechi de iOS, dar pentru SEO, eșantionul colectat e mai mult decât suficient pentru a lua decizii corecte.
Până la urmă, optimizarea pentru Core Web Vitals în 2026 nu mai este despre „cum obțin 100/100 în Lighthouse”, ci despre cum se simte site-ul tău pentru ultimul utilizator conectat pe o conexiune instabilă dintr-un tren.
Voi cum monitorizați performanța în producție? Mergeți pe soluții integrate out-of-the-box sau preferați să vă construiți propriul pipeline de date?