import { onLCP, onINP, onCLS } from 'web-vitals/attribution';
function sendToAnalytics({ name, delta, id, attribution }) {
const body = JSON.stringify({
event: name,
value: delta,
id: id,
element: attribution.element || null,
loadState: attribution.loadState || null
});
// Beacon API e perfectă pentru a nu bloca descărcarea paginii
navigator.sendBeacon('/api/v1/rum-telemetry', body);
}
// Înregistrăm metricile cu datele de atribuire
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);Ne-am bătut toți capul cu Lighthouse ani de zile, dar în 2026 e clar pentru toată lumea că testele sintetice sunt doar o iluzie confortabilă. Dacă vrei SEO pe bune, trebuie să măsori ce simt userii tăi reali în producție (RUM). Am trecut prin asta recent pe un proiect de e-commerce cu 45k de vizitatori unici pe zi și am învățat câteva lecții destul de costisitoare.
Pe ce ne batem capul în 2026? LCP, CLS și noul rege, INP
De când Interaction to Next Paint (INP) a înlocuit oficial FID-ul, optimizarea de performanță a devenit mult mai tehnică. Nu mai merge doar să trântești imagini WebP și să zici că ai terminat treaba.
La proiectul de e-commerce de care ziceam, aveam LCP (Largest Contentful Paint) verde în Lighthouse-ul rulat de pe laptopul meu de dezvoltare, dar în Google Search Console eram pe galben spre roșu. De ce? Pentru că pe telefoanele ieftine ale clienților reali, imaginile alea optimizate se încărcau greu din cauza procesării JS-ului care bloca main thread-ul.
INP-ul ne-a dat cele mai mari bătăi de cap. Oamenii dădeau click pe "Adaugă în coș", iar din cauza unui script de tracking de la un vendor terț, pagina îngheța timp de 350ms. Pe hârtie totul era verde; în realitate, userii dădeau click de trei ori crezând că nu merge site-ul.
Vercel Analytics: Bun, dar la ce preț?
Dacă folosești Next.js și găzduiești pe Vercel, tentația e mare să activezi Vercel Speed Insights din consolă. E o soluție de un singur click. Îți arată exact unde e problema, ba chiar îți mapează scorurile direct pe rutele din Next.js.
Trade-off-ul e simplu: merge excelent pentru proiecte mici și medii, dar devine incredibil de scump la scară. Când treci de pragul de un milion de vizualizări pe lună, factura pentru Speed Insights începe să doară. În plus, ești blocat în ecosistemul lor. Dacă vrei să muți infrastructura pe AWS sau Cloudflare ca să reduci costurile de bandă, pierzi tot istoricul de monitorizare.
Alternativa: RUM custom cu web-vitals și ClickHouse
Am decis să renunțăm la tool-urile gata făcute și am construit o conductă proprie de monitorizare. Folosim librăria oficială web-vitals direct în browser, trimitem datele printr-un Cloudflare Worker (ca să nu încărcăm serverul principal) și le salvăm în ClickHouse.
Am economisit cam 200 de dolari pe lună și avem control total. Cel mai mare avantaj? Putem trimite și "attributions" – adică nu aflăm doar că avem un CLS (Cumulative Layout Shift) prost, ci știm exact ce element HTML (selectorul CSS) s-a deplasat și cu câți pixeli.
Aplicația trimite datele doar pentru un eșantion de 10% din utilizatori, ceea ce e mai mult decât suficient pentru o imagine statistică corectă și nu ne omoară bugetul de stocare.
Dacă vrei să faci asta, codul de inițializare e destul de simplu. Importi librăria și trimiți datele către endpoint-ul tău de analiză.
La final, decizia se reduce la resurse. Dacă ai o echipă mică și buget de cloud, Vercel Analytics te scapă de bătăi de cap. Dacă ai trafic mare și vrei să înțelegi exact de ce îți scade conversia pe mobil, investește două zile să-ți pui la punct propriul sistem RUM.
Voi ce folosiți pentru monitorizarea asta în producție? Vă bazați pe CrUX sau v-ați construit propriul pipeline?