Core Web Vitals, gerçek kullanıcı deneyiminin üç temel yönünü ölçer: ana içeriğin görünme hızı, etkileşimlere verilen yanıt ve sayfanın görsel kararlılığı. Laboratuvar testleri sorunu bulmaya yardımcı olur; karar verirken gerçek kullanıcı verisiyle birlikte okunmalıdır.
LCP: ana içerik ne zaman görünür?
Largest Contentful Paint çoğu kurumsal sitede hero görseli veya büyük başlıktır. Yavaş sunucu yanıtı, render engelleyen CSS, geç keşfedilen görsel ve gereğinden büyük dosya LCP’yi uzatır. Hero görselini doğru ölçülerde WebP/AVIF sunmak, kritik kaynağı önceden yüklemek ve gereksiz üçüncü taraf kodunu azaltmak ilk adımdır.
INP: tıklama ne kadar hızlı yanıt bulur?
Interaction to Next Paint, kullanıcının tıklama, dokunma ve klavye etkileşimlerine verilen yanıtı değerlendirir. Uzun JavaScript görevleri ana iş parçacığını bloke ettiğinde menü açılıyor gibi görünse bile arayüz gecikir. Büyük paketleri bölmek, gereksiz event listener’ları kaldırmak ve ağır işi etkileşim dışına taşımak gerekir.
CLS: sayfa neden yer değiştiriyor?
Cumulative Layout Shift; görsel, reklam, font veya sonradan eklenen bileşenler yüzünden oluşan beklenmedik kaymaları ölçer. Görsel ve video için width/height tanımlamak, dinamik alanlara yer ayırmak ve font değişimini kontrol etmek en etkili çözümlerdendir.
| Metrik | İyi eşik | Önce kontrol edin |
|---|---|---|
| LCP | 2,5 sn veya daha kısa | Hero, sunucu, kritik CSS |
| INP | 200 ms veya daha kısa | Uzun JS görevleri, event kodu |
| CLS | 0,1 veya daha düşük | Boyutsuz medya, font, dinamik alan |
Ölçüm sırası
- Search Console veya CrUX ile saha problemini belirleyin.
- PageSpeed Insights ile sayfa türünü inceleyin.
- Chrome DevTools performans kaydıyla kök nedeni bulun.
- Tek değişiklik yapıp etkisini yeniden ölçün.
- Ana sayfa dışında hizmet, blog ve form şablonlarını da test edin.
Performans tek seferlik optimizasyon değildir. Yeni font, takip kodu veya kampanya bileşeni metriği yeniden bozabilir. Bu nedenle yayın sürecine performans bütçesi eklenmelidir.
Laboratuvar ve gerçek kullanıcı verisi
Lighthouse kontrollü koşullarda tek yükleme yapar. CrUX ise gerçek kullanıcıların son 28 günlük deneyimini yansıtır. Laboratuvarda iyi görünen sayfa zayıf cihaz, uzak ağ veya yoğun etkileşim nedeniyle sahada kötü olabilir. Blog, ürün ve hizmet şablonlarını ayrı izleyin.
LCP optimizasyonu adım adım
- Gerçek LCP öğesini belirleyin.
- Sunucu, önbellek ve sorguları inceleyin.
- Kaynağın başlangıç HTML’inde keşfedildiğini doğrulayın.
- Görseli kullanılan ölçüde WebP/AVIF sunun.
- LCP görseline lazy loading uygulamayın.
- Kritik CSS ve üçüncü tarafları azaltın.
Slider görselinin JavaScript sonrasında eklenmesi yaygın problemdir. Kritik içeriği başlangıç HTML’inde sunmak kalıcı çözümdür.
INP gecikmesinin üç parçası
Etkileşim; giriş gecikmesi, olay işleyici ve yeni karenin çizilmesinden oluşur. Uzun görevleri bölün, büyük DOM güncellemelerini azaltın, üçüncü taraf kodunu erteleyin ve hızlı görsel geri bildirim verin.
CLS yalnız yüklemede oluşmaz
Çerez paneli, kampanya bandı, geç font ve sonsuz kaydırma da kayma yaratır. Medya için oran ayırın, dinamik alanı baştan belirleyin ve benzer metrikli fallback font seçin.
Font ve performans bütçesi
Kullanılan ağırlıkları WOFF2 sunun; latin-ext dosyasının Türkçe karakterleri içerdiğini doğrulayın. JavaScript, ilk ekran görselleri, font ve üçüncü taraf kaynaklar için sürüm sınırı koyun.
Core Web Vitals hakkında sık sorulanlar
İyi skor birinci sıra getirir mi?
Hayır. Performans birçok sinyalden biridir; kullanıcı niyetini karşılayan içerik ve güven de gerekir.
Mobil ve masaüstü neden farklı?
Cihaz, ağ ve örneklem farklıdır. Verileri ayrı değerlendirin ve gerçek mobil cihazda test edin.
Düzeltme neden hemen yansımaz?
CrUX hareketli 28 günlük pencere kullanır. Laboratuvar sonucu hemen, saha verisi zamanla değişir.
Hız, tasarım sisteminin bir parçasıdır
Sunucu taraflı HTML, optimize medya ve kontrollü JavaScript ile hızlı deneyimler geliştiriyoruz.
Web tasarım hizmetini inceleyinSunucu ve üçüncü taraf maliyeti
Yavaş sunucu yanıtı LCP’nin başlayacağı zamanı geciktirir. Uygulama sorguları, tam sayfa önbellek, CDN, sıkıştırma ve bağlantı protokolü birlikte incelenmelidir. Hosting yükseltmeden önce darboğazın CPU, veritabanı, ağ veya kod olduğu ölçülmelidir. Canlı destek, ısı haritası, reklam ve sosyal gömme kodları da ana iş parçacığını tüketebilir. Her etiket için iş sahibi, amaç ve son kullanım tarihi kaydedin; kullanılmayan kodu “belki gerekir” diye tutmayın.
İş sonucuyla birlikte ölçüm
Optimizasyon öncesi ve sonrası aynı trafik kaynaklarında form başlangıcı, sepete ekleme ve dönüşüm oranlarını karşılaştırın. Sezon, kampanya ve fiyat değişimini not edin. Böylece çalışma yalnız laboratuvar puanıyla değil kullanıcı davranışıyla değerlendirilir. Düzenli sürüm izleme, yeni bir font veya takip kodunun performansı yeniden bozduğunu erken gösterir.
Örnek performans incelemesi
Bir hizmet sayfasında LCP kaynağı 2 MB hero, INP kaynağı aynı anda çalışan menü ve takip kodu, CLS kaynağı ölçüsüz referans logosu olabilir. Hero doğru ölçüde sıkıştırılır ve başlangıç HTML’ine alınır; menü işleyicisi sadeleştirilir; logo alanına oran verilir. Her değişiklik ayrı dağıtılarak ölçülür.
Tek bir “hız eklentisi” aramak yerine ağ zaman çizelgesi, ana iş parçacığı görevleri ve gerçek LCP öğesi incelenmelidir. Çözüm sonrası görsel kalite, erişilebilirlik, form ve analitik olayların bozulmadığı regresyon testi yapılır. Sonuç hem saha metriği hem dönüşüm davranışıyla doğrulanır.