Performance as UX

The Performance Wall

Client had a conversion problem. 3.4s LCP, 0.18 CLS, 380ms INP. Users were bouncing before interacting. Mobile abandonment at 68%. The product worked — but it didn't feel fast.

Performance Budget as Core Constraint

We treated performance metrics as hard design constraints. Every component, every image, every interaction had to pass: LCP < 1.2s, CLS < 0.1, INP < 200ms. No exceptions.

Before/After

LCP0.9s

CLS0.04

INP140ms

Conversion+34%

What We Shipped

Next-gen image formats, aggressive lazy loading, streaming SSR, preconnect to critical origins, service worker cache strategy, reduced JS bundle by 60%, eliminated render-blocking resources.

Impact

Conversion up 34%. Bounce rate down 41%. Mobile session duration up 2.3x. Performance became the product advantage.

Code Example

typescript

// Performance budget enforcement
const performanceBudget = {
  LCP: 1200, // ms
  CLS: 0.1,
  INP: 200   // ms
};

function enforcePerformance(metrics: WebVitals) {
  if (metrics.LCP > performanceBudget.LCP) {
    throw new Error('LCP budget exceeded');
  }
  if (metrics.CLS > performanceBudget.CLS) {
    throw new Error('CLS budget exceeded');
  }
  if (metrics.INP > performanceBudget.INP) {
    throw new Error('INP budget exceeded');
  }
}