2nd/10_Wiki/Topics/Architecture/Network-Latency-Optimization.md

---
id: wiki-2026-0508-network-latency-optimization
title: Network Latency Optimization
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Latency Optimization, Network Performance, Low Latency]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [network, latency, performance, http3, cdn]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: any
  framework: http3-quic
---

# Network Latency Optimization

## 매 한 줄
> **"매 latency 의 reduce = round trips 의 reduce + distance 의 reduce + bytes 의 reduce"**. 매 RTT 의 fundamental constraint (light-speed). 2026 toolkit: HTTP/3 (QUIC), edge compute, brotli, prefetch, 0-RTT TLS.

## 매 핵심

### 매 latency budget (sources)
- **Propagation**: 매 distance / c. NYC↔LA ~70ms RTT minimum.
- **Transmission**: 매 bytes / bandwidth.
- **Queueing**: router buffer / congestion.
- **Processing**: server compute, TLS handshake, DNS.

### 매 lever
- **Fewer RTTs**: HTTP/2/3 multiplex, 0-RTT TLS, connection reuse.
- **Closer**: CDN, edge compute, anycast.
- **Smaller**: brotli, image optimize, tree-shake.
- **Parallel**: HTTP/2 streams, preload, prefetch.
- **Predictive**: speculation rules, prerender.

### 매 응용
1. SaaS dashboard: edge auth + cached fragments.
2. Video stream: anycast + adaptive bitrate.
3. Realtime game: UDP + WebTransport.

## 💻 패턴

### HTTP/3 (Cloudflare / nginx)
```nginx
# nginx 1.25+
listen 443 quic reuseport;
listen 443 ssl;
http3 on;
add_header alt-svc 'h3=":443"; ma=86400';
ssl_protocols TLSv1.3;
ssl_early_data on; # 0-RTT
```

### Resource hints
```html
<link rel="preconnect" href="https://api.shop">
<link rel="dns-prefetch" href="https://cdn.shop">
<link rel="preload" as="font" href="/fonts/Inter.woff2" crossorigin>
<link rel="modulepreload" href="/_next/static/chunks/main.js">
```

### Speculation rules (Chrome 121+)
```html
<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/products/*" }, "eagerness": "moderate" }],
  "prefetch":  [{ "where": { "href_matches": "/*" }, "eagerness": "conservative" }]
}
</script>
```

### Brotli compression
```nginx
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json image/svg+xml;
```

### Edge function (Cloudflare Worker)
```typescript
export default {
  async fetch(req: Request, env: Env, ctx: ExecutionContext) {
    const cache = caches.default;
    let res = await cache.match(req);
    if (res) return res;

    res = await fetch(req, { cf: { cacheTtl: 300, cacheEverything: true } });
    res = new Response(res.body, res);
    res.headers.set("cache-control", "public, max-age=300, s-maxage=600");
    ctx.waitUntil(cache.put(req, res.clone()));
    return res;
  },
};
```

### Connection coalescing
```typescript
// keep-alive pool, single host
import { Agent } from "undici";
const agent = new Agent({
  keepAliveTimeout: 30_000,
  keepAliveMaxTimeout: 60_000,
  connections: 50,
});

await fetch(url, { dispatcher: agent });
```

### TCP_NODELAY (Node)
```javascript
const net = require("net");
const socket = net.createConnection({ host, port });
socket.setNoDelay(true); // disable Nagle for latency-sensitive
```

### Service Worker stale-while-revalidate
```javascript
// sw.js
self.addEventListener("fetch", (e) => {
  e.respondWith((async () => {
    const cache = await caches.open("v1");
    const cached = await cache.match(e.request);
    const network = fetch(e.request).then((r) => {
      cache.put(e.request, r.clone());
      return r;
    });
    return cached ?? network;
  })());
});
```

### DNS over HTTPS (faster + secure)
```typescript
const r = await fetch("https://cloudflare-dns.com/dns-query?name=api.shop&type=A", {
  headers: { accept: "application/dns-json" },
});
```

### Latency budget telemetry
```typescript
const obs = new PerformanceObserver((list) => {
  for (const e of list.getEntries() as PerformanceNavigationTiming[]) {
    console.log({
      ttfb: e.responseStart - e.requestStart,
      dns: e.domainLookupEnd - e.domainLookupStart,
      tls: e.connectEnd - e.secureConnectionStart,
      lcp: e.loadEventEnd - e.startTime,
    });
  }
});
obs.observe({ type: "navigation", buffered: true });
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Static content, global | CDN + brotli + cache |
| Personalized SaaS | Edge function + KV cache |
| API-heavy mobile | HTTP/3 + connection pool + protobuf |
| Realtime (game/voice) | UDP / WebTransport / QUIC |

**기본값**: HTTP/3 + CDN + brotli + resource hints + edge personalization.

## 🔗 Graph
- 부모: [[Web-Performance]]
- 변형: [[Throughput-Optimization]]
- 응용: [[CDN]] · [[Edge Computing|Edge-Computing]]
- Adjacent: [[Compression]] · [[Web-Vitals]]

## 🤖 LLM 활용
**언제**: 매 waterfall analysis 의 explain, resource hint 의 propose, header config 의 audit.
**언제 X**: 매 capacity planning, BGP / peering decision — network-eng domain.

## ❌ 안티패턴
- **Lots of small requests**: HTTP/1.1 era 6-connection limit. Use HTTP/2/3 multiplex.
- **No CDN for static**: 매 origin hit 의 매 user. 100ms+ avoidable.
- **TLS 1.2 + RSA**: 매 slow handshake. Use TLS 1.3 + ECDSA.
- **Synchronous waterfall**: A → B → C 의 sequential await. Parallelize.

## 🧪 검증 / 중복
- Verified (web.dev, Cloudflare engineering blog, "High Performance Browser Networking" by Grigorik).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — HTTP/3 + edge + resource hints latency patterns |