Bolt.

BSc Dissertation Artifact - Optimising Modern Web Application Performance: An Empirical Analysis of Core Web Vitals and Perceived Latency.

Jack Williams - ST20271634 - Cardiff Metropolitan University

Control→+ Images→+ RSC→+ PPR→No Delay
Baseline — Control

Legacy CSR

  • • Client-side data fetching (useEffect waterfall)
  • • Unoptimised images (<img>, no dimensions)
  • • CSS-in-JS runtime overhead (styled-components)
  • • Render-blocking Google Fonts
  • • Blocking third-party script (200ms)
  • • Pessimistic UI (loading spinners)
  • • Client-side sorting (main thread blocking)
  • • localStorage cart with sequential fetches
Open Control Store →
Stage A — Image Optimised

CSR + Optimised Images

  • • next/image (AVIF, quality 60, responsive)
  • • Blur-up placeholders
  • • fetchpriority="high" on LCP images
  • • Proper sizes attributes
  • • Still client-side rendering
  • • Still styled-components / blocking fonts
  • • Still useEffect waterfall
  • • Still pessimistic UI / localStorage cart
Open Image-Optimised Store →
Stage B — Server Components

RSC + Streaming

  • • React Server Components (zero client JS)
  • • Suspense streaming with skeleton fallbacks
  • • Server-side data fetching (single DB query)
  • • useOptimistic for instant cart updates
  • • Tailwind CSS (no runtime overhead)
  • • next/font (self-hosted, no blocking)
  • • Cookie-based cart via server actions
  • • No PPR or static generation (fully dynamic)
Open RSC Store →
Stage C — Fully Optimised

RSC + PPR + SSG

  • • Partial Prerendering (instant static shell)
  • • generateStaticParams (SSG at build time)
  • • Link prefetching (0ms navigation)
  • • All RSC optimisations from Stage B
  • • All image optimisations from Stage A
  • • Server-side sorting (DB ORDER BY)
  • • Optimistic UI + cookie cart
  • • next/image with AVIF + blur placeholders
Open Fully-Optimised Store →
Stage D — No Delay

Zero Artificial Latency

  • • All simulated delays removed
  • • No 800ms cart mutations
  • • No 1.5s stock check delay
  • • No API route latency simulation
  • • All Stage C optimisations (PPR, SSG, RSC)
  • • Isolates architecture vs simulated latency
  • • Closest to a real optimised production site
  • • Best-case Next.js performance baseline
Open No-Delay Store →

Each stage is benchmarked across No Throttling, 4G, Fast 3G, and Slow 3G network profiles.

Metrics: FCP, LCP, TBT, CLS, SI - 10 iterations per page, trimmed median.