Optimizing Mobile Performance in Next.js

Most developers test on MacBook Pros with Fiber internet. Real users are on mid-range Androids with 4G. Here is how to fix your Largest Contentful Paint (LCP) for the real world.

The "Works on My Machine" Problem

I recently audited a client site that felt "instant" on desktop. When we ran it through PageSpeed Insights, the mobile score was 45/100.

The culprit? A massive hero background image that was 4MB on mobile, and a "hydration" delay that blocked the main thread.

1. The `sizes` Prop is Not Optional

If you use `next/image` without a `sizes` prop, Next.js doesn't know how big the image will be. It might serve a 1080p desktop image to a 300px mobile screen.

<Image 
    src="/hero.png" 
    fill 
    // THIS is the magic line
    sizes="(max-width: 768px) 100vw, 50vw" 
    priority
    />

2. Font Optimization

Custom fonts are heavy. In Next.js 15, `next/font` automatically optimizes Google Fonts. But if you are loading custom OTF/TTF files, make sure to use `display: swap` so text is visible immediately.

3. Removing "Scroll Jank" (CLS)

Cumulative Layout Shift (CLS) happens when elements jump around as the page loads. The biggest fix? Reserve space for your images and videos.

Always define an `aspect-ratio` on your image containers.