HB www.hb4.space
← Back to all publications
Web Performance

Modern Web Performance: Core Web Vitals and Edge-Side Rendering

How to achieve sub-second TTFB, eliminate Largest Contentful Paint delays, and eradicate Cumulative Layout Shift with SSR streaming architectures.

By HB • • 6 min read
TRADITIONAL CLIENT SPA (LCP: ~1,500ms - HIGH LATENCY) HTML (100ms) Download 800KB JS (400ms) Client API Fetch (350ms) × Late LCP (~1,500ms) EDGE SSR STREAMING (LCP: ~280ms - SUB-SECOND) TTFB (18ms) SSR Streaming (150ms) ✓ LCP Ready (280ms) ⚡ 5.3x Faster First Paint Core Web Vitals Benchmark Targets LCP < 2.5s (Target: 280ms) • INP < 200ms • CLS < 0.1 • 100% Green Score ✓ Edge SSR streams bytes immediately before client JS downloads complete

The Real-World Impact of Latency

Web performance is not merely an aesthetic metric; Google search ranking and conversion rates depend directly on Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Why Client-Side SPAs Struggle with LCP

Single Page Applications (SPAs) that deliver an empty HTML root along with massive JavaScript bundles suffer from serialized waterfalls:

  1. Browser downloads and parses initial HTML (100ms)
  2. Browser requests 800KB bundle (300ms)
  3. JavaScript executes and initiates API call (250ms)
  4. API returns JSON data and DOM renders hero element (300ms)

Total time to LCP frequently exceeds 1.5 seconds, even on fast cellular connections.

Edge SSR Streaming Architecture

By moving the initial HTML composition to Cloudflare Workers at the edge, response bytes begin streaming to the client within 20 milliseconds. Key assets (fonts and hero images) are preloaded immediately in the early HTTP headers before the client even finishes receiving the body.

HTTP/2 200 OK
content-type: text/html; charset=utf-8
link: </fonts/inter.woff2>; rel=preload; as=font; crossorigin
x-content-type-options: nosniff
strict-transport-security: max-age=31536000; includeSubDomains
HB

Written by HB

Writing on systems programming, backend architectures, and modern web engineering.

Continue Reading

Anycast PoP (SIN) Anycast PoP (LHR) Anycast PoP (SFO) DURABLE OBJECT ACTOR (SINGLE-WRITER) Strong In-Memory State • Zero Distributed Locks state.storage.transaction() • ACID Persistence WebSocket Hub: Low-latency sync broadcast Global Anycast Routing to Single Authoritative Edge Actor Eliminates database roundtrips & locks • Coordinated state at sub-10ms edge latency
Cloud Infrastructure

Architecting Distributed State at the Edge with Durable Objects

2026-09-01 • 7 min read
1. TYPE PARAMETER TEvents extends Record<string, any> Generic constraint ✓ Bounded input 2. CONDITIONAL INFERENCE T extends (...args: any[]) => infer ReturnType : never; Evaluated during compile-time pass 3. OUTPUT CONTRACT Strict Autocomplete ✓ Zero Any Casts ✓ Invariant Bounds EventMap['created'] Compile-Time Type Invariance & Generics Verification Self-documenting APIs • Zero runtime overhead • Prevents unsafe payload casting
TypeScript

Mastering TypeScript Generics: Patterns for Robust, Type-Safe Systems

2026-09-05 • 6 min read