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.

bash

npx next build && npx source-map-explorer .next/static/chunks/*.js

Win 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.