Performance
Whatbot is built to feel instant. Here’s what makes it fast, front to back.
The app is served through a CDN (Cloudflare) in front of the origin:
- Edge caching of static assets — JS/CSS bundles, fonts, images are served from the nearest edge, not the origin server.
- TLS + HTTP/2/3 terminated at the edge, close to the user.
- The origin exposes only the reverse proxy (443) — app ports are never public.
Caching layers
Section titled “Caching layers”| Layer | What it caches |
|---|---|
| CDN edge | Static bundles + assets (immutable, content-hashed filenames) |
| Browser | Hashed /_next/static/* assets cached long-term; a new build busts them automatically |
| In-app | The inbox keeps conversations/messages in client state and revalidates in the background, so switching chats is instant |
Lazy loading & code splitting
Section titled “Lazy loading & code splitting”- Route-level skeletons — every page ships a
loading.tsx, so navigating shows a shape-matched skeleton immediately while the route loads. No blank screens. - Automatic code splitting — each route only downloads the JavaScript it needs.
- Dynamic imports — heavy components (maps, editors) are loaded on demand with a skeleton fallback, keeping the initial bundle small.
- Font optimization — self-hosted fonts with
display: swap(zero layout shift, no blocking external request).
Production build
Section titled “Production build”The frontend runs an optimized production build (next build + next start):
minified, tree-shaken, pre-compiled routes — no compile-on-first-visit latency.
Instant-feel UI
Section titled “Instant-feel UI”The inbox uses a hand-tuned real-time stack so it never feels like it’s “loading”:
- Optimistic sends — your message appears instantly, then reconciles with the server response.
- Live updates over WebSocket, with a polling backstop (and visibility-gating) so it stays current even if the socket blips.
- Content-shaped skeletons while data streams in, instead of spinners.
- Debounced + abortable search/typing so keystrokes never lag.