Core Web Vitals
Uzman Rehberi

LCP, INP ve CLS ile yükleme, etkileşim ve görsel kararlılığı değerlendirin. Gerçek kullanıcı verisini laboratuvar testlerinden ayırarak iyileştirme önceliklerini belirleyin.

Core Web Vitals Nedir?

Core Web Vitals, yükleme (LCP), etkileşim (INP) ve görsel kararlılık (CLS) için kullanılan üç kullanıcı deneyimi metriğidir. Sitenin bütün teknik kalitesini tek başına açıklamaz.

İyi eşikler LCP ≤ 2,5 saniye, INP ≤ 200 milisaniye ve CLS ≤ 0,1’dir. Değerlendirme, mobil ve masaüstü ayrı ele alınarak gerçek ziyaretlerin 75. yüzdelik değerinde yapılır.

L

Loading

LCP Metriği

I

Interactivity

INP Metriği

V

Visual Stability

CLS Metriği

Mesele Sadece Hız Değil...

Tek bir hız testi tüm ziyaretçilerin deneyimini temsil etmez. Cihaz, ağ ve etkileşimler sonucu etkiler. Önce gerçek kullanıcı verisini inceleyin; laboratuvar ölçümlerini sorunun nedenini bulmak için kullanın.

Gökhan Vatancı

Gökhan Vatancı

Stratejik SEO Uzmanı

LCP Hedefi ≤ 2,5 s
INP Hedefi ≤ 200 ms
CLS Hedefi ≤ 0,1

Neden Core Web Vitals
Kritik Bir Önem Taşır?

Google’ın sıralama sistemleri Core Web Vitals verilerini kullanır. Ancak iyi sonuçlar üst sıralamayı garanti etmez; içerik ve diğer sinyaller de önemlidir. İyileştirmenin kullanıcı ve işletme üzerindeki etkisini ayrıca ölçün.

✓ Yavaş yüklenen ve etkileşimi geciken sayfaları belirlemeye yardımcı olur.
✓ Davranış ve dönüşüm etkisini ayrıca ölçmek gerekir.
✓ Sabit trafik, satış veya reklam maliyeti sonucu garanti etmez.

Değerlendirme Notu

Yükleme, yavaş etkileşim ve beklenmedik düzen kaymaları farklı sorunlardır. Önce hangi metriğin ve hangi sayfa grubunun sorunlu olduğunu belirleyin; değişiklikten sonra aynı koşullarda yeniden test edin.

Gökhan Vatancı SEO Strategy Architect

Core Web Vitals Sözlüğü: Teknik Terimler

LCP

Largest Contentful Paint (En Büyük İçerik Boyaması)

İlk görünüm alanındaki en büyük uygun görsel veya metin bloğunun çizilmesine kadar geçen süre. İyi eşik: ≤ 2,5 saniye.

CLS

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

Beklenmedik düzen kaymalarının en yüksek oturum penceresindeki toplam puanı. Yalnızca ilk yüklemeyi kapsamaz. İyi eşik: ≤ 0,1.

INP

Interaction to Next Paint (Sonrakine Boyama Etkileşimi)

Ziyaret boyunca tıklama, dokunma ve klavye etkileşimlerinin bir sonraki boyamaya kadar gecikmesini değerlendirir. Aykırı değerler dikkate alınarak en yavaş etkileşimleri temsil eder. İyi eşik: ≤ 200 ms.

TTFB

Time to First Byte (İlk Bayt Süresi)

Gezinmenin başlangıcından yanıtın ilk baytının tarayıcıya ulaşmasına kadar geçen süre. Ağ, yönlendirme ve sunucu işlem sürelerinden etkilenir.

TBT

Total Blocking Time (Toplam Engelleme Süresi)

Laboratuvar yükleme testinde 50 ms’yi aşan ana iş parçacığı görevlerinin engelleyen kısımlarının toplamı. INP ile aynı metrik değildir.

FCP

First Contentful Paint (İlk İçerik Boyaması)

Sayfadaki ilk metin, görsel veya uygun içerik öğesinin çizilme zamanı; yalnızca arka planın boyanması değildir.

Hemen Analiz Başlatın

URL’yi girerek Google PageSpeed Insights’a geçin. Saha verisi varsa gerçek kullanıcı sonuçlarını, laboratuvar bölümünde ise test ve teşhis bulgularını görebilirsiniz.

Performans Teşhisinde Yardımcı Metrikler

!

FCP (İlk İçerik Boyaması)

İlk içerik öğesinin boyanma zamanı; ilk piksel ile aynı değildir.

?

TBT (Toplam Engelleme Süresi)

Uzun görevlerin yükleme sırasında ana iş parçacığını engelleyen kısımlarının toplamı.

✓

SI (Hız İndeksi)

Hız İndeksi: İçeriğin görsel olarak dolma hızıdır.

#

TTFB (İlk Bayt Süresi)

İlk yanıt baytının tarayıcıya ulaşmasına kadar geçen süre.

Harekete Geçin: Core Web Vitals Nasıl İyileştirilir?

Optimizasyon 01

LCP (En Büyük İçerik Boyaması) İyileştirme

Önce gerçek LCP öğesini belirleyin. Kaynağın geç keşfi, dosya boyutu, sunucu yanıtı ve çizim gecikmesini ayrı inceleyin. Her sayfaya preload eklemek uygun bir çözüm değildir.

  • Kaynağı erken keşfettirin: LCP görselinin HTML’de erişilebilir olmasını sağlayın; gecikmeli keşifte preload değerlendirin.
  • Doğru boyut ve format: WebP/AVIF ve sıkıştırmayı kalite/dosya boyutu ölçümüyle karşılaştırın; sabit tasarruf oranı yoktur.
  • Öncelik: Gerçek kritik görselde fetchpriority="high" değerlendirin; her görsele vermeyin.
  • Çizim gecikmesi: Engelleyen kaynakları inceleyin; LCP görselini lazy-load etmeyin.

Örnek: LCP görselinin önceliklendirilmesi

<!-- LCP Görselini Önceliklendirme --> <link rel="preload" as="image" href="banner.webp" fetchpriority="high"><!-- Görsel Etiketi --> <img src="banner.webp" width="1200" height="630" loading="eager">
Optimizasyon 02

CLS (Kümülatif Düzen Kayması) İyileştirme

Görsel, reklam ve gömülü içerik için uygun alan ayırın. Yazı tipi geçişleri ve sonradan eklenen öğeleri de kontrol edin; yalnızca görsel boyutu vermek bütün kaymaları çözmez.

  • Alan ayırın: Görsel ve iframe için gerçek boyut oranına uygun alan tanımlayın.
  • Reklamlar: İçeriğin beklenen boyutuna uygun yer ayırın.
  • Yazı tipleri: font-display: swap kaymayı tek başına engellemez. Benzer yedek font ve font metriklerini değerlendirin.
  • Dinamik içerik: Beklenmedik üstten eklemeleri ve kaymaya yol açan animasyonları kontrol edin.

Örnek: yalnızca ilgili görsel için alan ayırma

/* Bu örnek yalnızca 1200 × 630 görsel içindir */ .hero-image { aspect-ratio: 1200 / 630; width: 100%; height: auto; }
Optimizasyon 03

INP (Sonrakine Boyama Etkileşimi) İyileştirme

Yavaş etkileşimlerin giriş gecikmesini, olay işleme süresini ve sonraki boyama gecikmesini inceleyin. Sorun yalnızca yükleme anındaki JavaScript’ten kaynaklanmayabilir.

  • İşi azaltın: Etkileşim işleyicilerindeki gereksiz işlemleri kaldırın.
  • Görevleri bölün: Uzun işleri küçük görevlere ayırarak ana iş parçacığına çalışma fırsatı verin.
  • Betikler: Gereksiz JavaScript’i azaltın; defer tek başına bütün çalışma maliyetini kaldırmaz.
  • Çizim: Büyük DOM ve tekrarlanan düzen hesaplamalarını inceleyin.

Anlatım örneği: uzun işi küçük görevlere ayırma

// Uygulamaya uyarlanması gereken anlatım örneği async function processLargeData(data) { for (let i = 0; i < data.length; i++) { process(data[i]); // uygulamanızın işlemi if ((i + 1) % 10 === 0) { await new Promise(resolve => setTimeout(resolve, 0)); } } }
Optimizasyon 04

TTFB (İlk Bayt Süresi) İyileştirme

TTFB yalnızca sunucu kalitesi değildir. Yönlendirmeler, ağ bağlantısı, önbellek ve sunucu işlemlerini ayrı inceleyerek gecikmenin kaynağını belirleyin.

  • Yönlendirmeler: Gereksiz zincirleri kontrol edin.
  • Sunucu işlemleri: Yavaş sorguları ve yanıt üretimini ölçün.
  • CDN ve önbellek: İçeriğin türüne uygun kurallar kullanın; kişiye özel yanıtları ortak önbelleğe almayın.
  • Tekrar ölçün: Ağ, cihaz ve önbellek koşullarını kaydederek karşılaştırın.

Sunucu ve önbellek kontrol listesi

Yönlendirme zincirlerini inceleyin. Sunucu işlem süresini ölçün. Önbellek başlıklarını kontrol edin. Kişiselleştirilmiş yanıtları ayırın.

Performans Sorunları İçin
Ölçülebilir Bir Plan.

Sorunlu sayfaları, gerçek kullanıcı verisini ve uygulanabilir iyileştirme adımlarını birlikte değerlendirelim.

Saha Verisi ve Laboratuvar Testi

PageSpeed Insights’ta CrUX saha verisi bulunmayabilir. Veri yokluğu iyi veya kötü performans kanıtı değildir. URL verisi yerine tüm origin’in sonucu gösteriliyorsa kapsamı kontrol edin. Lighthouse yükleme testi INP’yi doğrudan ölçmez; TBT teşhiste yardımcı olabilir. Düzeltmeleri laboratuvarda test edin, gerçek kullanıcı sonuçlarıyla takip edin.

Resmî Kaynaklar

Picture of <b>Gökhan Vatancı</b>
Gökhan Vatancı

Freelance SEO Uzmanı

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Hey yardım için buradayım, konuyla ilgili destek olabilirim.×
Avatar

Dijital Pazarlama Uzmanı

×
Merhaba! Size nasıl yardımcı olabilirim?
💬 WhatsApp'a Geç