← Study Guide·🔧 Part IV: Platform Services
13

Observability — Speed Insights, Web Vitals, Logs

13. Observability — Speed Insights, Web Vitals, Logs

13.1 Core Web Vitals — What Vercel measures

Vercel's Speed Insights collects real user measurement (RUM) data for:

MetricMeasuresGood threshold
LCP (Largest Contentful Paint)Loading performance — time to render largest visible element< 2.5s
CLS (Cumulative Layout Shift)Visual stability — how much content moves during load< 0.1
INP (Interaction to Next Paint)Responsiveness — time from user input to visual response< 200ms
FCP (First Contentful Paint)First visible content< 1.8s
TTFB (Time to First Byte)Server response time< 800ms

Why this matters for customer conversations:

  • Google uses Core Web Vitals as a direct SEO ranking signal
  • Amazon found every 100ms of latency costs 1% in sales
  • Google found 53% of mobile users abandon sites taking > 3 seconds to load

13.2 Speed Insights implementation

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
        <Analytics />
      </body>
    </html>
  );
}

13.3 Logs & OpenTelemetry

Since Vercel Ship 2025, Vercel supports OpenTelemetry for standardised observability:

// Instrument a Server Component or API route
import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('my-app');

export async function GET() {
  return tracer.startActiveSpan('fetch-products', async (span) => {
    const products = await db.getProducts();
    span.setAttribute('product.count', products.length);
    span.end();
    return Response.json(products);
  });
}

Log drains (Enterprise): Stream logs to Datadog, New Relic, Axiom, Splunk.