⚡ The Lab · Performance

Performance Monitor

Live Core Web Vitals measurement of this very site. Real scores from your browser, with the exact optimisations that achieve them.

“Performance isn't a feature — it's a foundation. Every millisecond is a user you might lose.”

How this works

RealFCP · TTFBCaptured directly from your browser's Performance API on this page load — these are your actual numbers.
RealRequest WaterfallBuilt from the Navigation Timing API — DNS lookup, TCP connect, server response, download, and DOM parse times are all genuine.
Coming SoonLCP · CLS · INPThese require async observation throughout the page lifecycle via the web-vitals package. Currently showing realistic simulated scores for this demo — real wiring is coming soon.
—
LCPLargest Contentful Paint
⏳ Measuring

How long until the largest visible element (image or text block) is rendered.

✅ Good: ≤ 2,500ms⚠️ OK: ≤ 4,000ms
▶How we optimised LCP on this site
  • Server-side rendering ensures HTML arrives with content (no waterfall)
  • next/font with font-display: swap eliminates render-blocking fonts
  • next/image with priority prop on above-the-fold images
  • Vercel Edge Network serves assets from the nearest CDN node
—
FCPFirst Contentful Paint
⏳ Measuring

Time until the first text or image is painted on screen.

✅ Good: ≤ 1,800ms⚠️ OK: ≤ 3,000ms
▶How we optimised FCP on this site
  • Minimal critical CSS inlined via Tailwind's JIT compiler
  • No render-blocking JavaScript on initial load
  • HTTP/2 multiplexing for parallel resource loading
  • Preconnect hints for Google Fonts loaded via next/font
—
TTFBTime to First Byte
⏳ Measuring

Time from navigation start until the first byte of the response arrives.

✅ Good: ≤ 800ms⚠️ OK: ≤ 1,800ms
▶How we optimised TTFB on this site
  • Static pages served directly from Vercel's edge CDN — no server compute on each request
  • ISR (Incremental Static Regeneration) for dynamic pages
  • Vercel Edge Network with global PoPs close to every user
  • Efficient Next.js App Router with React Server Components
—
CLSCumulative Layout Shift
⏳ Measuring

Measures unexpected visual shifts in page content as it loads.

✅ Good: ≤ 0.1⚠️ OK: ≤ 0.25
▶How we optimised CLS on this site
  • next/image always reserves space before image loads (width/height required)
  • next/font eliminates FOUT (Flash of Unstyled Text) — fonts load with layout reserved
  • No dynamically injected content above the fold
  • Explicit size on all skeleton/placeholder elements
—
INPInteraction to Next Paint
⏳ Measuring

Responsiveness to user interactions — clicks, taps, key presses.

✅ Good: ≤ 200ms⚠️ OK: ≤ 500ms
▶How we optimised INP on this site
  • Server Components reduce client-side JavaScript bundle by ~40%
  • "use client" only on components that actually need interactivity
  • Framer Motion deferred to idle time with useReducedMotion respect
  • No heavy third-party scripts blocking the main thread

🛠 Stack powering these scores

Next.js 15 App RouterReact Server ComponentsVercel Edge CDNnext/fontnext/imageTailwind CSS JITHTTP/2Vercel Analytics