Performance rescue · 2025
Mobile conversion was roughly a third of desktop. Everyone assumed a design problem. The analytics said otherwise: bounce rate spiked at the exact moment the page was visible but not yet interactive, and the median customer device was several generations behind the team's test phones.
The first commit was a CI job that ran Lighthouse against a mid-tier device profile with 4x CPU throttling on every pull request, and failed the build if the interaction budget regressed. Before that, "is this faster?" was a matter of opinion. After it, it was a number in the PR.
The bundle was 890KB gzipped. A dependency treemap found three things doing most of the damage: a full icon package imported as a namespace, a date library with every locale bundled, and a carousel that shipped a physics engine to move some pictures sideways.
Product images were served at 2000px wide regardless of viewport. Correct `sizes` attributes plus AVIF with a WebP fallback cut the median image payload by about four fifths. The hero got `fetchpriority="high"` and an explicit preload; everything below the fold got `loading="lazy"` and hard-coded dimensions to stop the layout shifting under the user's thumb.
// sizes tells the browser how wide this will *render*, so it can
// pick the right source before layout. getting it wrong silently
// downloads the largest candidate.
<Image
src={product.image}
alt={product.title}
width={800}
height={800}
sizes="(max-width: 640px) 92vw, (max-width: 1024px) 45vw, 380px"
priority={isAboveFold}
/>