# Enable HTTP/2
listen 443 ssl http2;

# SSL certificate (required for HTTP/2)
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;

# HTTP/2 server push
location / {
  # Push critical resources
  http2_push /css/critical.css;
  http2_push /js/app.js;
}

# Enable HTTP/3 (experimental)
listen 443 quic reuseport;
add_header Alt-Svc 'h3-29=":443"; ma=86400';

// Detect HTTP/2 support
function detectHTTP2() {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/test');
    xhr.onloadend = () => {
      const protocol = xhr.getResponseHeader('x-protocol');
      resolve(protocol === 'HTTP/2.0');
    };
    xhr.send();
  });
}

// Check protocol in Network tab
performance.getEntriesByType('navigation')[0].nextHopProtocol;
// Returns: 'h2' (HTTP/2), 'h3' (HTTP/3), 'http/1.1'

// Detect HTTP/3 from Alt-Svc header
const altSvc = response.headers.get('alt-svc');
const hasHTTP3 = altSvc && altSvc.includes('h3');

// Monitor protocol usage
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log({
      url: entry.name,
      protocol: entry.nextHopProtocol,
      duration: entry.duration,
      pushed: entry.transferSize === 0 // Server push
    });
  }
});

observer.observe({entryTypes: ['resource']});

// Track Core Web Vitals with protocol correlation
new PerformanceObserver((list) => {
  const protocol = list.getEntries()[0].nextHopProtocol;
  // Send metrics with protocol context
}).observe({entryTypes: ['largest-contentful-paint']});