1. Head-of-line blocking: Requests queue up
2. Multiple connections: 6-8 connections per domain
3. Large headers: Repeated on every request
4. No prioritization: All requests equal priority
5. Text protocol: Inefficient parsing

1. Multiplexing: Multiple requests over single connection
2. Single connection: One connection per domain
3. Header compression: HPACK algorithm
4. Stream prioritization: Critical resources first
5. Binary protocol: Faster parsing
6. Server push: Proactively send resources

Connection 1: Request CSS → Wait → Response CSS
Connection 2: Request JS  → Wait → Response JS
Connection 3: Request IMG → Wait → Response IMG

Problem: Limited connections, head-of-line blocking

Single Connection:
Stream 1: Request CSS ⟷ Response CSS
Stream 2: Request JS  ⟷ Response JS
Stream 3: Request IMG ⟷ Response IMG

All happen simultaneously!

HTTP/1.1: Bundle everything to reduce requests
- bundle.js (500 KB)
- bundle.css (100 KB)

HTTP/2: Split into smaller files
- home.js (50 KB)
- auth.js (30 KB)
- dashboard.js (80 KB)
- shared.js (40 KB)
- ...

Benefits:
- Better caching (change home.js, others cached)
- Parallel downloads
- Faster parsing

Client: Requests index.html

Server: Sends index.html
        + PUSH: style.css
        + PUSH: script.js
        + PUSH: logo.svg

Client: Receives everything immediately

location / {
  # Push critical resources
  http2_push /css/critical.css;
  http2_push /js/app.js;
  http2_push /fonts/inter-var.woff2;
  
  root /var/www/html;
  index index.html;
}

const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert'),
});

server.on('stream', (stream, headers) => {
  if (headers[':path'] === '/') {
    // Push critical resources
    stream.pushStream({ ':path': '/css/app.css' }, (err, pushStream) => {
      pushStream.respondWithFile('public/css/app.css', {
        'content-type': 'text/css',
      });
    });

    stream.pushStream({ ':path': '/js/app.js' }, (err, pushStream) => {
      pushStream.respondWithFile('public/js/app.js', {
        'content-type': 'application/javascript',
      });
    });

    // Send HTML
    stream.respondWithFile('public/index.html', {
      'content-type': 'text/html',
    });
  }
});

server.listen(443);

// Express
app.get('/', (req, res) => {
  res.set('Link', [
    '</css/app.css>; rel=preload; as=style',
    '</js/app.js>; rel=preload; as=script',
    '</fonts/inter.woff2>; rel=preload; as=font; crossorigin',
  ].join(', '));
  
  res.sendFile('index.html');
});

✅ Push:
- Critical CSS
- Hero image
- Primary JavaScript bundle
- Web fonts

❌ Don't Push:
- Non-critical resources
- Resources likely cached
- Large files (> 50 KB)
- User-specific data

Problem: Server can't know if client has cached resource

Solution: Cache-Digest header (experimental)
Client sends digest of cached resources
Server only pushes what's missing

Request 1:
  GET /api/users HTTP/1.1
  Host: api.example.com
  User-Agent: Mozilla/5.0...
  Accept: application/json
  Authorization: Bearer token...
  Cookie: session=abc...
  (500-800 bytes per request)

Request 2: All headers repeated again
Request 3: All headers repeated again
...

Request 1:
  :method: GET
  :path: /api/users
  :authority: api.example.com
  user-agent: Mozilla/5.0...
  (Indexed in static/dynamic table)

Request 2:
  :method: 2 (index reference)
  :path: 3  (index reference)
  ... (mostly indexes, ~50 bytes)

Savings: 80-90% reduction in header size

Critical (Highest):
- HTML document
- Critical CSS
- Fonts

High:
- Visible images
- Primary JavaScript

Medium:
- Non-critical JavaScript
- Below-fold images

Low:
- Analytics
- Ads
- Tracking scripts

// Chromium priority hints
<link rel="preload" href="/critical.css" as="style" importance="high" />
<link rel="preload" href="/analytics.js" as="script" importance="low" />

<img src="/hero.jpg" importance="high" />
<img src="/footer-logo.jpg" importance="low" />

<script src="/app.js" importance="high"></script>
<script src="/analytics.js" importance="low"></script>

server {
  listen 443 ssl http2;
  
  server_name example.com;
  
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
  
  # HTTP/2 push
  http2_push_preload on;
  
  location / {
    root /var/www/html;
    index index.html;
  }
}

# Requires mod_http2
LoadModule http2_module modules/mod_http2.so

<VirtualHost *:443>
  ServerName example.com
  
  # Enable HTTP/2
  Protocols h2 http/1.1
  
  SSLEngine on
  SSLCertificateFile /path/to/cert.pem
  SSLCertificateKeyFile /path/to/key.pem
</VirtualHost>

const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert'),
  allowHTTP1: true,  // Fallback to HTTP/1.1
});

server.on('stream', (stream, headers) => {
  stream.respond({
    'content-type': 'text/html',
    ':status': 200,
  });
  
  stream.end('<html><body>Hello HTTP/2!</body></html>');
});

server.listen(443);

// ❌ HTTP/1.1 approach (bad for HTTP/2)
import './a.js';
import './b.js';
import './c.js';
// Webpack bundles into bundle.js (500 KB)

// ✅ HTTP/2 approach (split into chunks)
// Webpack code splitting
const A = lazy(() => import('./a.js'));  // 50 KB
const B = lazy(() => import('./b.js'));  // 80 KB
const C = lazy(() => import('./c.js'));  // 30 KB

// next.config.js
module.exports = {
  webpack: (config) => {
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        home: {
          test: /[\\/]pages[\\/]index/,
          name: 'home',
          priority: 10,
        },
        dashboard: {
          test: /[\\/]pages[\\/]dashboard/,
          name: 'dashboard',
          priority: 10,
        },
      },
    };
    return config;
  },
};

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link
          rel="preload"
          href="/css/critical.css"
          as="style"
        />
        <link
          rel="preload"
          href="/fonts/inter-var.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

# Nginx (with QUIC support)
listen 443 ssl http3;
listen 443 ssl http2;

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

❌ HTTP/1.1 optimization (bad for HTTP/2):
static1.example.com
static2.example.com
static3.example.com
static4.example.com

✅ HTTP/2 optimization:
example.com (single domain)

Reason: HTTP/2 multiplexing makes multiple domains slower (extra DNS, TCP, TLS)

# cURL
curl -I --http2 https://example.com

# Should see:
HTTP/2 200

# Check protocol in browser DevTools
Network tab → Protocol column → h2

# Chrome DevTools
Network tab → Look for "Push / " in Initiator column

// Measure time to load all resources
performance.getEntriesByType('resource').forEach(entry => {
  console.log(entry.name, entry.nextHopProtocol);  // 'h2' for HTTP/2
});

HTTP/2:
- Uses TCP
- Head-of-line blocking at TCP level
- 95%+ support

HTTP/3 (QUIC):
- Uses UDP
- No head-of-line blocking
- Faster connection establishment
- Better for mobile (connection migration)
- 75%+ support (growing)