Overview
Perfect scores don't come from luck.
This article documents the specific optimizations and tradeoffs made to hit every green metric in production.
It shows the work behind a clean scoreboard: asset loading, rendering paths, and interaction responsiveness treated as first-class concerns.
The problem
Initial audits showed poor LCP, high CLS, and sluggish INP.
The gap between current and target metrics was significant, and each vitals signal pointed at a different root cause.
- Largest Contentful Paint was dominated by late, unoptimized asset delivery.
- Cumulative Layout Shift came from late-loading fonts and images without reserved space.
Approach
Systematic optimization across the rendering path.
I approached it systematically: asset loading, rendering paths, layout stability, and interaction responsiveness.
Each change was measured against the field data so optimization stayed tied to real user experience rather than lab scores alone.
Solution
A step-by-step account of what actually worked.
The solution is a step-by-step account of changes made, including what worked, what didn't, and what was over-optimization.
The honest tradeoffs are part of the value: not every micro-optimization earned its place.
Implementation
Published on Medium with before and after metrics.
The article was published on Medium with before and after metrics and code-level changes for each vitals signal.
Metrics
LCP, CLS, and INP measured against field data.
Changes
Asset loading, layout reservation, and interaction tuning.
Format
Medium article with code-level before and after.
Results
What changed.
The work achieved consistent 90+ scores across all Core Web Vitals and became a benchmark for future projects.
Links