import { onCLS, onINP, onLCP, Metric } from 'web-vitals';
function sendToAnalytics(metric: Metric) {
const body = JSON.stringify({
name: metric.name,
value: metric.value,
rating: metric.rating,
id: metric.id,
path: window.location.pathname,
});
// sendBeacon nu blochează unload-ul paginii
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/rum', body);
} else {
fetch('/api/rum', { body, method: 'POST', keepalive: true });
}
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Lighthouse rulat pe MacBook-ul tău de dev este cea mai mare minciună din web development. În producție, omul intră pe un Samsung ieftin din tren, pe un 4G chinuit, iar hidrarea din React îi blochează thread-ul principal preț de trei secunde când încearcă să deschidă meniul.
Dacă vrei SEO bun, Google se uită exclusiv la datele din teren (CrUX), nu la testul tău sintetic.
Ce s-a schimbat cu adevărat la metrici
Toată lumea știe de LCP și CLS, dar mulți încă ignoră INP (Interaction to Next Paint), care a îngropat definitiv vechiul FID. Dacă FID măsura doar prima reacție a browserului, INP ține evidența celei mai proaste interacțiuni de pe întreaga durată a sesiunii.
La un magazin online de piese auto la care am lucrat anul trecut, aveam vreo 45k vizite pe lună. Pe desktop totul părea perfect, LCP de 1.4s. În Search Console însă, aveam 60% din URL-uri pe galben exclusiv din cauza INP-ului pe mobile. Utilizatorii dădeau tap pe filtrele de produse, iar un script terț de tracking rula sincron o buclă stupidă pe evenimentul de touch. În Lighthouse nu apărea pentru că botul nu dă click pe filtre cum dă un om grăbit.
Vercel Analytics vs RUM custom
Când a trebuit să depanăm problema asta, ne-am lovit de clasica dilemă: luăm Vercel Speed Insights / Analytics sau ne facem telemetrie proprie cu biblioteca web-vitals de la Google?
Vercel Analytics e genial dacă ai buget și vrei zero bătăi de cap. Îl activezi dintr-o linie de cod, interfața e curată și corelează automat metricile cu deployment-urile. Dar are două mari probleme. Prima e costul: la trafic serios te taxează la fiecare mia de evenimente de te usucă. A doua e rigiditatea: nu poți atașa ușor context de sesiune (de exemplu: ce element exact a declanșat INP-ul sau ce versiune de A/B test rula userul).
RUM custom (Real User Monitoring) făcut în casă e soluția pe care am mers până la urmă. Folosești biblioteca oficială web-vitals, împachetezi datele și le trimiți cu sendBeacon către un endpoint propriu, de unde le arunci direct într-un ClickHouse sau chiar într-o tabelă chioară de PostgreSQL dacă traficul e moderat.
Trade-off-ul e evident: Vercel îți dă dashboard gata făcut în 5 minute, în timp ce la RUM custom trebuie să-ți configurezi singur un Grafana și să ai grijă să nu-ți dărâmi propriul API cu zecile de mii de ping-uri zilnice.
Cum capturăm metricile fără să încetinim pagina
Secretul e să nu blochezi thread-ul principal când măsori performanța. Folosește navigator.sendBeacon pe descărcarea paginii sau când metrica devine stabilă, astfel încât datele să plece chiar dacă userul a închis tab-ul brusc.