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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-network-latency-optimization	Network Latency Optimization	10_Wiki/Topics	verified	self	Latency Optimization Network Performance Low Latency	none	A	0.9	applied	network latency performance http3 cdn		2026-05-10	pending	language framework any 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 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

<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+)

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/products/*" }, "eagerness": "moderate" }],
  "prefetch":  [{ "where": { "href_matches": "/*" }, "eagerness": "conservative" }]
}
</script>

Brotli compression

brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json image/svg+xml;

Edge function (Cloudflare Worker)

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

// 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)

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

Service Worker stale-while-revalidate

// 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)

const r = await fetch("https://cloudflare-dns.com/dns-query?name=api.shop&type=A", {
  headers: { accept: "application/dns-json" },
});

Latency budget telemetry

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
• 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