Technical
Frontend Performance Wins That Actually Showed Up in Lighthouse
I spent a year chasing frontend performance. Most tips moved the number by a fraction. A few moved it by double digits. Here are the ones that actually showed up in Lighthouse.
Win 1: Image Pipeline Done Right
AVIF first, WebP fallback, original as last resort. Responsive sizes generated at build time. Lazy loading on everything below the fold. Width and height attributes set to prevent layout shift.
Lighthouse LCP went from 3.8 s to 1.6 s on an image-heavy page. Nothing else I did came close to this impact.
Win 2: Removing a Single Heavy Dependency
One chart library was 340 KB gzipped. I replaced it with a 12 KB alternative and a custom wrapper. Lighthouse performance jumped 18 points on dashboard pages. Audit your biggest dependency first.
npx next build && npx source-map-explorer .next/static/chunks/*.jsWin 3: Fonts Subset and Preloaded
Variable fonts, subset to the glyphs I actually use, preloaded, with font-display: swap. Dropped initial render blocking time significantly.
Win 4: Static First, Dynamic Second
Pages that rarely change became static. Pages that change often used ISR. Only truly dynamic pages were server-rendered per request. Cache hit rate went up, origin load went down, Lighthouse TBT went down.
Win 5: Third-Party Scripts in a Worker
Analytics, tag managers, widgets: all moved to Partytown or removed entirely. Third-party JS is the most common TBT killer I see in audits.
What Did Not Move the Needle
Micro-optimizing React renders Fine-tuning my webpack config Swapping state management libraries Clever code splitting at the route level beyond Next.js defaults
Each of these is a hobby. Not a performance strategy.
The Order I Now Audit In
- Images (usually biggest LCP win)
- Biggest dependencies (usually biggest bundle win)
- Fonts (usually biggest CLS win)
- Rendering strategy (usually biggest TTFB win)
- Third-party scripts (usually biggest TBT win)
Go in order. Do not skip ahead.
Reading
Web.dev performance docs are the reference. Addy Osmanis images guide is the companion.
RELATED READING
The Consulting Shift I Am Making In Year Two
After a year of writing and building, my consulting practice is changing shape. Shorter engagements. Sharper outcomes.
ReadThe Frontend Shift: Shipping Less JavaScript In Year Two
A year ago I reached for Next.js for everything. This year I often reach for nothing.
ReadThe Serverless Lesson I Would Write On A Sticky Note
After a year of shipping serverless projects, one rule explains most of the wins and all of the losses.
Read