Speed Insights & Web Vitals

Track real-world browser performance experienced by actual visitors across the globe. Exovon Speed Insights automatically collects Google Core Web Vitals ($p75$ percentiles) and streams telemetry directly to your project dashboard with zero configuration and zero API keys.

Core Web Vitals

Real-time tracking of LCP, INP, and CLS scores based on Google Chromium standards with high-precision percentiles.

Zero API Keys

Client telemetry is automatically intercepted by the Exovon Edge Router. No secret tokens are ever exposed in public JavaScript.

Edge Aggregation

Beacon payloads are aggregated in-memory and flushed in batches, producing zero latency impact on visitor requests.

1. Quickstart Installation

Install the official @exovon/sdk package in your project:

Terminal

# npm
npm install @exovon/sdk

# pnpm
pnpm add @exovon/sdk

# bun / yarn
bun add @exovon/sdk

2. Integration by Framework

Next.js (App Router)

Add <SpeedInsights /> into your root app/layout.tsx. It automatically hooks into browser navigation lifecycle events.

app/layout.tsx

// app/layout.tsx
import { SpeedInsights } from '@exovon/sdk/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Zero configuration required */}
        <SpeedInsights />
      </body>
    </html>
  );
}

Next.js (Pages Router)

Place the component inside pages/_app.tsx:

pages/_app.tsx

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { SpeedInsights } from '@exovon/sdk/react';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <SpeedInsights />
    </>
  );
}

React (Vite / Client SPA)

Mount the component at the root of your React application in src/App.tsx:

src/App.tsx

// src/App.tsx
import { SpeedInsights } from '@exovon/sdk/react';

export default function App() {
  return (
    <div>
      <main>
        {/* Your Application Content */}
      </main>
      <SpeedInsights />
    </div>
  );
}

3. Tracked Web Vitals Metrics

Exovon records five industry-standard metrics to give you a complete picture of real user experience:

Metric	Name	Target (Good)	What It Measures
LCP	Largest Contentful Paint	≤ 2.5s	Time taken for the largest visible image or text block to render.
INP	Interaction to Next Paint	≤ 200ms	Responsiveness to user clicks, taps, and keyboard interactions.
CLS	Cumulative Layout Shift	≤ 0.1	Visual stability and unexpected layout jumping during page load.
FCP	First Contentful Paint	≤ 1.8s	Time until the browser renders the first piece of DOM content.
TTFB	Time to First Byte	≤ 800ms	Network roundtrip and server response time before rendering begins.

Security Architecture & Zero Token Exposure

Unlike legacy APM platforms that require generating and embedding public API keys into frontend code, Exovon handles telemetry entirely at the edge.

No Client-Side Secrets: Your Exovon API key is never exposed in browser bundles or source maps.
Edge Routing Interception: The Exovon Edge Router intercepts /_exovon/vitals automatically using the incoming request's Host header to identify the project.
Localhost Filter: When running locally in development (localhost / 127.0.0.1), the SDK automatically suppresses telemetry calls to prevent console noise.

Was this documentation page helpful?

PreviousAI Developer Agents Next Exovon SDK (@exovon/sdk)

Pricing & Limits·System Status·Astrolabe AI IDE·CLI & SDK·99.95% SLA