Next.js'te Core Web Vitals'ı Yeşile Çekmek: Pratik Rehber
LCP, INP ve CLS'i gerçek projelerde yeşile taşıyan, App Router'a özgü pratik adımlar — ölçümden uygulamaya.
Deniz Selupuçin9 dk okuma
…
LCP, INP ve CLS'i gerçek projelerde yeşile taşıyan, App Router'a özgü pratik adımlar — ölçümden uygulamaya.
Bir siteyi yayına almadan önce mutlaka kontrol ettiğim teknik SEO maddeleri.
Kurumsal bir siteyi yayına almadan önce mutlaka geçilmesi gereken, atlanırsa pahalıya patlayan teknik SEO maddeleri.
LCP, INP ve CLS'i yeşile taşımak için gerçek projelerden çıkardığım pratik adımlar.
Genelde 24 saat içinde dönüş yapıyorum.
Core Web Vitals, Google'ın gerçek kullanıcı deneyimini ölçtüğü üç metrikten oluşur: yükleme hızı (LCP), etkileşim gecikmesi (INP) ve görsel kararlılık (CLS). Bu metrikler yalnızca bir teknik puan değil; doğrudan dönüşüm oranına ve arama sıralamasına bağlı. Yavaş bir sayfa, kullanıcı daha içeriği görmeden terk ettiği için en iyi tasarımı bile görünmez kılar.
Bu yazıda teoriyi değil, Next.js App Router projelerinde tekrar tekrar işe yarayan somut adımları paylaşıyorum.
Tahminle optimizasyon en pahalı hatadır. İki ölçüm katmanı kullanın:
web-vitals metrikleri — Google'ın sıralamada kullandığı veri budur.Next.js'te saha verisini birkaç satırla toplayabilirsiniz:
// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";
export function WebVitals() {
useReportWebVitals((metric) => {
// Plausible/analytics'e gönder (PII yok)
navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
});
return null;
}
Lab yeşil ama saha kırmızıysa sorun genellikle gerçek ağ koşulları, üçüncü taraf scriptler veya cihaz çeşitliliğindedir.
LCP genellikle hero görseli ya da büyük bir başlıktır. Hedef: 2.5 saniyenin altı.
next/image ile priority verin; böylece görsel lazy-load edilmez ve preload edilir.sizes özniteliğini doğru tanımlayın; gereksiz büyük görsel indirilmesin.font-display: swap ile metnin görünmez kalmasını önleyin.import Image from "next/image";
<Image
src={hero}
alt="Ürün arayüzü"
priority
sizes="(max-width: 768px) 100vw, 1200px"
/>;
Tek bir priority bayrağı, gerçek bir projede LCP'yi 3.4 saniyeden 1.8 saniyeye indirebiliyor.
INP (Interaction to Next Paint), FID'in yerini aldı ve sayfanın tıklamaya/yazmaya ne kadar hızlı tepki verdiğini ölçer. Hedef: 200 ms'nin altı.
INP'i bozan başlıca şey ana iş parçacığını kilitleyen büyük JavaScript yükleridir. Çözümler:
"use client" yapın. Daha az istemci JS = daha hızlı etkileşim.useDeferredValue ya da bir worker'a taşıma.next/script ile strategy="lazyOnload"; analytics ve chat widget'ları ilk etkileşimi bloklamasın.import Script from "next/script";
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />;
CLS, sayfa yüklenirken içeriğin beklenmedik biçimde zıplamasını ölçer. Hedef: 0.1'in altı. En sık nedenler ve çözümleri:
width/height veya fill + konteyner oranı verin.next/font ile fontu build'e gömün, fallback metriklerini eşleyin.next/font kullanımı CLS'i neredeyse sıfıra indirir çünkü font yüklenirken metrik kayması olmaz:
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });
Optimizasyon tek seferlik değildir; her yeni özellik performansı geri çekebilir. Bu yüzden:
priority, AVIF/WebP, doğru sizes.lazyOnload.next/font ile font; display: swap.Core Web Vitals'ı yeşile çekmek sihir değil, disiplin işidir. Doğru temelle bir kez kurduğunuzda, hız markanızın güvenilirliğine yatırım olarak geri döner.