import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics({ name, value, id }) {
const body = JSON.stringify({ name, value, id, url: window.location.href });
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/vitals', body);
} else {
fetch('/api/vitals', { body, method: 'POST', keepalive: true });
}
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);Am trecut de mult de faza în care ne mințeam singuri cu teste de Lighthouse rulate pe MacBook Pro-ul nostru de 3000 de euro. În producție, pe un telefon de buget cu o conexiune 4G fluctuantă, realitatea este complet diferită. Dacă nu măsori ce experimentează utilizatorii tăi reali, optimizezi orbește.
Status-quo-ul metricilor în 2026: INP e noul standard
După ce INP (Interaction to Next Paint) a înlocuit oficial FID-ul, optimizarea pentru interacțiuni rapide a devenit marea noastră durere de cap. LCP-ul (Largest Contentful Paint) rămâne greu de stăpânit din cauza imaginilor hero prost optimizate, iar CLS-ul (Cumulative Layout Shift) încă ne penalizează la fiecare element dinamic care își schimbă dimensiunea pe ecran.
La un proiect recent cu 18.000 de utilizatori unici pe zi, aveam scoruri de 95+ în Lighthouse-ul rulat în CI/CD. În realitate, în producție, INP-ul pe paginile de checkout sărea de 350ms pe dispozitivele Android mai vechi. Cauza? Un script de tracking de la un terț care bloca thread-ul principal exact când userul încerca să dea click pe butonul de plată. Fără date din producție, adică Real User Monitoring (RUM), nu ne prindeam niciodată de această problemă.
Vercel Speed Insights: Avantaje și costuri ascunse
Dacă folosești Next.js și găzduiești pe platforma celor de la Vercel, activarea monitorizării e o chestie de două click-uri. Îți arată frumos unde sunt problemele, corelate direct cu rutele din aplicație.
Dar aici intervine compromisul sincer: costul la scară. Vercel este excelent ca să pornești la drum și să nu-ți bați capul cu infrastructura. Totuși, când depășești limitele incluse în planul Pro, costurile devin greu de justificat. Am pățit ca o factură să crească cu 250 de dolari într-o singură lună doar din cauza metricilor de Speed Insights pe un site cu trafic mediu. În plus, ești blocat în ecosistemul lor. Dacă vrei să muți aplicația pe AWS sau pe un VPS simplu, pierzi tot istoricul metricilor.
Alternativa: RUM custom cu biblioteca web-vitals
Ca să evităm costurile absurde, am migrat monitorizarea pe o soluție custom. Folosim pachetul oficial web-vitals direct în cod și trimitem datele printr-un simplu Beacon API către un worker din Cloudflare. De acolo, le aruncăm într-o bază de date de tip time-series, cum ar fi un ClickHouse self-hosted, și le vizualizăm în Grafana.
Costul lunar pentru 1 milion de evenimente? Practic zero, plătim doar câțiva cenți pe worker-ul de Cloudflare.
Dezavantajul major? Trebuie să-ți construiești singur dashboard-urile și să te asiguri că nu trimiți date cu caracter personal (GDPR compliance). Nu mai ai acea integrare unde dai click și vezi linia exactă de cod care a cauzat layout shift-ul.
Trimițând datele asincron, ne asigurăm că nu afectăm performanța paginii. navigator.sendBeacon garantează că datele pleacă către server chiar dacă userul închide tab-ul imediat.
Concluzia mea
Vercel Analytics câștigă detașat la rapiditatea implementării și confort, dar te taxează scump pentru asta. RUM custom câștigă când ai volum mare de trafic și vrei să controlezi costurile de infrastructură, cu prețul unui efort inițial de configurare.
Voi cum măsurați performanța în producție în ultima vreme? Mergeți pe tool-uri SaaS sau v-ați construit propria soluție?