Otter CyberTech
Get Startedarrow_forward
Homechevron_rightBlogchevron_rightEngineering a Perfect Lighthouse Score in Production
Performance

Engineering a Perfect Lighthouse Score in Production

Core Web Vitals aren't a design problem — they're an architecture problem. A walkthrough of the techniques we use to hit 100/100 on real-world client projects.

AS

Aryan Shrestha

Lead Architect

April 30, 20257 min read
Engineering a Perfect Lighthouse Score in Production

Why Lighthouse Scores Lie (And How to Make Them Tell the Truth)

A 100/100 in a lab environment means nothing if your real users are on a mid-range Android device on a 4G connection in a busy city. The gap between lab scores and field data is where most performance work gets lost.

We start every performance engagement by looking at CrUX data — real user measurements from Chrome — before touching a single line of code. The lab is for iteration. The field is for truth.

LCP: The One That Moves the Needle Most

Largest Contentful Paint is almost always the hero image or the above-the-fold heading. The fix is almost always the same: preload the LCP resource, use next/image with priority, and make sure your server response time is under 200ms.

The subtle killer is render-blocking resources. A single third-party script loaded synchronously in the head can add 400ms to your LCP. Audit your script loading strategy before anything else.

Every millisecond of LCP improvement is a direct conversion rate improvement. This is not a vanity metric.

CLS: The Silent UX Killer

Cumulative Layout Shift is the metric that makes users feel like the page is broken even when it loads fast. The culprits are almost always images without explicit dimensions, dynamically injected content above the fold, and web fonts that cause text reflow.

The fix for fonts is font-display: optional or preloading your font files. The fix for images is always specifying width and height. The fix for dynamic content is reserving space with skeleton loaders or min-height constraints.

arrow_backBack to Blog
schedule7 min read

More Articles

Stay in the loop

Engineering insights, delivered.

No noise. Thoughtful writing on architecture, security, and the craft of building software — twice a month.

Trusted by teams building with

cloudVercel
paymentsStripe
design_servicesFigma
dnsAWS
articleNotion
linear_scaleLinear
storageSupabase
shieldCloudflare
cloudVercel
paymentsStripe
design_servicesFigma
dnsAWS
articleNotion
linear_scaleLinear
storageSupabase
shieldCloudflare