Core Web Vitals Rehberi: LCP, INP ve CLS Nasıl İyileştirilir?

Core Web Vitals nedir?

Core Web Vitals, web sayfasındaki gerçek kullanıcı deneyiminin üç önemli yönünü ölçen metriklerdir: yükleme performansı, etkileşimlere verilen yanıt ve görsel kararlılık. Güncel temel metrikler LCP, INP ve CLS''dir.

İyi kabul edilen hedefler genel olarak LCP için 2,5 saniye veya daha kısa, INP için 200 milisaniye veya daha kısa ve CLS için 0,1 veya daha düşük değerdir. Değerlendirmede gerçek kullanıcı ziyaretlerinin 75. yüzdelik dilimine bakılması önemlidir.

LCP nedir?

Largest Contentful Paint, görünür alandaki büyük ana içerik öğesinin ekrana gelme süresini ölçer. Bu öğe çoğu sitede büyük bir başlık, banner görseli veya hero alanındaki içeriktir.

LCP nasıl iyileştirilir?

Öncelikle sunucu yanıt süresini düşürün. Ana görseli gereksiz büyük boyutta göndermeyin. LCP görselini lazy load ile geciktirmeyin; gerekli durumlarda öncelikli yükleyin. Render engelleyen CSS ve JavaScript miktarını azaltın. CDN ve cache stratejisini sitenin trafik yapısına göre değerlendirin.

Bir diğer yaygın sorun, tarayıcının LCP kaynağını çok geç keşfetmesidir. Örneğin hero görseli JavaScript çalıştıktan sonra ekleniyorsa kullanıcı gereksiz bekler. Ana içerik için mümkün olduğunca erken keşfedilebilir kaynaklar tercih edin.

INP nedir?

Interaction to Next Paint, kullanıcının tıklama, dokunma veya klavye etkileşimlerine sayfanın ne kadar hızlı görsel yanıt verdiğini ölçer. Sayfa hızlı açılmış olsa bile butona basıldığında arayüz uzun süre donuyorsa INP kötü olabilir.

INP nasıl iyileştirilir?

Uzun JavaScript görevlerini bölmek, gereksiz işlem yapan event handler''ları sadeleştirmek ve ana iş parçacığını uzun süre bloke eden kodları azaltmak temel yaklaşımlardır. Büyük veri listelerinde tüm işlemleri aynı anda yapmak yerine parçalara bölmek, gerektiğinde sanallaştırma veya gecikmeli işlem kullanmak faydalı olabilir.

Üçüncü taraf scriptleri de etkileşim süresini etkileyebilir. Reklam, analiz, sohbet veya harita araçlarının gerçekten gerekli olup olmadığını ve hangi sırayla yüklendiğini kontrol edin.

CLS nedir?

Cumulative Layout Shift, sayfa yüklenirken veya kullanılırken içeriklerin beklenmedik biçimde yer değiştirmesini ölçer. Kullanıcı bir butona tıklamak üzereyken üstten yeni bir alan açılması ve butonun aşağı kayması tipik bir CLS problemidir.

CLS nasıl iyileştirilir?

Görseller ve videolar için genişlik-yükseklik oranı ayırın. Reklam veya dinamik içerik alanlarında önceden yer rezerve edin. Web fontlarının geç yüklenmesiyle oluşan büyük metin kaymalarını azaltın. Kullanıcı etkileşimi olmadan sayfanın üst tarafına yeni içerik yerleştirmekten kaçının.

Laboratuvar verisi ve gerçek kullanıcı verisi aynı değildir

PageSpeed Insights gibi araçlarda laboratuvar testleri ve gerçek kullanıcı verileri farklı amaçlara hizmet eder. Laboratuvar testi kontrollü koşullarda hata ayıklamayı kolaylaştırır. Gerçek kullanıcı verisi ise farklı cihaz, ağ ve kullanım biçimlerinin gerçek etkisini gösterir.

Özellikle INP, gerçek etkileşimleri gerektirdiği için saha verisi çok değerlidir. Laboratuvar ortamında Total Blocking Time gibi metrikler etkileşim sorunlarını teşhis etmek için yardımcı sinyal olarak kullanılabilir.

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

PageSpeed Insights hızlı başlangıç için kullanışlıdır. Chrome DevTools Performance paneli kod seviyesinde darboğazları araştırmaya yardımcı olur. Search Console ise yeterli gerçek kullanıcı verisi bulunan URL gruplarındaki Core Web Vitals sorunlarını takip etmek için kullanılabilir.

Puanı değil kullanıcı deneyimini optimize edin

Amaç tek bir testte 100 puan almak değildir. Gerçek kullanıcıların hızlı, kararlı ve duyarlı bir deneyim yaşaması daha önemlidir. Önce saha verisinde en büyük sorunu belirleyin, değişikliği uygulayın ve etkisini yeniden ölçün.

Önceliklendirme örneği

LCP 5 saniye, INP 180 milisaniye ve CLS 0,05 olan bir sayfada ilk öncelik LCP olmalıdır. Tüm metrikleri aynı anda rastgele optimize etmek yerine en kötü kullanıcı deneyimi alanından başlamak daha verimlidir.

Sonuç

Core Web Vitals çalışması tek seferlik bir işlem değildir. Yeni görseller, üçüncü taraf scriptler veya tasarım değişiklikleri performansı yeniden etkileyebilir. Bu nedenle ölçüm, düzeltme ve yeniden ölçüm döngüsü kurulmalıdır. Hız sorunlarının diğer nedenleri için Web Performansı kategorimizi takip edebilirsiniz.