import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify({
name: metric.name,
value: metric.value,
id: metric.id,
path: window.location.pathname
});
// Folosim sendBeacon ca să nu blocăm descărcarea paginii la unload
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/vitals', body);
} else {
fetch('/api/vitals', { body, method: 'POST', keepalive: true });
}
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);Am tot văzut pe forum oameni disperați că au scor 100 în Lighthouse, dar Google Search Console le aruncă erori de LCP și INP pe bandă rulantă. E o capcană veche, dar în 2026 încă ne lovim de ea fiindcă testele sintetice rulează în condiții ideale, nu pe un telefon ieftin cu conexiune 3G din Călărași. Dacă vrei SEO pe bune, ai nevoie de date de la utilizatori reali (RUM - Real User Monitoring).
De ce ne doare INP-ul mai tare în 2026
De când Interaction to Next Paint (INP) a înlocuit oficial FID-ul, optimizarea a devenit mult mai grea. LCP (Largest Contentful Paint) îl mai rezolvi cu un preload de imagine sau un CDN bun, dar INP ține strict de cum rulează JavaScript-ul tău pe thread-ul principal când userul dă click.
Am avut cazul unui magazin online cu vreo 40k vizite pe lună. Pe hârtie, totul era verde în Lighthouse. În realitate, scripturile de analytics și widget-ul de chat blocau thread-ul principal exact când userul încerca să adauge în coș. Rezultatul? Un INP de peste 450ms și o scădere organică pe Google pentru că paginile erau considerate lente de utilizatorii reali de pe mobil.
Vercel Analytics: Bun, dar scump de te îndoaie
Dacă folosești Next.js, tentația e mare să apeși pe un buton în consolă și să activezi Vercel Speed Insights. E genial ca workflow. Îți arată exact ce pagini au probleme și îți dă un scor din prima.
Dar hai să vorbim de costuri, că aici ne doare pe toți. La un proiect de-al meu cu 120k de vizite lunare, factura pe Vercel începuse să sară de 80$ doar pentru analytics și monitorizare de performanță. Pentru un startup sau un site de prezentare e enorm. Merge de minune când ai buget de enterprise și vrei zero bătaie de cap, dar e complet nerealist dacă vrei să scalezi eficient.
Alternativa: RUM custom cu biblioteca web-vitals
Ca să nu mai plătesc taxa de șmecher, am implementat o soluție proprie. Folosesc pachetul oficial web-vitals de la Google în frontend și trimit datele printr-un endpoint serverless (un Route Handler în Next.js sau o funcție Cloudflare Workers) direct într-o bază de date ieftină, cum ar fi Supabase sau chiar o instanță mică de ClickHouse.
Trade-off-ul e evident. Economisești 95% din costuri (plătesc sub 3$ pe lună acum), dar trebuie să-ți scrii singur dashboard-ul de monitorizare și să cureți datele. Nu mai ai graficele frumoase din Vercel făcute de-a gata, trebuie să le desenezi tu în Grafana sau să faci query-uri SQL direct în bază. Pentru mine, e un compromis extrem de bun.
Voi cum monitorizați Core Web Vitals în producție? Plătiți soluții gata făcute (Vercel, Datadog) sau v-ați construit ceva intern?