Next.js 16 ile Performans Optimizasyonu: Core Web Vitals Skorlarini Zirveye Tasima Rehberi

Web Performansı = Gelir

Google'ın 2025 araştırmasına göre, sayfa yükleme süresi 1 saniye arttığında dönüşüm oranı %7 düşüyor. Mobil kullanıcıların %53'ü 3 saniyeden fazla yüklenen siteleri terk ediyor. Core Web Vitals artık sadece SEO sıralama faktörü değil, doğrudan gelir etkisi olan bir metrik.

Next.js 16, performans optimizasyonu için yeni nesil araçlar ve teknikler sunuyor. Bu rehberde tüm bunları adım adım inceliyoruz.

Core Web Vitals 2026: Yeni Metrikler

Google, 2024'te First Input Delay (FID) metriğini Interaction to Next Paint (INP) ile değiştirdi. 2026 itibarıyla ölçülen üç temel metrik:

1. Largest Contentful Paint (LCP)

Sayfanın en büyük içerik öğesinin ne kadar sürede render edildiğini ölçer.

• İyi: ≤ 2.5 saniye
• İyileştirme gerekli: 2.5 - 4 saniye
• Kötü: > 4 saniye

2. Interaction to Next Paint (INP)

Kullanıcı etkileşimlerinin (tıklama, dokunma, klavye) ne kadar hızlı yanıt verdiğini ölçer.

• İyi: ≤ 200 ms
• İyileştirme gerekli: 200 - 500 ms
• Kötü: > 500 ms

3. Cumulative Layout Shift (CLS)

Sayfa yüklenirken içeriklerin ne kadar "kaydığını" ölçer.

• İyi: ≤ 0.1
• İyileştirme gerekli: 0.1 - 0.25
• Kötü: > 0.25

Next.js 16 Yenilikleri ve Performans Etkisi

Turbopack Production Build

Next.js 16'nın en büyük yeniliği, Turbopack'in artık production build'lerde de kullanılabilmesi. Webpack'e kıyasla:

• Build süresi %70 daha hızlı
• Hot Module Replacement (HMR) 10ms altında
• Bundle boyutu %15-25 daha küçük (tree shaking iyileştirmeleri sayesinde)

React Server Components (RSC) Optimizasyonları

Server Components artık varsayılan. Bu ne anlama geliyor?

// Server Component — JavaScript gonderilmez
export default async function BlogList() {
  const posts = await db.post.findMany();
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Altın kural: "use client" sadece gerçekten etkileşim gerektiren bileşenlerde kullanın. Her gereksiz "use client" JavaScript bundle'ınızı büyütür.

Streaming SSR ve Suspense

Kullanıcı sayfanın tamamının yüklenmesini beklemek zorunda değil. Streaming SSR ile içerik parça parça gönderilir:

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Hero />
      <Suspense fallback={<LoadingSkeleton />}>
        <BlogPosts />
      </Suspense>
      <Suspense fallback={<LoadingSkeleton />}>
        <Testimonials />
      </Suspense>
    </div>
  );
}

Bu teknikle LCP skorunu %40-60 iyileştirmek mümkün.

LCP Optimizasyon Teknikleri

LCP skoru genellikle hero görseli veya başlık fontu tarafından belirlenir. İşte somut adımlar:

1. Görselleri Optimize Edin

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

2. Font Stratejisi

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

const inter = Inter({
  subsets: ['latin', 'latin-ext'],
  display: 'swap',
  preload: true,
  fallback: ['system-ui', 'arial']
});

3. Critical CSS Inline

Next.js 16 otomatik olarak above-the-fold CSS'i inline eder. Ek olarak:

• Kullanılmayan CSS'i lazy load edin
• Tailwind CSS'in content konfigürasyonunu doğru ayarlayın
• CSS-in-JS kütüphanelerinden kaçının (runtime maliyeti yüksek)

INP Optimizasyon Teknikleri

INP, kullanıcı etkileşimlerine verilen yanıt hızını ölçer. React 19'un Concurrent Features'ları burada kritik:

useTransition ile Ağır Güncellemeleri Erteleyin

'use client';
import { useTransition, useState } from 'react';

export function SearchFilter({ items }) {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');

  function handleChange(e) {
    setFilter(e.target.value);
    startTransition(() => {
      setFilteredItems(items.filter(i => i.name.includes(e.target.value)));
    });
  }
}

Event Handler Optimizasyonları

• Scroll event'lerinde passive: true kullanın
• Debounce ve throttle pattern'leri uygulayın
• Ağır hesaplamaları Web Worker'lara taşıyın

CLS Optimizasyon Teknikleri

Layout shift'in en yaygın sebepleri:

1. Boyut belirtilmemiş görseller: Her Image bileşeninde width ve height belirtin
2. Dinamik içerik enjeksiyonu: Reklam alanları, cookie bannerlar için yer ayırın
3. Web fontları: font-display: swap ve fallback font boyutunu eşleştirin
4. Lazy loaded içerik: Skeleton placeholder'lar kullanın

Exludio.com'da Uyguladığımız Sonuçlar

Bu teknikleri kendi sitemizde uygulayarak elde ettiğimiz sonuçlar:

Metrik	Önce	Sonra	İyileşme
LCP	3.2s	1.1s	%66 ↓
INP	280ms	85ms	%70 ↓
CLS	0.18	0.02	%89 ↓
Lighthouse Skoru	72	98	+26 puan

Sonuç: Performans Sürekli Bir Süreçtir

Web performansı bir kez yapıp bırakılacak bir iş değildir. Her yeni özellik, her yeni kütüphane potansiyel bir performans riski taşır. Next.js 16'nın sunduğu araçlarla bu riskleri minimize edebilir ve kullanıcılarınıza en iyi deneyimi sunabilirsiniz.

Web sitenizin performans analizi ve optimizasyonu için Exludio ile iletişime geçin →