Site Hizi Optimizasyonu: Web Performansini Artirma

Site Hizi Neden Kritik?

Site hizi, hem kullanici deneyimini hem de arama motoru siralamalarini dogrudan etkileyen en onemli teknik faktorlerden biridir. Google, Core Web Vitals metriklerini resmi siralama faktoru olarak kullanmaktadir. Arastirmalara gore, sayfa yukleme suresi 1 saniyeden 3 saniyeye ciktiginda hemen cikma orani (bounce rate) %32 artar. 5 saniyeye ciktiginda bu oran %90'a ulasir. Bu rehberde, sitenizin hizini optimize etmek icin Core Web Vitals odakli kapsamli bir kilavuz sunuyoruz.

Core Web Vitals: Uc Temel Metrik

Google'in 2024 guncellmesiyle birlikte FID metrigi yerine INP (Interaction to Next Paint) gecmistir. Guncel Core Web Vitals metrikleri sunlardir:

1. LCP (Largest Contentful Paint)

LCP, sayfanin gorunen alanindaki en buyuk icerik elemaninin (gorsel, video, metin blogu) render edilme suresini olcer. Kullanicilarin sayfanin "yuklendigini" hissettigi an ile dogrudan iliskilidir.

LCP Optimizasyon Teknikleri

• Hero gorselini optimize edin: LCP elemani genellikle hero gorselidir. WebP/AVIF formati kullanin, boyutu kucultun.
• Preload kullanin: LCP elemanini <link rel="preload"> ile oncelikli yukleyin.
• Sunucu yanit suresini (TTFB) azaltin: CDN kullanin, sunucu tarafinda cache uygulayin.
• Render-blocking kaynaklari eleyin: Kritik olmayan CSS ve JS'yi erteleyinn.
• SSR veya SSG kullanin: Istemci tarafinda renderlama yerine sunucu tarafinda veya build zamaninda render yaparak ilk icerik gorunumunu hizlandirin.

<!-- LCP gorseli icin preload ornegi -->
<link rel="preload" as="image" href="/hero-image.webp"
      fetchpriority="high" />

2. INP (Interaction to Next Paint)

INP, sayfa yasam dongusundeki tum kullanici etkilesimlerinin (tiklama, dokunma, klavye) yanit suresini olcer. En yavas etkiliesimlerin %98'lik dilimine kadarki deger raporlanir.

INP Optimizasyon Teknikleri

• Uzun JavaScript gorevlerini parcalayin: 50ms'den uzun surren gorevleri requestIdleCallback veya scheduler.yield() ile bolun.
• Gereksiz JavaScript'i kaldirin: Kullanilmayan kodlari tree-shaking ile temizleyin.
• Event handler'lari optimize edin: Agir islemleeri debounce/throttle ile sinirlayiin.
• Ana is parcacigini serbest birakin: Agir hesaplamalari Web Worker'lara tasiyinn.
• Ucuncu parti scriptleri denetiml altina alin: Analitik, reklam ve sosyal medya scriptlerini async yukleyin veya geciktirin.

// Uzun gorevi parcalama ornegi
function processLargeList(items) {
  const chunk = 100;
  let index = 0;

  function processChunk() {
    const end = Math.min(index + chunk, items.length);
    for (let i = index; i < end; i++) {
      processItem(items[i]);
    }
    index = end;
    if (index < items.length) {
      // Tarayiciya nefes aldirin
      setTimeout(processChunk, 0);
    }
  }
  processChunk();
}

3. CLS (Cumulative Layout Shift)

CLS, sayfa yuklenirken icerik elemanlarinin beklenmedik sekilde kaymasini olcer. Kullanici yanlis butona tiklama veya okunan yeri kaybetme gibi kootu deneyimlere neden olur.

CLS Optimizasyon Teknikleri

• Gorsel boyutlarini belirtin: Tum <img> ve <video> elemanlarinda width ve height nitelikleri tanimlayin.
• Reklam alanlari icin yer ayirin: Dinamik reklamlarin boyutunu oncedeen CSS ile reservee edin.
• Font yukleme stratejisi: font-display: swap kullanin ve font dosyalarini preload edin.
• Dinamik icerik eklemeyin: Sayfa yuklendiikten sonra mevcut icerigin ustune icerik eklemeyin (stickyy banner'lar gibi).
• CSS containment: contain: layout ile elemanlarin birbirini etkilemesini onleyin.

Gorsel Optimizasyonu

Gorseller, ortalama bir web sayfasinin toplam boyutunun %50'sinden fazlasini olusturur. Gorsel optimizasyonu, site hizi icin en etkili iyilestirme alanlarindan biridir.

• Modern formatlar: WebP (%30 daha kucuk) veya AVIF (%50 daha kucuk) kullanin. <picture> elemaniyla fallback saglayin.
• Responsive gorseller: srcset ve sizes nitelikleriyle cihaza uygun boyutlar sunun.
• Lazy loading: Viewport disindaki gorseller icin loading="lazy" kullanin.
• Boyut sikiistirma: TinyPNG, Squoosh veya Sharp kutuphanesi ile kaliteyi bozmadan dosya boyutunu kucultun.
• CDN uzerinden sunun: Gorsel CDN'leri (Cloudinary, imgix) otomatik format ve boyut optimizasyonu saglar.

<!-- Responsive gorsel ornegi -->
<picture>
  <source
    srcset="/img/hero-400.avif 400w,
            /img/hero-800.avif 800w,
            /img/hero-1200.avif 1200w"
    type="image/avif" />
  <source
    srcset="/img/hero-400.webp 400w,
            /img/hero-800.webp 800w,
            /img/hero-1200.webp 1200w"
    type="image/webp" />
  <img
    src="/img/hero-800.jpg"
    alt="Hero gorsel aciklamasi"
    width="1200" height="600"
    loading="eager"
    fetchpriority="high" />
</picture>

Code Splitting ve Lazy Loading

JavaScript paket boyutunuzu kucultmek, hem ilk yukleme suresini hem de INP performansini iyilestirir.

• Route-based splitting: Her sayfa icin ayri JavaScript paketi olusturun. Next.js bunu varsayilan olarak yapar.
• Dynamic import: Agir bilesenileri dynamic import() ile ihtiyac duyulduugunda yukleyin.
• Tree shaking: Kullanilmayan export'lari build aracinin otomatik temizlemesini saglayin.
• Bundle analizi: webpack-bundle-analyzer veya @next/bundle-analyzer ile paket icerigini inceleyin.

// Next.js dynamic import ornegi
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(
  () => import('../components/HeavyChart'),
  {
    loading: () => <p>Grafik yukleniyor...</p>,
    ssr: false
  }
);

Onbellekleme (Caching) Stratejileri

• Browser caching: Statik kaynaklar (CSS, JS, gorseller) icin uzun sureli Cache-Control basliklari belirleyin. Icerik degistiginde dosya adini (hash) degistirin.
• CDN caching: Cloudflare, Fastly veya Vercel Edge Network ile global onbellekleme saglayin.
• Service Worker: Tekrarlayan ziyaretlerde aninda yukleme icin service worker ile offline-first strateji uygulayin.
• Sunucu tarafii cache: Veritabani sorgulari ve API yanitlari icin Redis veya in-memory caching kullanin.

# Optimal Cache-Control baslik ornegi
# Statik varliklar (degismez, hash'li dosya adlari)
Cache-Control: public, max-age=31536000, immutable

# HTML sayfalari (sik degisen)
Cache-Control: public, max-age=0, must-revalidate

# API yanitlari
Cache-Control: private, max-age=60, stale-while-revalidate=300

Sunucu ve Altyapi Optimizasyonu

• HTTP/2 veya HTTP/3: Multiplexing ile paralel kaynak yukleme saglayiin. Modern hosting salaglayicilari genellikle destekler.
• Gzip/Brotli sikiistirma: Metin tabanli kaynaklari (HTML, CSS, JS) Brotli ile %20-30 daha etkili sikistirin.
• DNS prefetch: Ucuncu parti domainler icin <link rel="dns-prefetch"> kullanin.
• Preconnect: Kritik ucuncu parti kaynaklari icin <link rel="preconnect"> ile erken baglanti kurun.
• Edge computing: Vercel Edge Functions veya Cloudflare Workers ile kullaniciya yakin sunucu yaniti saglayin.

Olcum Araclari

Sonuc: Site hizi optimizasyonu, tek seferlik bir calisma degil, surekli bir surecitir. Core Web Vitals metriklerini duzenli olcun, gercek kullanici verilerini takip edin ve her yeni ozellik veya icerik eklemesiinde performans etkisini degerlendirin. Megis olarak, musterilerimizin web sitelerini en yuksek hiz standartlarinda tutmak icin surekli performans izleme ve optimizasyon hizmeti sunuyoruz.