Next.js'te performansı ve Core Web Vitals'ı nasıl optimize edersiniz?

Question

Accepted Answer

Next.js size birçok performans aracı sunar; bunları iyi kullandığınızda Core Web Vitals'ı — LCP (yükleme), CLS (düzen kararlılığı) ve INP (etkileşimlilik) — hedeflemiş olursunuz.

İstemci JavaScript'ini minimize edin (en büyük kaldıraç)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

App Router'ın gücü daha az JS göndermektir. Ağır mantık ve veri biçimlendirmesi sunucuda kalır; yalnızca gerçekten etkileşimli "adalar" Client Components haline gelir.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Yazı tiplerini optimize edin (CLS + yükleme) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Ağır istemci bileşenlerini kodla ayırın ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Büyük, kritik olmayan istemci bileşenlerini (grafikler, editörler, modallar) tembel yükleyin, böylece ilk paketi şişirmezler. ## Yavaş içeriği akış halinde gönderin ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Agresif şekilde önbelleğe alın, kesinlikle yeniden doğrulayın ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Ölçümlere eşlenen kontrol listesi ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Ölçün, tahmin etmeyin ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Neden önemli Next.js performansı çoğunlukla **daha az JavaScript göndermek** (Server Components, kod bölme) ve yerleşik optimizerleri kullanmak (`next/image`, `next/font`, akış, önbelleğe alma) hakkındadır — her biri doğrudan bir Core Web Vital'a eşlenir. Hangi aracın hangi metriği düzelttiğini bilmek (ve tahmin etmek yerine `next build`/Lighthouse ile ölçmek) iyi LCP/CLS/INP puanlarına sistematik olarak ulaşmanın yoludur.

İstemci JavaScript'ini minimize edin (en büyük kaldıraç)

LCP görüntüsünü optimize edin

Yazı tiplerini optimize edin (CLS + yükleme)

Ağır istemci bileşenlerini kodla ayırın

Yavaş içeriği akış halinde gönderin

Agresif şekilde önbelleğe alın, kesinlikle yeniden doğrulayın

Ölçümlere eşlenen kontrol listesi

Ölçün, tahmin etmeyin

Neden önemli