Core Web Vitals Rehberi 2025: LCP, FID, CLS Metrikleri ve Optimizasyon

Google'ın 2021 yılında başlattığı Core Web Vitals güncellemesi, web performansını ve kullanıcı deneyimini ölçmek için üç kritik metrik belirledi: LCP (Largest Contentful Paint), FID (First Input Delay) ve CLS (Cumulative Layout Shift). Bu metrikler, artık Google'ın sıralama algoritmasında resmi bir faktör olarak kullanılıyor ve web sitenizin başarısı için hayati önem taşıyor.

Bu kapsamlı rehberde, Core Web Vitals metriklerini detaylı olarak inceleyeceğiz. Her bir metriğin ne anlama geldiğini, nasıl ölçüldüğünü ve en önemlisi nasıl optimize edileceğini adım adım öğreneceksiniz. Performans odaklı web tasarım yaklaşımımızla, bu metriklerde mükemmel sonuçlar almanıza yardımcı oluyoruz.

Core Web Vitals Nedir ve Neden Önemli?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel performans metriğidir. Bu metrikler, gerçek kullanıcı deneyimini yansıtacak şekilde tasarlanmıştır ve web sitenizin kalitesini değerlendirmede kritik rol oynar.

Core Web Vitals'ın Önemi

• SEO Sıralama Faktörü: Google, Core Web Vitals'ı resmi sıralama faktörü olarak kullanıyor
• Kullanıcı Deneyimi: İyi skorlar, daha iyi kullanıcı deneyimi anlamına gelir
• Dönüşüm Oranları: Hızlı ve stabil siteler, daha yüksek dönüşüm oranları sağlar
• Rekabet Avantajı: Rakiplerinizden performans açısından öne çıkarsınız
• Mobil Performans: Özellikle mobil cihazlarda kritik önem taşır

Core Web Vitals ve Page Experience Güncellemesi

2021'de başlayan ve 2022'de tamamlanan Google'ın Page Experience güncellemesi ile Core Web Vitals, mobil arama sıralamaları için resmi bir faktör haline geldi. 2025'te artık hem mobil hem de masaüstü aramalarda bu metrikler kritik öneme sahip.

LCP (Largest Contentful Paint): En Büyük İçerikli Boyama

LCP Nedir?

LCP, sayfanın görünür alanında (viewport) en büyük içerik öğesinin (görsel, video, metin bloğu) yüklenme süresini ölçer. Bu metrik, kullanıcının sayfanın "yüklendiğini" algılaması için geçen süreyi temsil eder.

LCP Hedef Değerleri

• İyi (Good): 2.5 saniye veya daha az - Yeşil ✅
• İyileştirmeli (Needs Improvement): 2.5-4.0 saniye arası - Sarı ⚠️
• Kötü (Poor): 4.0 saniyeden fazla - Kırmızı ❌

LCP'yi Etkileyen Faktörler

• Yavaş sunucu yanıt süresi (TTFB): Sunucunuzun içeriği göndermesi gecikiyorsa
• Render-blocking JavaScript ve CSS: Kritik yol üzerindeki bloke edici kaynaklar
• Yavaş kaynak yükleme: Görseller, videolar ve diğer medya dosyaları
• Client-side rendering: JavaScript ile render edilen içerik

LCP Optimizasyon Stratejileri

1. Sunucu Yanıt Süresini (TTFB) Azaltın

• Kaliteli hosting kullanın: Yeterli kaynaklara sahip, hızlı sunucular tercih edin
• CDN (Content Delivery Network): İçeriği kullanıcıya coğrafi olarak yakın sunuculardan sunun
• Server-side caching: Redis, Memcached gibi cache çözümleri uygulayın
• Database optimizasyonu: Sorguları optimize edin, indexleme yapın
• HTTP/2 veya HTTP/3: Modern protokoller kullanın

2. Render-Blocking Kaynakları Eliminate Edin

• Critical CSS inline'layın: Above-the-fold CSS'i doğrudan HTML'e ekleyin
• JavaScript'i defer/async yapın: Kritik olmayan JS'i erteleyin
• CSS dosyalarını optimize edin: Gereksiz CSS'i kaldırın (PurgeCSS)
• Font loading'i optimize edin: font-display: swap kullanın
• Preload kullanın: Kritik kaynakları önceden yükleyin

3. Görselleri ve Medya Dosyalarını Optimize Edin

• Modern formatlar kullanın: WebP, AVIF gibi yeni nesil formatlar
• Responsive images: Srcset ile farklı ekran boyutları için optimize görseller
• LCP görseline priority verin: fetchpriority="high" attribute'u ekleyin
• Görsel sıkıştırma: Lossless veya lossy compression uygulayın
• Boyut belirtin: Width ve height attribute'larını ekleyin
• CDN kullanın: Görselleri CDN üzerinden sunun

4. Client-Side Rendering'i Optimize Edin

• Server-Side Rendering (SSR): Next.js gibi SSR framework'leri kullanın
• Static Site Generation (SSG): Mümkünse static sayfalar oluşturun
• Streaming SSR: React 18+ ile progressive rendering
• Hydration'ı optimize edin: Partial/progressive hydration teknikleri

FID (First Input Delay): İlk Girdi Gecikmesi

FID Nedir?

FID, kullanıcının sayfayla ilk etkileşiminde (tıklama, dokunma, tuş basımı) tarayıcının yanıt vermeye başlamasına kadar geçen süreyi ölçer. Bu metrik, sayfanın interaktivitesini ve responsiveness'ini değerlendirir.

Not: 2024'te Google, FID'yi INP (Interaction to Next Paint) metriki ile değiştirmeyi planladı. Her iki metriki de izlemeniz önerilir.

FID Hedef Değerleri

• İyi (Good): 100 milisaniye veya daha az - Yeşil ✅
• İyileştirmeli (Needs Improvement): 100-300ms arası - Sarı ⚠️
• Kötü (Poor): 300ms'den fazla - Kırmızı ❌

FID'yi Etkileyen Faktörler

• Ağır JavaScript yükü: Main thread'i bloke eden JavaScript
• Long tasks: 50ms'den uzun süren JavaScript görevleri
• Third-party code: Üçüncü parti script'ler (analytics, ads, vb.)
• Large DOM boyutu: Çok fazla DOM elementi

FID Optimizasyon Stratejileri

1. JavaScript Yükünü Azaltın

• Code splitting: Büyük bundle'ları parçalara ayırın
• Tree shaking: Kullanılmayan kodu bundle'dan çıkarın
• Lazy loading: Bileşenleri ihtiyaç olduğunda yükleyin
• Dynamic imports: ES modules ile dinamik import kullanın
• Minification: JavaScript'i minify edin (Terser)

2. Long Tasks'ı Bölün

• Task breakdown: Uzun görevleri küçük parçalara ayırın
• requestIdleCallback kullanın: Kritik olmayan işleri arka plana atın
• Web Workers: Ağır hesaplamaları ayrı thread'de çalıştırın
• Performance.measure(): Long tasks'ları izleyin ve optimize edin

3. Third-Party Script'leri Optimize Edin

• Gereksizleri kaldırın: Kullanmadığınız üçüncü parti kodları kaldırın
• Async/defer kullanın: Script'leri asenkron yükleyin
• Facade pattern: Third-party embed'leri lazy load edin
• Self-host: Mümkünse third-party script'leri kendi sunucunuzda host edin

4. Main Thread İşini Azaltın

• Server components kullanın: React 18+ server components
• Islands architecture: Astro gibi framework'lerle partial hydration
• CSS-in-JS'den kaçının: Runtime CSS oluşturma yerine static CSS
• Virtual scrolling: Uzun listeler için virtualization

CLS (Cumulative Layout Shift): Kümülatif Düzen Kayması

CLS Nedir?

CLS, sayfanın yüklenmesi sırasında beklenmeyen düzen kaymalarının toplamını ölçer. Kullanıcılar bir butona tıklamak üzereyken sayfanın kayması ve yanlış yere tıklaması gibi can sıkıcı deneyimleri önler.

CLS Hedef Değerleri

• İyi (Good): 0.1 veya daha az - Yeşil ✅
• İyileştirmeli (Needs Improvement): 0.1-0.25 arası - Sarı ⚠️
• Kötü (Poor): 0.25'ten fazla - Kırmızı ❌

CLS'yi Etkileyen Faktörler

• Boyutsuz görseller: Width/height belirtilmemiş images
• Dinamik içerik enjeksiyonu: Reklamlar, banner'lar
• Web fonts: FOIT (Flash of Invisible Text) veya FOUT
• Animasyonlar: Layout-shifting animasyonlar
• Gecikmeli embed'ler: YouTube, Twitter embed'leri

CLS Optimizasyon Stratejileri

1. Görseller için Her Zaman Boyut Belirtin

• Width ve height attributes: Tüm görsellere ekleyin
• Aspect ratio: CSS aspect-ratio property kullanın
• Next.js Image: Otomatik boyut rezervasyonu
• Responsive images: Srcset ile farklı boyutlar için rezervasyon

Örnek Kod:

<img 
  src="image.jpg" 
  alt="Açıklama" 
  width="800" 
  height="600"
  style="aspect-ratio: 800/600;"
>

2. Dinamik İçerik için Yer Ayırın

• Placeholder'lar: Reklamlar ve embed'ler için minimum yükseklik belirleyin
• Skeleton screens: Yükleme sırasında iskelet gösterin
• Min-height kullanın: Dinamik içerik için minimum alan rezerve edin
• Above-the-fold injection'dan kaçının: Üst kısma dinamik içerik eklemekten kaçının

3. Web Font Loading'i Optimize Edin

• font-display: swap: Fallback font göster, sonra web font'u yükle
• Font preloading: Kritik fontları preload edin
• Font subsetting: Sadece kullanılan karakterleri yükleyin
• System fonts: Mümkünse sistem fontlarını kullanın
• Variable fonts: Tek dosyada birden fazla font ağırlığı

Örnek Kod:

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

<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/font.woff2') format('woff2');
    font-display: swap;
  }
</style>

4. Animasyonları ve Transitions'ı Optimize Edin

• Transform ve opacity kullanın: Layout-shifting properties'ten kaçının
• will-change hint: Animasyon yapacak elementlere will-change ekleyin
• CSS animations yerine: JavaScript animations kullanırken requestAnimationFrame

Kaçınılması Gerekenler:

• ❌ width, height, top, left animasyonları
• ❌ margin, padding animasyonları
• ❌ font-size değişimleri

Tercih Edilmesi Gerekenler:

• ✅ transform: translateX/Y/Z
• ✅ transform: scale
• ✅ opacity
• ✅ filter

Core Web Vitals Ölçüm Araçları

1. Google PageSpeed Insights

En popüler ve kapsamlı araç. Hem lab hem field data sağlar.

• Lab Data: Kontrollü ortamda simülasyon testleri
• Field Data: Gerçek kullanıcılardan toplanan veriler (CrUX)
• Mobil ve Desktop: Her iki platform için ayrı raporlar
• Optimizasyon önerileri: Detaylı iyileştirme tavsiyeleri

2. Lighthouse (Chrome DevTools)

• Chrome DevTools'ta entegre
• Detaylı performans auditi
• CI/CD pipeline entegrasyonu
• Programatik kullanım (lighthouse-ci)

3. Chrome User Experience Report (CrUX)

• Gerçek Chrome kullanıcılarından veri
• PageSpeed Insights'ta kullanılır
• BigQuery'de detaylı analiz
• 28 günlük rolling window

4. Web Vitals JavaScript Library

Google'ın resmi kütüphanesi ile kendi analytics'inize entegre edin:

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

5. Search Console Core Web Vitals Raporu

• Web sitenizin tüm sayfaları için toplu rapor
• Mobil ve desktop ayrımı
• URL grupları ve sorunlu sayfalar
• Geçmiş trend analizi

Core Web Vitals Optimizasyon Checklist

LCP İyileştirme Checklist

• ☐ TTFB 600ms altına çekin
• ☐ LCP görseline fetchpriority="high" ekleyin
• ☐ Görselleri WebP/AVIF formatına dönüştürün
• ☐ CDN kullanın
• ☐ Critical CSS inline'layın
• ☐ Render-blocking JavaScript'i defer edin
• ☐ Preload kritik kaynakları
• ☐ Görselleri sıkıştırın
• ☐ Server-side caching uygulayın
• ☐ HTTP/2 veya HTTP/3 kullanın

FID İyileştirme Checklist

• ☐ JavaScript bundle boyutunu azaltın
• ☐ Code splitting uygulayın
• ☐ Third-party script'leri optimize edin
• ☐ Long tasks'ı bölün (>50ms)
• ☐ Web Workers kullanın
• ☐ Tree shaking uygulayın
• ☐ Lazy loading ekleyin
• ☐ requestIdleCallback kullanın
• ☐ CSS-in-JS'den kaçının
• ☐ Virtual scrolling uygulayın (uzun listeler için)

CLS İyileştirme Checklist

• ☐ Tüm görsellere width/height ekleyin
• ☐ font-display: swap kullanın
• ☐ Reklamlar için minimum alan ayırın
• ☐ Skeleton screens kullanın
• ☐ Transform/opacity ile animasyon yapın
• ☐ Embed'ler için aspect-ratio kullanın
• ☐ Above-the-fold injection'dan kaçının
• ☐ Web fontları preload edin
• ☐ CSS animations optimize edin
• ☐ Dinamik içerik için placeholder ekleyin

WebCraft Profesyonel Core Web Vitals Optimizasyonu

Core Web Vitals optimizasyonu teknik bilgi ve deneyim gerektirir. WebCraft olarak, performans odaklı web tasarım hizmetimizle işletmenizin Core Web Vitals metriklerini optimize ediyoruz.

Hizmetimizin Kapsamı

• Detaylı audit: Tüm Core Web Vitals metriklerinin kapsamlı analizi
• Kök neden analizi: Performans sorunlarının temel nedenlerini bulma
• Özel optimizasyon planı: İşletmenize özel çözüm geliştirme
• Implementation: Tüm optimizasyonları profesyonel olarak uygulama
• Monitoring: Sürekli izleme ve iyileştirme
• Raporlama: Düzenli performans raporları

Garantili Sonuçlar

• ✅ LCP 2.5 saniye altı
• ✅ FID 100ms altı
• ✅ CLS 0.1 altı
• ✅ PageSpeed 90+ puan
• ✅ SEO sıralaması artışı
• ✅ Dönüşüm oranı iyileştirmesi

Sonuç: Core Web Vitals'da Başarı

Core Web Vitals, 2025'te web performansının ve SEO başarısının temel kriterleridir. LCP, FID ve CLS metriklerini optimize ederek:

• Google'da daha üst sıralarda yer alırsınız
• Kullanıcı deneyimini maksimize edersiniz
• Dönüşüm oranlarınızı artırırsınız
• Çıkma oranınızı düşürürsünüz
• Rekabet avantajı kazanırsınız

Bu rehberde paylaştığımız stratejileri uygulayarak Core Web Vitals metriklerinizi iyileştirebilirsiniz. Profesyonel destek için WebCraft performans optimizasyon hizmeti ile iletişime geçin.