Next.js ile Web Performans Optimizasyonu: Kapsamlı Rehber

Web performansı artık sadece "nice to have" değil, zorunluluk. Google'ın Core Web Vitals'ı sıralama faktörü yapmasıyla, yavaş siteler hem kullanıcı hem de SEO açısından cezalandırılıyor.

Core Web Vitals Nedir?

Google'ın belirlediği üç temel metrik:

• LCP (Largest Contentful Paint): En büyük içeriğin yüklenme süresi - hedef < 2.5s
• INP (Interaction to Next Paint): Etkileşim yanıt süresi - hedef < 200ms
• CLS (Cumulative Layout Shift): Görsel kararlılık - hedef < 0.1

Next.js'in Performans Avantajları

Next.js, performans optimizasyonlarını "built-in" olarak sunar:

1. Otomatik Code Splitting

Her sayfa sadece ihtiyacı olan JavaScript'i yükler.

// Bu import otomatik olarak ayrı chunk'a alınır
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false // Client-only component
});

2. Image Optimization

next/image komponenti otomatik olarak:

• WebP/AVIF formatına dönüştürür
• Lazy loading uygular
• Responsive srcset oluşturur
• Blur placeholder ekler

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero görsel"
  width={1200}
  height={600}
  priority // LCP için önemli görsellerde kullan
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

3. Font Optimization

next/font ile Google Fonts bile self-host edilir:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

Pratik Optimizasyon Teknikleri

LCP İyileştirme

1. Hero görseline priority ekle
2. Critical CSS'i inline yap
3. Üçüncü parti scriptleri ertele

// Script'leri stratejik yükle
<Script
  src="https://analytics.com/script.js"
  strategy="lazyOnload" // Sayfa yüklendikten sonra
/>

CLS İyileştirme

1. Görsellere width/height ver
2. Font-display: swap kullan
3. Skeleton loader'lar ekle

/* Layout shift önleme */
.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

INP İyileştirme

1. Heavy computation'ları Web Worker'a taşı
2. Event handler'ları debounce et
3. React.memo ile gereksiz render'ları önle

Caching Stratejileri

Static Generation (SSG)

Mümkün olan her yerde statik sayfa oluşturun:

// Sayfa build-time'da oluşturulur
export async function generateStaticParams() {
  const products = await getProducts();
  return products.map((p) => ({ slug: p.slug }));
}

Incremental Static Regeneration (ISR)

Statik sayfaları periyodik olarak güncelleyin:

export const revalidate = 3600; // Her saat yenile

On-Demand Revalidation

Webhook ile anında güncelleme:

// API route
export async function POST(request: Request) {
  revalidatePath('/products');
  return Response.json({ revalidated: true });
}

Gerçek Dünya Sonuçları

MEF Üniversitesi projesinde elde ettiğimiz sonuçlar:

Sonuç

Next.js, doğru kullanıldığında mükemmel performans sunar. Önemli olan, framework'ün sağladığı araçları bilinçli kullanmak ve ölçümlemeyi sürekli yapmaktır.

Pro Tip: Vercel Analytics veya Web Vitals API ile gerçek kullanıcı verilerini takip edin. Lab verileri yanıltıcı olabilir.

Sitenizin performansını iyileştirmek mi istiyorsunuz? Ücretsiz performans analizi için bizimle iletişime geçin.