Core Web Vitals Rehberi: LCP, INP ve CLS Optimizasyonu

Kısa yanıt

Core Web Vitals; Google tarafından sayfa yükleme hızı, etkileşim tepkisi ve görsel kararlılığı somut olarak puanlamak amacıyla geliştirilmiş temel performans metrikleri kümesidir. LCP, INP ve CLS olmak üzere üç ana bileşenden meydana gelen bu standartlar, arama görünürlüğünü ve kullanıcı deneyimini doğrudan belirleyen kritik teknik sinyaller üretir.

Core Web Vitals nedir?

Kullanıcıların web siteleriyle kurduğu temasın kalitesini ölçümlemek, uzun yıllar boyunca soyut yaklaşımlara ve tutarsız laboratuvar testlerine dayanıyordu. Google, web sitelerinin gerçek kullanıcılar nezdindeki hızını ve konforunu standart bir çerçeveye oturtmak amacıyla Core Web Vitals girişimini başlattı. Bu girişim, teknik karmaşıklığı sadeleştirerek site sahipleri, yazılım ekipleri ve yöneticiler için ortak bir ölçüm dili kurdu. Resmi yönergeler doğrultusunda Google Web Vitals dokümantasyonu üzerinde tanımlanan bu metrikler, sayfaların laboratuvar simülasyonlarından ziyade sahadaki gerçek tarayıcı deneyimlerine nasıl yanıt verdiğini esas alır.

Modern performans yaklaşımında sunucu yanıt süreleri ya da toplam sayfa boyutu tek başına yeterli bir değerlendirme kriteri oluşturmaz. Ziyaretçinin ilk içeriği ne kadar sürede gördüğü, sayfadaki butonlara tıkladığında tarayıcının ne kadar hızlı tepki verdiği ve sayfa yüklenirken ekranın kayıp kaymadığı asıl belirleyici faktörlerdir. Kapsamlı bir seo hizmeti stratejisinde sayfa deneyimi doğrudan ele alınmadığında, kaliteli içerikler ve güçlü bağlantı profilleri dahi organik trafik hedeflerini yakalamakta yetersiz kalabilir.

Üç ana metrik ve kabul edilebilir eşik değerleri

Google, sayfa deneyimini değerlendirirken üç kritik aşamayı merkeze alır: yükleme performansı, etkileşim yanıtı ve düzen kararlılığı. Her bir metrik için kullanıcı ziyaretlerinin en az yüzde 75’ini kapsayan kesin sınırlar belirlenmiştir. Bu eşiklerin aşılması, arama motoru algoritmalarında sayfanın deneyim puanını aşağı çeker.

Metrik	Ölçülen Alan	İyi (Good)	İyileştirme Gerekli	Zayıf (Poor)
LCP (Largest Contentful Paint)	Algılanan yükleme hızı (ana içerik)	≤ 2.5 saniye	2.5 - 4.0 saniye	> 4.0 saniye
INP (Interaction to Next Paint)	Etkileşim yanıt süresi (tüm oturum)	≤ 200 ms	200 - 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	Görsel düzen kararlılığı	≤ 0.1	0.1 - 0.25	> 0.25

LCP metriği, tarayıcının görüntüleme alanındaki en büyük görsel veya metin bloğunu ekrana getirme süresini kaydeder. Banner görselleri, manşet blokları ya da video afişleri çoğunlukla bu metriği doğrudan şekillendirir. INP ise kullanıcının sayfa boyunca gerçekleştirdiği tıklama, dokunma veya klavye girdilerinin bir sonraki görsel kareyi oluşturma gecikmesini takip eder. CLS tarafında ise sayfa yüklenirken beklenmedik biçimde yer değiştiren butonlar, kayan bannerlar ve içerik bloklarının oluşturduğu gezinme rahatsızlığı puanlanır.

Laboratuvar ve saha verisi arasındaki farklar nasıl yorumlanır?

Performans ölçümlerinde sıklıkla karşılaşılan kafa karışıklıklarından biri, Lighthouse testinde yüksek skor alan bir sitenin Google Search Console üzerinde zayıf performans sergilemesidir. Bu durum laboratuvar verisi (Lab Data) ile saha verisi (Field Data) arasındaki doğa farkından kaynaklanır.

Laboratuvar verileri, kontrollü donanım ve önceden tanımlanmış ağ koşullarında gerçekleştirilen sentetik testlerdir. Lighthouse bu ortamda çalışarak geliştiricilere anlık hata ayıklama imkanı tanır; ancak gerçek dünyadaki cihaz çeşitliliğini, dalgalı mobil internet bağlantılarını ve gerçek kullanıcı etkileşimlerini yansıtamaz. Saha verisi ise Chrome Kullanıcı Deneyimi Raporu (CrUX) aracılığıyla toplanan 28 günlük fiili kullanıcı oturumlarını içerir. Google sıralama sinyallerinde doğrudan saha verilerini baz alır.

Sahadaki kullanıcıların cihaz donanımı zayıfsa, ağır JavaScript kütüphaneleri ana işlemciyi (Main Thread) kilitler ve laboratuvarda tespit edilemeyen yüksek INP gecikmeleri ortaya çıkar. İki veri türünü birbirinin alternatifi olarak değil, tanı ve doğrulama süreçlerinin birbirini tamamlayan iki parçası olarak görmek gerekir. Laboratuvar ortamı sorunları izole etmek için kullanılırken, saha verisi optimizasyonun gerçek başarısını temsil eder.

Core Web Vitals ölçümü nasıl yapılır?

Performans açıklarını tespit etmek ve doğru müdahaleleri planlamak, belirli bir teşhis metodolojisi gerektirir. Sitenin genel sağlık durumunu anlamak ve darboğazları listelemek için aşağıdaki aşamalar izlenmelidir:

1. Google Search Console incelemesi: Search Console panelindeki Core Web Vitals raporu açılarak URL grupları taranır. Bu panel, saha verisi eşiklerini geçemeyen sayfaları zayıf veya iyileştirilmesi gereken şablonlar altında kümeleyerek sorunun hangi sayfa tiplerinde yoğunlaştığını ortaya koyar.
2. PageSpeed Insights ve CrUX analizi: Sorunlu şablonlardan seçilen örnek URL’ler PageSpeed Insights aracına girilir. Araç hem son 28 güne ait saha dağılımını gösterir hem de sayfanın laboratuvar simülasyonunu çalıştırarak soruna yol açan öğeleri listeler.
3. Chrome DevTools Performance sekmesi: Geliştirici panelinde sayfa yükleme ve kullanıcı etkileşimleri kaydedilir. İşlemciyi bloke eden uzun görevler (Long Tasks), gereksiz layout hesaplamaları ve render gecikmesine yol açan kaynaklar doğrudan bu panelde görünür hale gelir.
4. Gerçek kullanıcı izleme (RUM) kurgusu: Sitedeki özel şablonlara Web Vitals JavaScript kütüphanesi yerleştirilerek kullanıcıların oluşturduğu veriler analitik panellerine aktarılır. Böylece 28 günlük CrUX döngüsü beklenmeden anlık müdahalelerin sonucu izlenebilir.

Ölçüm sonuçları değerlendirilirken sunucu taraflı gecikmeler ile tarayıcı taraflı darboğazlar birbirinden ayrılmalıdır. Sunucu yanıt süresi ve tarama verimliliğiyle ilgili detaylı aksiyon adımları için teknik SEO INP tarama bütçesi incelemesi üzerinden sunucu mimarisinin optimize edilmesi gerekir. Doğru teşhis konulmadan yapılan rastgele optimizasyonlar, kod karmaşasını artırarak sistem kararlılığına zarar verebilir.

LCP nasıl optimize edilir?

Largest Contentful Paint değerini aşağı çekmek, sayfadaki en geniş içerik blokunun ekrana geliş sürecini doğrudan hızlandırmayı gerektirir. Çoğu kurumsal web sitesinde bu öğe bir banner görseli, ürün fotoğrafı veya geniş bir tipografi bloğudur. Tarayıcının öğeyi keşfetme, indirme ve ekrana çizme aşamalarındaki gecikmeler LCP skorunu olumsuz etkiler. Google web.dev dokümantasyonu üzerinde belirtildiği gibi, LCP süresinin yüzde kırkından fazlası kaynak yükleme gecikmesinden kaynaklanır.

Sayfanın üst kısmında yer alan ana görselin geç yüklenmesini engellemek adına HTML içinde önceliklendirme yapılmalıdır. Kritik görsel öğesine fetchpriority="high" özniteliği atanmalı, buna karşın ekranın ilk açılış alanında yer alan görsellere asla lazy-load uygulanmamalıdır. Sunucu tarafında AVIF ve WebP formatlarının tercih edilmesi dosya boyutunu ciddi oranda düşürür. Görsellerin barındırıldığı sunucunun yanıt hızı ve CDN konfigürasyonu da dosya indirme süresini doğrudan belirler.

CSS ve JavaScript kaynaklarının ekran çizimini engellemesi (render-blocking) LCP hedeflerine ulaşmayı zorlaştırır. Kritik olmayan stil dosyaları asenkron yüklenmeli, sayfa açılışında ihtiyaç duyulan kritik CSS kuralları doğrudan HTML içine gömülmelidir. Font dosyalarının yüklenmesi sırasında metinlerin görünmez kalmasını önlemek için CSS font kurallarına font-display: swap eklenmelidir. Bu sayede sistem fontları geçici olarak devreye girerek metin tabanlı LCP öğelerinin ekranda belirmesini hızlandırır.

INP skorunu düşürmek için hangi adımlar izlenmelidir?

Interaction to Next Paint, kullanıcının sayfayla girdiği tıklama, dokunma veya klavye etkileşimlerine tarayıcının ne kadar hızlı yanıt verdiğini ölçer. Yüksek INP değerleri genellikle ana işlem parçacığını (main thread) uzun süre meşgul eden JavaScript görevlerinden kaynaklanır. Tarayıcı 50 milisaniyeden uzun süren görevleri işlerken gelen kullanıcı girdilerini kuyruğa alır ve arayüz tepkisini geciktirir.

Etkileşim gecikmesini azaltmak için uzun süren JavaScript blokları parçalara ayrılmalıdır. Kod mimarisinde requestAnimationFrame veya modern tarayıcılarda desteklenen scheduler.yield() API’si kullanılarak tarayıcının görev aralarında ekranı güncellemesine fırsat tanınmalıdır. Üçüncü taraf takip etiketleri, sohbet pencereleri ve pazarlama kodları ana işlem parçacığını kilitleyen en yaygın unsurlar arasındadır. Bu etiketlerin yüklenme sıralaması Google Tag Manager üzerinde optimize edilmeli, gereksiz kütüphaneler projeden temizlenmelidir.

1. Girdi gecikmesini en aza indirin: Olay dinleyicileri (event listener) içinde ağır hesaplamalar yapmaktan kaçının; işlem yoğun görevleri Web Worker katmanına taşıyın.
2. Görev parçalama uygulayın: Uzun süren döngüleri mikro görevlere bölerek tarayıcının her kullanıcı etkileşiminde arayüzü çizmesini sağlayın.
3. DOM güncellemelerini sadeleştirin: Tek bir tıklama sonrasında binlerce DOM düğümünü aynı anda yeniden oluşturmak yerine sadece değişen arayüz elemanını güncelleyin.
4. Görsel geri bildirimi erkene alın: Kullanıcı bir butona bastığında arka plandaki veri alışverişi tamamlanmadan önce yükleniyor durumunu ekrana yansıtın.

Kapsamlı bir arama motoru görünürlüğü kurgularken teknik performansın yanı sıra içerik ve site mimarisinin birlikte ele alınması gerekir. Bu süreçte profesyonel bir SEO hizmeti desteği almak, kod seviyesindeki iyileştirmelerin organik sıralamalara ve dönüşüm oranlarına doğru şekilde yansımasını sağlar.

CLS sorunları nasıl tespit edilir ve önlenir?

Cumulative Layout Shift, sayfa yüklenirken veya kullanıcı içerikle etkileşime geçerken arayüz elemanlarının beklenmedik şekilde yer değiştirmesini ifade eder. Bu kaymalar hem kullanıcı deneyimini zedeler hem de yanlış tıklamalara yol açarak sitedeki dönüşüm hunilerini bozar. Kaymaların en belirgin nedeni, tarayıcının görsel veya harici öğeler için sayfada önceden yer ayırmamış olmasıdır.

Sayfaya yerleştirilen tüm görsel, video ve iframe etiketlerinde genişlik (width) ve yükseklik (height) öznitelikleri açıkça tanımlanmalıdır. Modern tarayıcılar bu değerleri kullanarak görsel henüz indirilmeden önce CSS aspect-ratio oranını hesaplar ve ilgili alanı ayırır. Görsel indirildiğinde sayfa düzeni sarsılmaz, alt kısımdaki metinler aşağıya doğru kayma yaşamaz.

Dinamik olarak eklenen reklam alanları, e-bülten kayıt formları veya sonradan açılan uyarı bantları CLS puanını ciddi biçimde yükseltir. Bu tür bileşenler için CSS üzerinde minimum yükseklik (min-height) değerleri belirlenmelidir. Web fontlarının geç yüklenmesi sonucu oluşan font kaymaları (FOUT ve FOIT) için de size-adjust ve font-metric-overrides özellikleri tanımlanarak sistem fontu ile web fontunun kapladığı alan birbirine eşitlenmelidir.

Metrik	Kritik Eşik Değeri	En Sık Karşılaşılan Sorun	Temel Çözüm Yolu
LCP	2,5 saniye ve altı	Büyük görsel boyutları, render engelleyen CSS kaynakları	Görsel sıkıştırma, fetchpriority="high", kritik CSS ayrıştırma
INP	200 milisaniye ve altı	Uzun JavaScript görevleri, ağır DOM güncellemeleri	Kod bölme, scheduler.yield(), etiket yöneticisi temizliği
CLS	0,1 ve altı	Boyutsuz görseller, sonradan yüklenen reklam ve banner blokları	Boyut öznitelikleri (width/height), önceden alan ayırma

Core Web Vitals iyileştirmeleri arama görünürlüğünü nasıl etkiler?

Google, sayfa deneyimi sinyallerini sıralama algoritmalarında doğrudan bir faktör olarak kullanır. İyi bir kullanıcı deneyimi sunan sayfalar, benzer içerik kalitesine sahip rakiplerine göre arama sonuçlarında avantaj kazanır. Teknik hız parametrelerinin optimize edilmesi yalnızca sıralama kazanımıyla sınırlı kalmaz; sitede geçirilen süreyi artırır ve hemen çıkma oranlarını belirgin şekilde düşürür.

Mobil ağlar üzerinden bağlanan kullanıcılar donanım ve bant genişliği kısıtlamaları nedeniyle gecikmelere karşı daha hassastır. INP ve LCP metrikleri sağlıklı seviyeye çekildiğinde e-ticaret sitelerinde sepete ekleme ve ödeme tamamlama adımlarındaki terk edilme oranları geriler. Bu iyileştirmeler arama motorlarının sitenizi değerlendirirken kullanıcı memnuniyetini doğrulamasını kolaylaştırır.

Performans optimizasyonu tek seferlik bir proje değil, düzenli takip gerektiren bir mühendislik sürecidir. Kod tabanına eklenen her yeni özellik veya üçüncü taraf entegrasyonu metrikleri yeniden etkileyebilir. Bu nedenle ölçüm araçlarını şirket içi geliştirme süreçlerine dahil etmek ve saha verilerini düzenli raporlamak sürdürülebilir başarı için zorunludur.