app/(site)/work/netverdict/page.tsxln 001
← WORK / SPECIMEN ARCHIVE
NetVerdict
Don't guess. Get the verdict on your connection.
Next.js 16React 19 TypeScriptWeb WorkersOffscreenCanvasTailwind v4 Framer MotionCloudflare Edge2026BETA
LIVE SITEGITHUB
THE PROBLEM

ISPs quote a number from a server sitting inside their own network, which measures the shortest possible path rather than the one your traffic actually takes. NetVerdict measures to a real internet edge and shows both figures, so "why is my speed test 57 but Netflix buffers" has an actual answer instead of a shrug.

Challenges (real ones, from this build):

  • Chrome's HTTP/1.1 6-connections-per-origin cap was silently starving the bufferbloat probe — with all 6 slots held by transfer streams, a latency probe queued behind them for 45 seconds and returned only when the phase deadline killed it. Fixed by reserving a connection slot whenever bufferbloat measurement is active.
  • The original byte-target sizing could end a transfer while it was still in TCP slow-start, reporting the ramp-up as the result. Rebuilt around a fixed-duration deadline instead of a guessed byte count.
  • Kept the live particle-field visualization fully isolated in its own Web Worker with a transferred OffscreenCanvas, so heavy rendering can never contend with, or skew the timing of, the actual measurement.
KEY FEATURES
  • 01Parallel-stream throughput measurement with adaptive stream sizing, run against Cloudflare's global edge
  • 02Bufferbloat grading (A+–F) and RPM — measures latency while the link is under load, not just idle
  • 03Live data-flow gauge: a WebGL/Canvas particle field in its own render worker, driven entirely by real measured samples
  • 04Real-world capability translation ("supports 4K streaming", "competitive gaming") derived from measured throughput and bufferbloat, never guessed
  • 05Evidence-report groundwork: every result records its conditions (POP, endpoint, connection type) so a number is defensible, not just displayed
CHALLENGES

Bufferbloat probe stalled 45s behind its own traffic. Chrome caps connections per origin at 6; the download phase used 7 streams, starving the latency probe. Capped streams to the real connection budget.

Download read 3x low — 9.7 vs 57 Mbps. Four compounding bugs: mistimed speed probe, byte-target sizing that ended transfers mid slow-start, a timeout below the target duration, warm-up discard anchored to the wrong clock. Rebuilt around a fixed-duration deadline. Fixed figure: 29.4 Mbps, verified independently.

A+ bufferbloat grade on a connection that was never loaded. A rate-limited download still scored a perfect grade because nothing checked if the transfer actually succeeded. Gated grading on the transfer's own outcome.

Canvas crashed on remount. transferControlToOffscreen() only works once; React reused the same DOM node on remount and threw. Fixed by tracking transferred canvases and forcing a fresh element.

ARCHITECTURE

Three isolated threads — a measurement worker (owns all timing), the main thread (React/UI), and a render worker (owns the canvas, one-way postMessage data-in only, never reports back) — so a visual bug can make the page ugly but can never corrupt a number.