How to instrument a product without slowing it down

Keeping analytics scripts under 2KB prevents main-thread blocking and preserves 100/100 Google Lighthouse Core Web Vitals.

Tracabit teamAugust 9, 20265 min read

A page-load waterfall of grey bars with a small blue bar starting after them.

Loading large multi-kilobyte analytics bundles blocks the main browser UI thread, driving up Interaction to Next Paint (INP) and Largest Contentful Paint (LCP).

Traditional tools bundle polyfills, complex session replay hooks, and client-side visualization engines right into your visitor's browser. This often adds 50KB to 100KB of JavaScript.

Tracabit is written in zero-dependency TypeScript, compiling to under 1.8KB gzipped. All event dispatching happens asynchronously via navigator.sendBeacon, guaranteeing zero impact on UI responsiveness.

beacon-dispatcher.ts

// Non-blocking beacon dispatch
export function dispatchTelemetry(endpoint: string, payload: object): void {
  const blob = new Blob([JSON.stringify(payload)], {
    type: 'application/json'
  });
  if (navigator.sendBeacon) {
    navigator.sendBeacon(endpoint, blob);
  } else {
    fetch(endpoint, { method: 'POST', body: blob, keepalive: true });
  }
}

Keep reading

Tracabit records traffic, events, crashes and web vitals with one script tag, and lets your coding agent read them over MCP.

Start free