Core Web Vitals Nedir? LCP, INP ve CLS Nasıl İyileştirilir? konusunu destekleyen konu görseli

Özet Yanıt

Core Web Vitals, gerçek kullanıcı deneyiminin yükleme, etkileşim ve görsel kararlılık boyutlarını LCP, INP ve CLS ile değerlendirir. TTFB önemli bir performans ölçüsüdür ancak Core Web Vital değildir. Öncelik, Search Console veya CrUX saha verisini laboratuvar testinden ayrı yorumlamaktır.

Bu rehberde

  1. LCP: ana içeriğin görünmesi
  2. INP: etkileşim yanıtı
  3. CLS: görsel kararlılık
  4. Field ve lab verisini ayırın
  5. Şablon bazında düzeltin

LCP: ana içeriğin görünmesi

Büyük hero görselini sıkıştırın, doğru ölçüde sunun, kritik kaynağı geciktirmeyin ve sunucu gecikmesini azaltın.

INP: etkileşim yanıtı

Uzun JavaScript görevlerini bölün, gereksiz kodu azaltın ve tıklama sonrası ana iş parçacığını boşaltın.

CLS: görsel kararlılık

Görsel ve reklam alanlarına boyut verin; sonradan eklenen içeriklerin mevcut öğeleri itmesini önleyin.

Field ve lab verisini ayırın

CrUX gerçek kullanıcı geçmişini; Lighthouse kontrollü laboratuvar koşulunu gösterir. Aynı soruya cevap vermezler.

Şablon bazında düzeltin

Tek URL yerine aynı şablondaki sayfa grubunu analiz edin; deploy sonrası saha verisinin yenilenmesi için zaman tanıyın.

Uygulama rehberi: adım adım değerlendirme

Bu bölüm, konuyu yalnızca tanımlamak yerine uygulamada alınacak kararları, sık yapılan hataları ve kontrol yöntemlerini ayrıntılandırır.

İyi değerlerin teknik karşılığı

LCP için 2,5 saniye veya daha az, INP için 200 milisaniye veya daha az, CLS için 0,1 veya daha az hedeflenir. Değerlendirme genellikle gerçek kullanıcı verisinin 75. yüzdelik dilimine dayanır. Tek seferlik masaüstü Lighthouse sonucu, mobil gerçek kullanıcı deneyiminin yerine geçmez.

LCP sorununu sistematik daraltın

Ana görselin geç yüklenmesi, sunucu yanıtı, engelleyici stil dosyaları ve geç keşfedilen kaynaklar başlıca adaylardır. Ana görselde uygun boyut, ön yükleme ihtiyacının ölçülmesi ve gereksiz lazy loading olmaması önemlidir. Resim formatı kadar görüntünün doğru çözünürlükte servis edilmesi de performansı etkiler.

INP için uzun işlemleri ölçün

Butona basınca gecikme yaşıyorsanız olay işleyicileri, büyük JavaScript paketleri ve ana iş parçacığını meşgul eden işlemleri profil edin. Yalnızca animasyonu kaldırmak sorunu çözmeyebilir. Gerçek cihazlarda menü, filtre, arama ve form gönderme akışlarını tek tek sınayın.

CLS için alan ayırın ve geç yüklenen öğeleri kontrol edin

Resim ve videolara oran veya boyut verin; çerez bildirimi, kampanya bandı ve gömülü bileşenler açılırken mevcut içeriği itmemeli. Yazı tipi değişimi veya dinamik yüklenen kartlar da kaymaya neden olabilir. Değişiklikten sonra saha verisinin yenilenmesi zaman alabilir.

Konuya özel uygulama tablosu

Karar / kontrol alanıUygulamada dikkat edilmesi gereken
İyi değerlerin teknik karşılığıLCP için 2,5 saniye veya daha az, INP için 200 milisaniye veya daha az, CLS için 0,1 veya daha az hedeflenir.
LCP sorununu sistematik daraltınAna görselin geç yüklenmesi, sunucu yanıtı, engelleyici stil dosyaları ve geç keşfedilen kaynaklar başlıca adaylardır.
INP için uzun işlemleri ölçünButona basınca gecikme yaşıyorsanız olay işleyicileri, büyük JavaScript paketleri ve ana iş parçacığını meşgul eden işlemleri profil edin.
CLS için alan ayırın ve geç yüklenen öğeleri kontrol edinResim ve videolara oran veya boyut verin; çerez bildirimi, kampanya bandı ve gömülü bileşenler açılırken mevcut içeriği itmemeli.

Bu konuda sık sorulan sorular

Lighthouse puanı 100 olursa SEO ilk sıraya çıkar mı?

Hayır. Performans kullanıcı deneyiminin bir parçasıdır; içerik, alaka düzeyi ve diğer faktörlerin yerini tutmaz.

INP neyi ölçer?

Gerçek etkileşimlerden sonra tarayıcının sonraki görüntüyü ne kadar hızlı sunabildiğine odaklanır.

Kaynaklar ve doğrulama

Editoryal not

Bu içerik 15 Ekim 2026 tarihinde hazırlanmıştır. Fiyat, mevzuat ve üçüncü taraf hizmet koşulları değişebileceği için karar anında ilgili sağlayıcının güncel ve resmî bilgisini ayrıca doğrulayın.

İlgili rehberler

Mobil uyumlu tasarımları inceleyin

Performans ve kullanılabilirlik temeliyle hazırlanan site tasarımlarını görün.

Mobil uyumlu tasarımları inceleyin