CompletePerformance

Frontend Performance Engineering

Cross-product performance initiative improving LCP by 71%, INP by 83%, and CLS to 0 across 4 major product surfaces, resulting in measurable revenue impact.

CompanyRazorpay

RolePerformance Engineer

Year2023

Tech Stack

Chrome DevToolsWebPageTestSpeedCurveLighthousePerformanceObserver API

Impact

lcpLCP -71%

inpINP -83%

clsCLS = 0

The Problem

LCP averaged 5.4s, INP was 780ms (causing janky interactions), and CLS of 0.31 was causing layout instability that frustrated users and hurt SEO.

The Solution

Implemented a performance monitoring budget, profiled and fixed the top 20 performance bottlenecks, added RUM via PerformanceObserver API, and created a performance testing culture.

Architecture

SpeedCurve for continuous monitoring, custom PerformanceObserver instrumentation, and a Lighthouse CI integration that blocks PRs exceeding budget thresholds.

Key Challenges

Fixing layout shifts in a component-heavy Vue app
Reducing third-party script impact
Getting team buy-in for performance budgets

Results & Impact

LCP: 5.4s → 1.57s (-71%)

INP: 780ms → 132ms (-83%)

CLS: 0.31 → 0.00

Measured 12% revenue impact from performance improvements