When I built the commerce platform for a Nairobi-based fashion label, my first performance audit was sobering. Pages that were "fast" by Western standards — Lighthouse 90+ on fibre — degraded to 8–12 second load times on a Safaricom 3G connection.

The culprits were obvious in hindsight: unoptimised images averaging 800KB, four separate render-blocking scripts (analytics, chat widget, social embed, consent banner), and a bundle that loaded everything upfront regardless of whether the user would reach those features.

Three changes had the most impact:

Images first. Next.js Image with sharp does the heavy lifting, but you still need to set explicit width/height on every image (prevents layout shift), use sizes="" attributes correctly so mobile doesn't download desktop-sized images, and convert everything to WebP with quality at 75 — not 90, not 85, 75. The difference in file size is significant; the visual difference is invisible.

Cut the third-party scripts. Every analytics script, chat widget, and pixel loads synchronously by default and blocks the main thread. Move all of them to next/script with strategy="lazyOnload". Better yet, question whether you need them at all — for the fashion client, we cut three of five third-party scripts entirely and they didn't miss any of the data.

Route-based code splitting. Next.js does this automatically, but you can go further with dynamic() for large components. The product image gallery — which includes a lightbox, zoom, and swipe handler — was 140KB. Lazy-loading it on interaction rather than on page load shaved 600ms off the initial bundle parse time on a mid-range Android.

The final result: LCP under 2s on 3G, 300+ orders in month one.