Web Performans Optimizasyonu: Core Web Vitals

Core Web Vitals, Google'ın web sayfası deneyimini ölçmek için belirlediği metriklerdir. 2021'den itibaren sıralama faktörü olarak kullanılan bu metrikler, hem kullanıcı deneyimi hem de SEO için kritik öneme sahiptir.

Core Web Vitals Nedir?

LCP (Largest Contentful Paint)

Sayfadaki en büyük içerik öğesinin görünür hale gelme 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şimlerine yanıt süresi (FID'ın yerini aldı).

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

CLS (Cumulative Layout Shift)

Görsel kararsızlık, beklenmedik layout kaymaları.

• İyi: ≤ 0.1
• İyileştirme Gerekli: 0.1 - 0.25
• Kötü: > 0.25

Ölçüm Araçları

• PageSpeed Insights: Google'ın resmi aracı
• Lighthouse: Chrome DevTools içinde
• Web Vitals Extension: Chrome eklentisi
• Search Console: Core Web Vitals raporu
• web-vitals npm: JavaScript kütüphanesi

LCP Optimizasyonu

Sunucu Yanıt Süresi (TTFB)

• CDN kullanın
• Server-side caching
• Database query optimizasyonu
• Gzip/Brotli sıkıştırma

Render-Blocking Kaynaklar

<!-- Critical CSS inline -->
<style>
  /* Above-the-fold CSS */
</style>

<!-- Non-critical CSS async -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- JavaScript defer -->
<script src="app.js" defer></script>

Resim Optimizasyonu

<!-- Modern format + lazy loading -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" loading="lazy" width="800" height="600" alt="...">
</picture>

<!-- LCP resmi için preload -->
<link rel="preload" as="image" href="hero.webp">

INP Optimizasyonu

JavaScript Optimizasyonu

// Long task'ları parçala
function processLargeArray(items) {
  const CHUNK_SIZE = 100;
  let index = 0;
  
  function processChunk() {
    const chunk = items.slice(index, index + CHUNK_SIZE);
    chunk.forEach(processItem);
    index += CHUNK_SIZE;
    
    if (index < items.length) {
      requestIdleCallback(processChunk);
    }
  }
  
  processChunk();
}

Event Handler Optimizasyonu

• Debounce/throttle kullanın
• Passive event listeners
• Event delegation
• Web Workers for heavy computation

CLS Optimizasyonu

Boyut Belirleme

<!-- Her zaman width/height belirtin -->
<img src="image.jpg" width="400" height="300" alt="...">

<!-- CSS aspect-ratio -->
<style>
.video-container {
  aspect-ratio: 16 / 9;
}
</style>

Font Loading

/* font-display: swap kullanın */
@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

/* Veya preload */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Dinamik İçerik

• Placeholder/skeleton kullanın
• Reklam alanları için min-height
• Transform animasyonları tercih edin

Performans Monitoring

// web-vitals kütüphanesi
import { onCLS, onINP, onLCP } from "web-vitals";

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon("/analytics", body);
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Checklist

• ☐ CDN aktif
• ☐ Resimler optimize (WebP, lazy loading)
• ☐ CSS/JS minimize ve defer
• ☐ Font preload ve font-display: swap
• ☐ Image dimensions belirli
• ☐ Third-party scripts optimize
• ☐ Server response < 200ms

Core Web Vitals optimizasyonu, hem kullanıcı deneyimini hem de SEO performansını doğrudan etkiler. Düzenli ölçüm ve iteratif iyileştirme ile hedef değerlere ulaşabilirsiniz.