Core Web Vitals: LCP, INP ve CLS iyileştirme

Google Search Console'da sitenizin herhangi bir sayfasını açtıysanız, muhtemelen Core Web Vitals raporuyla karşılaşmışsınızdır. Google'ın arama sonuçlarında kullanıcı deneyiminin ana ölçütü olarak belirlediği bu gösterge seti, birçok site yöneticisi için bir bilmece haline geldi: Her biri tam olarak neyi ölçüyor? Kabul eşiği nerede? Ve en önemlisi, iyileştirmeye nereden başlamalı?

Bu makalede, klişe açıklamalar yerine teknik ayrıntılara iniyoruz. Her Core Web Vitals göstergesinin tarayıcının hangi davranışını ölçtüğünü, raporda gördüğünüz sayının nasıl hesaplandığını görecek ve gerçek örnekler ve pratik komutlarla sorunu nasıl kökten çözüp gidereceğinizi öğreneceksiniz. Siteniz yüksek trafik alıyorsa veya zayıf bir paylaşımlı sunucuda çalışıyorsa, bu rehber tam size göre.

Core Web Vitals Nedir ve Neden Önem Vermelisiniz?

Core Web Vitals, Google'ın web'de kullanıcı deneyimi kalitesini ölçmek için tanımladığı üç ana göstergedir. Bu göstergeler 2021'den beri arama sonuçlarında sıralama sinyali olarak kullanılıyor ve 2024'te FID göstergesi INP ile değiştirildi. Ancak önemli olan nokta, bu ölçütlerin yalnızca SEO için olmamasıdır; doğrudan dönüşüm oranınız, kullanıcıda kalma süreniz ve gelirinizle bağlantılıdırlar.

Üç ana gösterge şunlardır:

• LCP (Largest Contentful Paint) — Sayfadaki en büyük içerik öğesinin (genellikle görsel, video veya büyük metin) yüklenme süresini ölçer.
• INP (Interaction to Next Paint) — Sayfanın kullanıcı etkileşimlerine (tıklama, yazma, kaydırma) yanıt verme hızını tüm ziyaret boyunca değerlendirir.
• CLS (Cumulative Layout Shift) — Sayfa yüklenirken öğelerin istenmeyen yer değiştirme miktarını ölçer.

Her gösterge için kabul eşiği şu şekildedir:

• LCP: 2,5 saniyeden az (zayıf: 4 saniyeden fazla)
• INP: 200 milisaniyeden az (zayıf: 500 milisaniyeden fazla)
• CLS: 0,1'den az (zayıf: 0,25'ten fazla)

Önemli not: Google, Search Console raporu için gerçek kullanıcıların tarayıcılarından toplanan Saha Verilerini (Field Data) kullanır. Bu nedenle, yalnızca test ortamında iyileştirme yapmak yeterli değildir; gerçek kullanıcı deneyimini iyileştirmelisiniz.

LCP Göstergesi: Sayfanın En Büyük Öğesi Ne Kadar Hızlı Yükleniyor?

LCP, kullanıcının viewport'unda en büyük içerik öğesinin (görsel, video, metin bloğu) render edildiği anı ölçer. Bu gösterge genellikle üç ana faktörden etkilenir: sunucu yanıt hızı (TTFB), kritik kaynakların yüklenme süresi ve istemci tarafı render süresi.

LCP'yi Nasıl Kökten Çözersiniz?

İlk adım, LCP öğesini tanımlamaktır. Chrome DevTools'da Performance sekmesini açın ve bir kayıt yapın. Timings bölümünde en büyük öğe belirtilmiştir. Ayrıca konsolda şu komutu kullanabilirsiniz:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.element, entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

LCP öğesini tanımladıktan sonra şu adımları öncelik sırasına göre uygulayın:

1. TTFB'yi İyileştirin: Sunucu yanıt süresi 600 milisaniyenin üzerindeyse, sorun sunucudan kaynaklanıyor demektir. CDN kullanımını, HTTP/2 ve HTTP/3 aktivasyonunu ve veritabanı sorgu optimizasyonunu kontrol edin.
2. LCP Görselini Yükleyin: LCP öğesi bir görselse, onu WebP veya AVIF formatında sunun ve fetchpriority="high" kullanın:

<img src="hero.webp" fetchpriority="high" width="1200" height="630" alt="Görsel açıklaması">

1. Render'ı Engelleyen JavaScript'i Kaldırın: LCP öğesi render edilmeden önce çalışan script'leri defer veya async ile yükleyin.
2. Kritik Kaynaklara Ön Bağlantı: Font veya API sunan alan adları için <link rel="preconnect"> kullanın.

INP Göstergesi: Sayfanın Kullanıcı Etkileşimlerine Yanıt Verme Hızı

INP, FID'nin yerini aldı ve daha hassas bir ölçüttür: yalnızca ilk etkileşimi ölçmek yerine, ziyaret boyunca tüm kullanıcı etkileşimlerini inceler ve en kötü (veya kötüye yakın) değeri raporlar. Bu gösterge doğrudan ana iş parçacığının (Main Thread) ömrüne bağlıdır.

INP'niz Neden Zayıf?

Yüksek INP'nin ana nedenleri şunlardır:

• Ana iş parçacığını uzun süre bloke eden ağır JavaScript
• İşlenmesi zaman alan karmaşık olay dinleyicileri
• Layout Thrashing'e neden olan sık DOM render'ları
• Ana iş parçacığında çalışan üçüncü taraf script'leri (reklamlar, sohbet widget'ları, analitikler)

INP'yi İyileştirmek için Pratik Çözümler

İlk adım, en uzun görevleri (Long Tasks) ölçmektir. DevTools'da Performance sekmesini açın ve Main bölümünü inceleyin. 50 milisaniyeden uzun süren görevler sorunludur.

Ardından şu teknikleri uygulayın:

1. Kod Bölme (Code Splitting): JavaScript'i birkaç küçük pakete bölün ve yalnızca mevcut sayfa için gerekli kodu yükleyin. Webpack veya Vite ile dinamik import() kullanabilirsiniz.
2. Gereksiz İşleri Erteleyin: Tarayıcının boş zamanlarında düşük öncelikli işleri çalıştırmak için requestIdleCallback kullanın:

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    // Gereksiz widget'ları yükle
    loadChatWidget();
  }, { timeout: 2000 });
}

1. Üçüncü Taraf İşlerini Azaltın: Reklam ve analitik script'lerini defer ile yükleyin ve kullanıcı o bölüme kaydırdığında yüklemek için IntersectionObserver kullanın.
2. DOM Optimizasyonu: DOM düğüm sayısını azaltın. 1500'den fazla düğümü olan sayfalar belirgin şekilde daha yavaş render edilir.

CLS Göstergesi: Sayfanın Görsel Stabilitesi

CLS, sayfanın ömrü boyunca öğelerin istenmeyen yer değiştirme puanlarının toplamını ölçer. Bir öğe ilk render'dan sonra her yer değiştirdiğinde negatif bir puan kaydedilir. Bu genellikle görsellerin, fontların veya reklamların geç yüklenmesi nedeniyle oluşur.

Yüksek CLS'nin Ana Kaynakları

• Belirgin boyutları (width ve height) olmayan görseller ve videolar
• FOIT/FOUT ile yüklenen web fontları
• İlk render'dan sonra eklenen reklamlar veya widget'lar
• Layout özelliklerini değiştiren CSS animasyonları

Sıfır CLS için Pratik Çözümler

Bu kontrol listesini sırayla uygulayın:

1. Tüm Medya için Açık Boyutlar: Her görsel ve video için width ve height özelliklerini belirtin. CSS onları responsive yapsa bile, ana boyutları HTML'de yazın:

<img src="banner.jpg" width="800" height="450" style="width:100%; height:auto;" alt="Banner">

1. Reklamlar için Alan Ayırın: Reklamları sayfa yüklendikten sonra ekliyorsanız, HTML'de önceden belirgin boyutlara sahip bir kapsayıcı yerleştirin:

<div class="ad-slot" style="min-height: 250px; width: 100%;"></div>

1. font-display: swap Kullanın: Bu özellik, metnin önce sistem fontuyla görüntülenmesini ve web fontu yüklendikten sonra değiştirilmesini sağlar. Yer değiştirmeyi önlemek için @font-face içinde size-adjust kullanabilirsiniz.
2. Güvenli Animasyonlar: Animasyonlar için yalnızca transform ve opacity özelliklerini kullanın, width, height veya top kullanmayın.

Core Web Vitals Ölçüm ve İzleme Araçları

Etkili iyileştirme için sürekli ölçüm yapmalısınız. Bu araçları kombinasyon halinde kullanın:

• PageSpeed Insights: Saha verilerinin (CrUX) ve laboratuvar verilerinin (Lighthouse) bir kombinasyonunu gösterir.
• Chrome DevTools: Derinlemesine hata ayıklama ve LCP öğesi ile uzun görevleri tanımlamak için.
• web-vitals JavaScript kütüphanesi: Kendi sitenizde Gerçek Kullanıcı İzleme (RUM) için:

import {onLCP, onINP, onCLS} from 'web-vitals';

onLCP((metric) => {
  console.log('LCP:', metric.value);
  // Analitiklere gönder
});
onINP((metric) => console.log('INP:', metric.value));
onCLS((metric) => console.log('CLS:', metric.value));

• CrUX API: Geçmiş verileri görüntülemek ve rakiplerle karşılaştırmak için.

Yoğun Trafikli Siteler için Adım Adım İyileştirme Stratejisi

Siteniz yüksek trafik alıyorsa, değişiklikleri bir anda uygulamayın. Bu, küçük bir hatanın binlerce kişinin kullanıcı deneyimini bozma riskini taşır. Bunun yerine şu stratejiyi izleyin:

1. İlk Hafta — Ölçüm ve Tanımlama: Son 28 günün CrUX verilerini inceleyin. Zayıf eşikte olan sayfaları önceliklendirin.
2. İkinci Hafta — Altyapı Sorunlarını Giderin: TTFB, sunucu tarafı önbelleği ve CDN'yi kontrol edin. Site paylaşımlı sunucudaysa, özel bir plana veya VPS'ye yükseltmeyi düşünün. (Bu bağlamda ServerNet, yoğun trafikli barındırma için çeşitli seçenekler sunar.)
3. Üçüncü Hafta — Varlıkları Optimize Edin: Görselleri WebP'ye dönüştürün, fontları alt kümelere ayırın ve CSS/JS'i minify edin.
4. Dördüncü Hafta — JavaScript Optimizasyonu: Üçüncü taraf kodları kaldırın veya erteleyin ve kod bölmeyi uygulayın.
5. Sürekli İzleme: Her değişiklikten sonra CrUX verilerini 7 gün boyunca kontrol edin. İyileştirmeler genellikle 28 gün sonra Google raporuna yansır.

Özet

Core Web Vitals yalnızca bir SEO ölçütü değildir; sitenizin teknik kalitesinin bir yansımasıdır. LCP, INP ve CLS'yi iyileştirerek yalnızca Google'da daha iyi bir sıralama elde etmekle kalmaz, aynı zamanda hemen çıkma oranınızı düşürür ve dönüşümlerinizi artırırsınız. Bu rehberi bir yol haritası olarak kullanın: önce ölçün, sonra kökten çözün ve son olarak küçük, ölçülebilir değişikliklerle iyileştirmeyi uygulayın. Optimizasyonun sürekli bir süreç olduğunu, tek seferlik bir proje olmadığını unutmayın.