Time to First Byte (TTFB): Los het knelpunt op dat alles vertraagt

Navigation TTFB components (startTime → responseStart):

1. Redirects          (0ms if no redirects)
2. Service worker     (0ms if not used)
3. Browser cache      (checking local cache)
4. DNS lookup         (0-100ms, or 0ms if cached)
5. TCP connection     (1 RTT, or 0ms if reused)
6. TLS handshake      (1-2 RTT, or 0ms if reused)
7. HTTP request       (minimal)
8. Server processing  (varies widely)
9. Response start     (first byte arrives)

Note: Many subparts can be 0ms depending on caching,
connection reuse, and other factors.

// Chrome DevTools Network tab:
// 1. Open DevTools (F12)
// 2. Go to Network tab
// 3. Reload the page
// 4. Click on the main document request
// 5. Go to Timing tab
// 6. "Waiting for server response" = TTFB

// TTFB includes:
// - Queueing
// - Stalled
// - DNS Lookup
// - Initial connection
// - SSL
// - Request sent
// - Waiting (TTFB)

Installeer de web-vitals library:

npm install web-vitals

Track vervolgens TTFB:

import {onTTFB} from 'web-vitals';

onTTFB((metric) => {
  console.log('TTFB:', metric.value);

  // Send to analytics
  analytics.track('ttfb', {
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    navigationType: metric.navigationType
  });
});

// Or use Navigation Timing API directly
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (entry.entryType === 'navigation') {
      const ttfb = entry.responseStart - entry.requestStart;
      console.log('TTFB:', ttfb);
    }
  });
});

observer.observe({ type: 'navigation', buffered: true });

// Cloudflare: HTTP/3 enabled by default
// Reduces TTFB by 20-30% on mobile networks

// Nginx: Enable HTTP/3
server {
  listen 443 quic reuseport;
  listen 443 ssl http2;

  ssl_protocols TLSv1.3;
  ssl_early_data on; # 0-RTT

  add_header Alt-Svc 'h3=":443"; ma=86400';
}

// Benefits:
// - Faster connection establishment
// - Better mobile performance
// - Head-of-line blocking eliminated
// - 0-RTT resumption (saves 1 RTT on repeat visits)

<!-- DNS prefetching for external domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//analytics.example.com">

<!-- Preconnect for critical origins -->
<link rel="preconnect" href="//api.example.com" crossorigin>

<!-- Use a fast DNS provider -->
Cloudflare DNS: ~10ms lookup time
Google DNS:     ~20ms
Default ISP:    ~50-200ms

<!-- Benefits: -->
DNS Prefetch:  Saves 20-100ms on first request
Preconnect:    Saves 20-100ms + TCP/TLS time

// Render React at the edge, closest to users
import { renderToString } from 'react-dom/server';
import App from './App';

export default async function handler(request) {
  const html = renderToString(<App />);

  return new Response(html, {
    headers: {
      'Content-Type': 'text/html',
      'Cache-Control': 'public, s-maxage=60'
    }
  });
}

// Benefits:
// - 10-30ms TTFB globally
// - No origin server load
// - Scales infinitely

// Vercel/Netlify: Reduce cold start times

// Bad: Large dependencies
import _ from 'lodash'; // 100KB
import moment from 'moment'; // 200KB
// Cold start: 500-1000ms

// Good: Import only what you need
import debounce from 'lodash/debounce'; // 5KB
import { format } from 'date-fns'; // 10KB
// Cold start: 100-200ms

// Keep functions warm
// - Use Vercel Edge Functions (no cold starts)
// - Or ping functions every 5 minutes
// - Or use reserved concurrency (AWS Lambda)

// Reuse database connections
import { Pool } from 'pg';

const pool = new Pool({
  max: 20, // Max connections
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000
});

// Bad: New connection each request (100-200ms overhead)
app.get('/data', async (req, res) => {
  const client = new Client();
  await client.connect();
  const result = await client.query('SELECT * FROM data');
  await client.end();
  res.json(result.rows);
});

// Good: Reuse pooled connections (5-10ms overhead)
app.get('/data', async (req, res) => {
  const result = await pool.query('SELECT * FROM data');
  res.json(result.rows);
});

import {onTTFB} from 'web-vitals';

onTTFB((metric) => {
  analytics.track('ttfb', {
    value: metric.value,
    rating: metric.rating,
    page_path: location.pathname,
    navigation_type: metric.navigationType,
    connection_type: navigator.connection?.effectiveType,

    // Server timing breakdown (if available)
    server_timing: getServerTimingMetrics()
  });
});

function getServerTimingMetrics() {
  const navigation = performance.getEntriesByType('navigation')[0];
  const serverTiming = navigation.serverTiming || [];

  return serverTiming.map(entry => ({
    name: entry.name,
    duration: entry.duration
  }));
}

// Express middleware: Track backend timing
app.use((req, res, next) => {
  const start = Date.now();
  const timings = {};

  res.on('finish', () => {
    const total = Date.now() - start;
    res.set('Server-Timing', [
      `total;dur=${total}`,
      `db;dur=${timings.db || 0}`,
      `cache;dur=${timings.cache || 0}`,
      `render;dur=${timings.render || 0}`
    ].join(', '));
  });

  req.timing = timings;
  next();
});

// In route handler
app.get('/product/:id', async (req, res) => {
  const cacheStart = Date.now();
  const cached = await cache.get(req.params.id);
  req.timing.cache = Date.now() - cacheStart;

  if (cached) return res.json(cached);

  const dbStart = Date.now();
  const product = await db.getProduct(req.params.id);
  req.timing.db = Date.now() - dbStart;

  res.json(product);
});

// Visible in Chrome DevTools Network -> Timing tab