Making a Next.js portfolio feel instant

Portfolios rarely get the same performance love as production apps. Yet they are often the first impression. I treat mine like a product: measure, budget, and ship small improvements that compound.

Hero assets are the biggest pain. I serve a tightly cropped WebP avatar with priority loading, add a gradient overlay to hide compression, and lazy-load everything else. This alone shaved ~400KB from the initial payload.

Navigation needs to feel instant. I prefetch above-the-fold sections with Next.js soft navigation and keep expensive animations behind intersection observers so they only hydrate when visible.

Finally, I keep a simple performance budget in a README: under 100KB JS for the landing fold and under 200ms main-thread blocking on mid-tier devices. That constraint stops design flourishes from silently bloating the page.