Web Performans Optimizasyonu: Core Web Vitals Rehberi

Giriş

Yavaş site = kaybedilen müşteri.

Google'ın araştırmasına göre, sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında bounce rate %32 artıyor. 5 saniyeye çıktığında bu oran %90'a ulaşıyor.

Performans sadece kullanıcı deneyimi değil, SEO için de kritik. Google, Core Web Vitals'ı sıralama faktörü olarak kullanıyor.

Core Web Vitals Nedir?

Google'ın tanımladığı üç temel metrik:

LCP (Largest Contentful Paint)

Sayfadaki en büyük içerik öğesinin görünür olma süresi.

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

INP (Interaction to Next Paint)

Kullanıcı etkileşimlerinin (tıklama, dokunma, klavye) görsel yanıt süresini ölçer. 2024'te FID'in yerini aldı — tüm etkileşimleri kapsar, sadece ilkini değil.

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

CLS (Cumulative Layout Shift)

Sayfa yüklenirken içeriklerin ne kadar "kayma" yaptığı.

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

Nasıl Ölçülür?

Lighthouse

Chrome DevTools içinde. Simülasyon bazlı, geliştirme için ideal.

Chrome → F12 → Lighthouse → Analyze page load

PageSpeed Insights

Google'ın online aracı. Hem lab data hem gerçek kullanıcı verisi gösterir.

https://pagespeed.web.dev/

Web Vitals Extension

Chrome extension olarak gerçek zamanlı ölçüm.

Search Console

Google Search Console'da Core Web Vitals raporu. Gerçek kullanıcı verileri.

LCP Optimizasyonu

1. Görsel Optimizasyonu

Modern formatlar kullan:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Açıklama">
</picture>

Boyut belirt:

<img src="hero.jpg" width="1200" height="600" alt="Hero">

Lazy loading:

<img src="below-fold.jpg" loading="lazy" alt="Alt içerik">

2. Font Optimizasyonu

Preload kritik fontlar:

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

Font-display swap:

@font-face {
  font-family: 'Manrope';
  font-display: swap;
  src: url('/fonts/manrope.woff2') format('woff2');
}

3. Sunucu Optimizasyonu

• CDN kullanımı
• GZIP/Brotli sıkıştırma
• HTTP/2 veya HTTP/3
• Server-side caching

INP Optimizasyonu

1. JavaScript Azaltma

Code splitting:

// Dinamik import
const HeavyComponent = dynamic(() => import('./HeavyComponent'));

Tree shaking: Kullanılmayan kod otomatik çıkarılsın. Modern bundler'lar bunu yapar.

2. Main Thread Boşaltma

Web Workers: Ağır hesaplamaları ana thread'den ayırın.

requestIdleCallback: Kritik olmayan işleri boş zamana erteleyin.

3. Third-party Script Kontrolü

Analytics, chat widget, reklam scriptleri INP'yi olumsuz etkiler. Defer veya async kullanın:

<script src="analytics.js" defer></script>

CLS Optimizasyonu

1. Boyut Rezervasyonu

Görseller için:

<img src="photo.jpg" width="800" height="600" alt="Fotoğraf">

Videolar için:

.video-container {
  aspect-ratio: 16 / 9;
}

2. Font FOUT Önleme

@font-face {
  font-family: 'Manrope';
  font-display: optional; /* veya swap */
}

3. Dinamik İçerik

Reklamlar, embed'ler için yer ayırın:

.ad-slot {
  min-height: 250px;
}

Next.js Özel Optimizasyonlar

Image Component

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority // LCP için
  alt="Hero"
/>

Font Optimization

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

const manrope = Manrope({ subsets: ['latin'] });

Script Component

import Script from 'next/script';

<Script src="analytics.js" strategy="lazyOnload" />

Pratik Checklist

Zorunlu (Her Projede)

• Görsel boyutları belirli
  
• WebP/AVIF formatları
  
• Font preload
  
• Lazy loading (fold altı)
  
• GZIP sıkıştırma
  

Önerilen

• CDN kullanımı
  
• Code splitting
  
• Critical CSS inline
  
• Third-party script audit
  

İleri Seviye

• Service Worker (PWA)
  
• Edge caching
  
• Prefetching stratejisi
  

Sonuç

Performans optimizasyonu, proje bittikten sonra yapılan bir şey değil. Baştan düşünülmeli, sürekli ölçülmeli.

Hedeflerimiz:

• Lighthouse Performance: 90+
• LCP: < 2.5s
• INP: < 200ms
• CLS: < 0.1

Bu metrikleri her projede takip ediyoruz.