Hızlı Özet (TL;DR)
Core Web Vitals, Google’ın bir web sayfasının gerçek kullanıcı deneyimini (Real User Monitoring - RUM) ölçmek için kullandığı 3 temel performans metriğidir: LCP (Yükleme Hızı), INP (Etkileşim Tepki Süresi) ve CLS (Görsel Kararlılık). Bu üç metrikte “İyi” (Yeşil) seviyesine ulaşamayan web siteleri, Google arama sonuçlarında üst sıralara çıkmakta zorlanır. Bu rehberde metriklerin teknik arka planını ve kod seviyesinde nasıl iyileştirileceğini ele alıyoruz.
Core Web Vitals Eşik Değerleri ve Anlamları
| Metrik | Ne Ölçer? | İyi (Yeşil Hedef) | Geliştirilmeli (Turuncu) | Zayıf (Kırmızı) |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ana görsel veya başlığın çizilme süresi | < 2.5 saniye | 2.5s – 4.0s | > 4.0 saniye |
| INP (Interaction to Next Paint) | Tıklama ve tuş vuruşlarına verilen tepki | < 200 ms | 200ms – 500ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Sayfa yüklenirken öğelerin yer değiştirmesi | < 0.1 | 0.1 – 0.25 | > 0.25 |
LCP Optimizasyonu: En Büyük Blok Nasıl Hızlandırılır?
LCP öğesi genellikle Hero alanındaki büyük bir banner görseli veya dev ana başlıktır:
- Critical Resource Preload: Hero görseli için link rel=preload kullanın.
- Fetch Priority: Tarayıcıya görselin öncelikli olduğunu bildirin:
<img src="/img/hero.webp" fetchpriority="high" alt="Kurumsal Web Tasarım" />
- Server-Side Render (SSR) veya SSG: İstemci tarafında JavaScript beklemek yerine HTML’i doğrudan hazır gönderin.
CLS Önleme: Görsel Kaymaları Sıfırlama
Kullanıcı sayfada bir yazı okurken aniden yukarıdan bir görselin belirmesi ve metni aşağı kaydırması en büyük CLS sebebidir.
- Kesin En-Boy Oranı: Tüm img etiketlerine açıkça width ve height değerleri verin:
<img src="/img/ornek.webp" width="800" height="450" loading="lazy" alt="Teknik Detay" />
- Font Display: font-display: swap kullanırken fallback yazı tipinin boyutunu web fontu ile hizalayın.
INP İyileştirme: Ana Thread’i Rahatlatma
Eski FID metriğinin yerini alan INP, ağır JavaScript kütüphanelerinin ana iş parçacığını (Main Thread) kilitlemesiyle bozulur:
- Ağır işlemleri Web Worker’lara taşıyın,
- Kullanılmayan JavaScript kodlarını temizleyin,
- Sayfa ilk açıldığında gereksiz scriptleri çalıştırmayın.
Kusursuz PageSpeed ve yeşil Core Web Vitals garantili web projeleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızdan destek alabilirsiniz.