Next.js Performance Tips: Från 3s till 0.5s laddningstid

Performance är inte bara en "nice to have" - det påverkar direkt din konvertering, SEO och användarupplevelse. Här är mina bästa tips för att optimera Next.js-appar.

1. Image Optimization

Före:

<img src="/hero.jpg" alt="Hero" />

Efter:

import Image from 'next/image'

<Image 
  src="/hero.jpg" 
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Resultat: -60% bildstorlek, lazy loading gratis!

2. Font Optimization

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap', // Viktigt!
})

Detta ger dig:

• Automatisk font optimization
• Ingen layout shift
• Self-hosting (ingen extra request till Google)

3. Code Splitting

// Ladda komponenter lazy
import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Laddar...</p>,
  ssr: false // Om komponenten inte behövs för SEO
})

4. Caching Strategies

// app/api/data/route.ts
export async function GET() {
  const data = await fetchData()
  
  return Response.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400'
    }
  })
}

5. Database Queries

Före:

const posts = await db.post.findMany()
const users = await db.user.findMany()

Efter:

const [posts, users] = await Promise.all([
  db.post.findMany(),
  db.user.findMany()
])

Parallella queries = halva väntetiden!

6. Bundle Analysis

npm install @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

Kör ANALYZE=true npm run build för att se vad som tar plats.

Resultat

Efter att ha implementerat dessa tips på ett projekt:

• Lighthouse Score: 65 → 98
• First Contentful Paint: 3.2s → 0.5s
• Time to Interactive: 5.1s → 1.2s
• Bundle Size: 450kb → 180kb

Takeaway

Performance optimization är inte en engångsgrej - det är en kontinuerlig process. Börja med det som ger mest bang for the buck (images och fonts), mät, och fortsätt förbättra!

Vill du ha hjälp med att optimera din Next.js app? Kontakta mig!