Modern Web Performansı: Pratik Bir Rehber

Google'ın Core Web Vitals'ı arama sıralamasına dahil etmesiyle, web performansı artık sadece "iyi olsa güzel" değil, iş gereksinimleri arasına girdi.

Core Web Vitals Nedir?

Üç temel metrik:

1. LCP (Largest Contentful Paint): Sayfanın en büyük içerik öğesinin yüklenme süresi. Hedef: < 2.5 saniye.

2. INP (Interaction to Next Paint): Kullanıcı etkileşimlerinin ne kadar hızlı yanıt verdiği. Hedef: < 200ms.

3. CLS (Cumulative Layout Shift): Sayfa yüklenirken ne kadar "kayma" olduğu. Hedef: < 0.1.

Görsel Optimizasyonu

Çoğu web sitesinde en büyük performans katili: görüntüler.

Modern Formatlar

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

AVIF, WebP'den %20-30 daha küçük dosya boyutu sunuyor. Tarayıcı desteği artık %90'ın üzerinde.

Responsive Images

<img
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="image-800.jpg"
  alt="Açıklama"
>

Her cihaza uygun boyutta görüntü sunmak, mobil kullanıcılar için kritik.

JavaScript Optimizasyonu

Code Splitting

Tüm JavaScript'i tek bir dosyada yüklemek yerine, ihtiyaç duyulduğunda yüklemek:

// Kötü: Her şeyi önceden yükle
import { HeavyComponent } from './HeavyComponent';
 
// İyi: İhtiyaç olduğunda yükle
const HeavyComponent = lazy(() => import('./HeavyComponent'));

Tree Shaking

Kullanılmayan kodun bundle'dan çıkarılması için:

// Kötü: Tüm kütüphaneyi import et
import _ from 'lodash';
_.debounce(fn, 300);
 
// İyi: Sadece gerekli fonksiyonu import et
import debounce from 'lodash/debounce';
debounce(fn, 300);

Caching Stratejileri

Service Worker ile Akıllı Cache

// sw.js
const CACHE_NAME = 'v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
];
 
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cached) => cached || fetch(event.request))
  );
});

HTTP Cache Headers

# Değişmeyen statik dosyalar için
location /static/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
 
# HTML için
location / {
    expires 0;
    add_header Cache-Control "no-cache, must-revalidate";
}

Ölçüm ve İzleme

Optimize etmeden önce ölçmek şart. Kullandığım araçlar:

Sonuç

Web performansı bir maraton, sprint değil. Küçük, tutarlı iyileştirmeler zamanla büyük farklar yaratır.

En önemli tavsiyem: ölç, optimize et, tekrarla. Varsayımlara değil, verilere dayanarak hareket et.

Sorularınız için yorum bölümü... yok. Çünkü bu bir read-only blog. Ama düşüncelerinizi kendi blogunuzda paylaşabilirsiniz.