Core Web Vitals Neden Bu Kadar Önemli?
Google, 2021'den itibaren Core Web Vitals'ı doğrudan sıralama faktörü olarak kullanıyor. Yavaş yüklenen bir site sadece kullanıcı kaybetmiyor, Google sıralamalarında da geriye düşüyor.
3 Temel Metrik
1. LCP (Largest Contentful Paint) — Hedef: < 2.5s
Sayfadaki en büyük içerik öğesinin (genellikle hero resmi veya başlık) yüklenme süresi.
2. CLS (Cumulative Layout Shift) — Hedef: < 0.1
Sayfa yüklenirken elementlerin kayması. "Tıklayacaktım ama düğme kaydı!" deneyimi.
3. INP (Interaction to Next Paint) — Hedef: < 200ms
Kullanıcı aksiyonuna sayfanın tepki süresi.
Next.js ile Optimizasyon Teknikleri
### Image Optimization
```jsx
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // Above-the-fold için
placeholder="blur"
/>
```
Next.js Image componenti otomatik olarak: WebP/AVIF formatı, lazy loading, boyut optimizasyonu ve placeholder sağlar.
### Font Optimization
```jsx
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap'
})
```
### Static Generation + ISR
```typescript
export const revalidate = 3600 // 1 saatte bir yenile
export async function generateStaticParams() {
// Derleme sırasında sayfaları statik oluştur
}
```
Sonuç
Next.js, doğru kullanıldığında web performansında büyük avantaj sağlıyor. BilPixel olarak tüm web projelerimizde Core Web Vitals optimizasyonunu standart pratik olarak uyguluyoruz.