Next.js Uygulamalarında Performans Bütçesi

Bir Next.js uygulamasının performans bütçesi belirlemek, LCP < 2.5s ve CLS < 0.1 gibi hedefleri pratikte nasıl tutacağınızı anlamak demektir. Sadece sayfa hızını değil, sürekli ölçüm ve regresyon önleme altyapısını kuruyoruz.

Core Web Vitals Hedefleri

Google'ın "Good" bandı için hedefleriniz:

LCP (Largest Contentful Paint): < 2.5s
INP (Interaction to Next Paint): < 200ms
CLS (Cumulative Layout Shift): < 0.1

Bundle Analizi

@next/bundle-analyzer ile JS bundle'ını görselleştirin. Büyük bağımlılıkları tespit edip dynamic() ile lazy-load edin.

next.config.ts

TypeScript

import bundleAnalyzer from "@next/bundle-analyzer";

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
});

export default withBundleAnalyzer({
  // config
});

Image Optimizasyonu

Next.js Image bileşenini her zaman kullanın. LCP öğesi olan görsele priority prop'u ekleyin.

hero.tsx

TypeScript

<Image
  src="/hero.jpg"
  alt="Hero görseli"
  width={1200}
  height={630}
  priority          // LCP öğesi — preload
  sizes="100vw"
  quality={85}
/>