Performance & global scale (Africa-on-3G)

The bug

for (const { category, file, yOffset } of layers) {
      const img = await loadImage(traitUrl(category, file));
      ctx.drawImage(img, offsetX, offsetY + yOffset, ...);
    }

Sequential await per layer. Ten layers × (RTT + transfer) = 10× round trips serialised. On Freetown 3G with ~300 ms RTT and ~400 KB avg payload, that is 3 s of RTT alone plus ~8 s of transfer, end-to-end 10–12 s before the canvas paints. On stadium-contended cellular, double it.

What Promise.all would actually buy you

Parallelising the loads removes the RTT serialisation, taking the floor from ~3 s to ~300 ms. But the link is bandwidth-limited, not concurrency-limited — ten parallel TCP streams compete for the same 200 Kbps pipe. Net win at the venue: ~30–40%, not 10×. Worth doing in an afternoon. Not the real fix.

What survives a 30-second network blip today

localStorage state survives — locale, country, avatar traits, handle, pending_id are all written before each network attempt. When connectivity returns and the user moves to the next step, syncPendingProfile is called and the upsert lands. This works. What doesn't: no visible sync indicator, no retry UI, and step 5 (the actual auth.signUp) has no offline queue.

What we need

• Service Worker caching the JS+CSS bundle and sprite-sheet. Cache-first for shell, network-first with stale fallback for registry.
• Background Sync API for pending_profiles upserts — queued in IndexedDB if offline, replayed on reconnect.
• Visible sync indicator. A small pill ("saved" / "saving" / "queued — will sync") next to step header. People panic less when they can see the queue.
• Sign-up offline mode. Defer the auth call to step 6 with a "complete sign-up" button that's enabled when online. Step 5 becomes "save your details locally"; step 6 becomes "go live".

Supabase does not offer Africa

As of May 2026, Supabase has no managed region in Africa. The community discussion has been open for over a year. AWS Cape Town exists; Supabase has declined to enable it. Lagos isn't on AWS at all. This isn't going to change before December.

What we can do instead

• Read replicas. Supabase Pro+ supports read-only replicas in additional AWS regions. None in Africa — best we get is eu-west-2 (London) or me-south-1 (Bahrain — worse). Read replicas help São Paulo (sa-east-1, ~150 ms RTT) materially. They don't help West Africa.
• Cloudflare PoP + KV cache for read-heavy paths. Handle generator + trait registry are read-heavy and tolerant of staleness. Front with a CF Worker that caches in KV (PoP-local) with 5-minute TTL. Freetown's nearest CF PoP is Lagos or Accra — ~20–50 ms RTT. Most impactful single infra change.
• D1 mirror. Cloudflare D1 has regional placement. Mirror public_profiles and handle vocabulary for read paths. Writes still go to Dublin. Eventually-consistent.
• Connection pooling. Confirm NEXT_PUBLIC_SUPABASE_URL points at the pooler, not the direct DB. At 5k signups peaking 20–50 req/s, we'll exhaust default max_connections without it.

The hot RPC: generate_sporthead_handle

Currently called 5× in parallel per "shuffle" at lib/handle.ts:151. A user clicking shuffle three times before settling = 15 RPCs. Across 5,000 users averaging two shuffles = ~50,000 RPC calls in a 2h window. Cache per-locale vocabulary in a Worker; run random pick + uniqueness check at the edge against a D1 mirror. Dublin only sees the final "claim this one" write.

Required behaviour

• Format negotiation. Honour Accept header. AVIF capable, WebP fallback, PNG to ancient Chrome.
• DPR-aware sizing. Most budget Android is DPR 2.0–2.625. Avatar renders at 800×800 logical = 1600–2100 physical. Serve ?w=360 variant for picker chips, full res only for export.
• Immutable caching. Content-hashed paths → Cache-Control: public, max-age=31536000, immutable. First Freetown user pays cold-cache; rest get Lagos/Accra PoP cache in ~30 ms.
• Origin failover. If Supabase Storage 5xxs, serve last-known-good cached body. Critical on launch night.
• Hot-bundle endpoint. A /sprite/{locale}.avif route returning pre-packed sprite-sheet. One request, ~5 MB AVIF for whole catalog, edge-cached forever.

Cost rough-math

CF Workers Paid: $5/mo flat + $0.50/M requests over 10M. 5,000 users × ~20 trait requests/signup = 100k requests over launch night. Trivially under included tier. Total marginal cost: ~$5/mo.

Image transformations are the gotcha. CF Images binding counts every Worker invocation as a transformation regardless of dedup — $0.50/1k transforms after 5k free. Naive use → 100k transforms = $47.50 for launch night. Solution: cache aggressively in caches.default + serve cached body without re-hitting binding. Bill stays under $20.

R2 as backing: $0.015/GB-month, zero egress to CF Workers. 37 MB of source traits = $0.0005/mo. Move canonical bucket from Supabase Storage to R2 — origin egress disappears.

Does the current plan survive this?

Free tier: hard no. 200 concurrent realtime, 500 MB DB, 50k MAU cap. We exhaust MAU on launch night.

Pro ($25/mo): survives quota-wise — 100k MAU, 8 GB DB, 500 realtime. Postgres connection limit is the bottleneck. Default max_connections on Pro: ~60 direct + ~200 via pooler. At 80–150 req/s through PgBouncer in transaction mode, OK if every query is <100 ms. Hot RPC (generate_sporthead_handle) is easily <50 ms. Risk is cold pool at peak burst.

Team ($599/mo): not needed if we cache read paths at edge.

Worst case: half the cohort signs up in 10 min after the main fight

2,500 sessions × ~40 round-trips = 100,000 requests in 600 seconds = ~165 req/s sustained, bursts to ~400 req/s. PgBouncer pool will bottleneck; auth.signUp is the most expensive single call and isn't poolable the same way. We will see 503 too many connections.

Mitigation: rate-shape the burst with a CF Worker queue in front. Cap to 50 req/s to Supabase; queue the rest with 5–30s "you're in line" UX. Combined with edge cache for trait registry / handle generator, sustained Dublin traffic drops ~60%. Tested, this is survivable on Pro.