Performance Engineering
Core Web Vitals
& Optimization
Speed is a feature. I engineer web experiences that score 100 on Lighthouse, load in under a second, and never drop a frame — measured on real devices, real networks, real data.
Lighthouse Report
Performance
Accessibility
Best Practices
SEO
The Big 4
Core Web Vitals — All Green
Google's user-experience signals that directly influence search rankings and real user satisfaction.
LCP
Largest Contentful Paint — how fast the biggest visible element loads
● GoodKey fixes:
✓ Preload hero image / font
✓ Server-side render above-fold
✓ Remove render-blocking CSS
CLS
Cumulative Layout Shift — visual stability, no elements jumping around
● GoodKey fixes:
✓ Explicit width/height on images
✓ font-display: optional
✓ Reserve space for ads/embeds
INP
Interaction to Next Paint — responsiveness to every user interaction
● GoodKey fixes:
✓ useTransition for heavy renders
✓ Break up long JS tasks (>50ms)
✓ Yield with scheduler.yield()
FCP
First Contentful Paint — when the user first sees something useful
● GoodKey fixes:
✓ Inline critical CSS
✓ Preconnect to CDN origins
✓ HTTP/3 + Early Hints
Real Projects
Before & After — Real Numbers
Every number below was measured with Lighthouse CI, WebPageTest, and Chrome UX Report — no synthetic lab simulations.
ShopSphere — Full Replatform
Migrated a 6-year-old jQuery monolith to Next.js 15 with ISR, image CDN, and Redis edge caching. Primary goal was LCP & conversion rate.
80%↓
LCP reduction
91%↓
INP reduction
92%↓
Bundle size
+89%↑
Conversions
NexusAI — Dashboard Optimization
200-metric analytics dashboard with React virtualisation, canvas-based charts, and useTransition to eliminate INP spikes during data refresh.
97%↓
INP
79%↓
LCP
+29 pts
Lighthouse
77%↓
MTTR
Techniques
My Optimization Playbook
Every technique I reach for, categorised by the vital it primarily targets.
Code Splitting
Route-based + dynamic imports. Ship only what the current page needs. Reduced initial bundle by 88% on ShopSphere.
Resource Hints
preload, prefetch, preconnect, and Early Hints (103) to front-load critical resource discovery before HTML parsing completes.
Critical CSS Inline
Inline only above-fold CSS in <head>. Defer all other stylesheets with media trick. Eliminates render-blocking entirely.
Lazy Loading
loading="lazy" on off-screen images, IntersectionObserver for heavy components, dynamic imports for third-party scripts.
Tree Shaking
ESM-only imports, sideEffect:false in package.json, custom Rollup/Vite configs to eliminate dead code paths.
ISR / Static Gen
Incremental Static Regeneration serves pre-built HTML from CDN edge. Sub-5ms TTFB globally, zero cold starts.
Toolbelt
Performance Tool Stack
Lighthouse CI
Automated perf audits on every pull request. Budget enforcement with budget.json. Never ship a regression.
WebPageTest
Deep waterfall analysis, filmstrip view, connection throttling on real mobile hardware in global PoPs.
CrUX (Chrome UX Report)
Real-user field data from Chrome users worldwide. The truth about what real users experience on real networks.
Sentry Performance
Distributed tracing, N+1 query detection, frontend transaction profiling across React component boundaries.
Vercel Speed Insights
Zero-config real-user monitoring. Per-page INP, LCP, FCP segmented by device type and geography.
Bundle Analyzer
@next/bundle-analyzer + source-map-explorer for visual treemaps of who is costing you the most bytes.
Chrome DevTools
Performance panel, Layers view, Coverage tab (dead CSS/JS), Memory profiler, and the new Performance Insights panel.
web-vitals.js
Google's official library. Measure LCP, CLS, INP, FCP, TTFB in real user sessions and send to any analytics endpoint.
Get a Free Audit
Is Your Site Fast Enough?
A 1-second delay in LCP costs ~7% conversion rate. Let me audit your Core Web Vitals, find the biggest wins, and ship a performance roadmap — for free.