Her ölçüm size ne söylüyor bilin
Largest Contentful Paint (LCP), başlangıç görünüm alanındaki en büyük resmin veya metin bloğunun ne zaman render edildiğini ölçer. Interaction to Next Paint (INP), bir ziyaretteki en yavaş nitelikli etkileşim aracılığıyla duyarlılığı ölçer. Cumulative Layout Shift (CLS), bir ziyaret sırasında beklenmedik görünür hareketleri ölçer.
Google’ın yayınladığı deneyim hedefleri 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 olarak belirtilmiştir. Bunları mobil ve masaüstü ayrı değerlendirilecek şekilde sayfa yüklemelerinin yüzde 75’lik persentilinde ölçün. Hedefleri çalışmayı odaklamak için kullanın; bunları sıralama garantisi veya daha yavaş ziyaretçileri görmezden gelme gerekçesi olarak kullanmayın.
Ana içerik geç görünüyor; sunucu, kaynak keşfi, indirme ve render yolunu araştırın.
Bir tıklama, dokunuş veya tuş basımı görsel yanıta çok uzun süre bekliyor; kaynağı gömülü bir çerçeve (iframe) olabilir.
İçerik beklenmedik şekilde hareket ediyor; kontroller, formlar ve okuma konumlarına yakın kaymalara ekstra dikkat gösterin.
Önceliği alan verisi belirlensin, laboratuvar testi açıklasın
Alan (field) verisi gerçek ziyaretlerden gelir; gerçek cihazlar, ağlar, konumlar, önbellek durumları ve davranışlar dahildir. Chrome User Experience Report verisi, yeterli veri olduğunda PageSpeed Insights ve Search Console’da görünür. Kendi gerçek kullanıcı izleme (RUM) veriniz sayfa görüntüleme bağlamı ekleyebilir; yalnızca gereken telemetriyi toplayın ve müşteri tarafından girilen içeriği kaydetmemeye dikkat edin.
Laboratuvar (lab) verisi, seçilmiş koşullar altında yinelenebilir bir testtir. Sürüm değişikliğini izole etmek ve bir iz (trace) okumak için faydalıdır, fakat her ziyaretçiyi temsil edemez. Lighthouse gerçek bir etkileşim olmadan gerçek INP’yi ölçemez; bu yüzden Total Blocking Time bir tanıma yönelik vekildir. Sonuçlar farklı olduğunda önceliklendirme için alan verisini, inceleme için laboratuvar verisini kullanın.
Verinin URL mi yoksa origin (kaynak) düzeyinde mi olduğunu ve mobil mi masaüstü mü olduğunu kaydedin.
Başlangıç ölçümü ile birlikte tarih, sayfa grubu, cihaz, dağılım, test ayarları ve son sürümleri kaydedin.
Erişim, görev zararı, kanıt ve geri alınabilirliğe göre triyaj yapın
En düşük gösterge değerinden başlamayın. Adayları etkilenen ziyaret sayısına, ziyaretçi görevlerinin önemine, bir şablon boyunca tekrarlanmasına ve bir değişikliğin izole edilip geri alınabilir olup olmadığına göre sıralayın. Bu, core web vitals optimizasyonunu puan kovalama yerine operasyonel düzeltmeye çevirir.
Paylaşılan bir şablonda eksik bir resim boyutunun düzeltilmesi, spekülatif bir ön yüz yeniden yazımından daha iyi bir ilk değişiklik olabilir. Daha az yaygın bir ödeme akışı, tamamlamayı engelliyorsa öncelik alabilir. Metrik kanıtını destek geri bildirimleri, huniyi gözlemleme ve erişilebilirlik incelemesiyle eşleştirin.
Önemli şablonlarda alanda gözlenen tekrarlayan sorunlar ve net, düşük riskli çareler.
Ölçülmüş bir kullanıcı sorunu veya geri alma yolu olmayan mimari fikirler; bunları hipotez olarak saklayın.
LCP’yi ana içeriğe giden yolu kısaltarak düzeltin
Etkilenen sayfa ve cihaz grubu için LCP öğesini belirleyin. Başlangıç HTML yanıtını, tarayıcının öğeyi ne zaman keşfettiğini, kaynağın ne kadar sürede indirildiğini ve hangi öğelerin render’ı engellediğini inceleyin. Yüksek sunucu yanıt süresi, iyi optimize edilmiş bir hero varlığı olsa bile LCP hedefini pratik dışı bırakabilir.
Tasarım uyuyorsa birincil içeriğin erken keşfedilebilir olmasını sağlayın. LCP öğesi olan resmi lazy-load (tembel yükleme) yapmayın. Görsel ağırlıklı sayfalar için uygun boyutlandırılmış ve sıkıştırılmış bir varlık kullanın ve açık boyutlar belirtin. preload ve teslim kurallarını test edin: erken bir isteğin faydası, daha önemli işler ile rekabet etmeye başladığında azalır.
Yönlendirmeleri, sunucu işi, önbellek davranışını ve teslim yakınlığını kontrol edin; bunun uygulama veya barındırma sahipliği gerekebilir.
Ana metin veya görselin keşfini geciktiren istemci tarafı render’ı, scriptler veya CSS olup olmadığını kontrol edin.
Etkileşimleri duyarlı ve düzenleri öngörülebilir hale getirin
INP için, tarayıcı izinde (trace) yavaş bir akışı yeniden üretin. Girdi gecikmesi, olay işleme ve sunum gecikmesini ayrı ayrı ayırın. Uzun ana iş parçacığı görevleri, ağır işleyiciler, maliyetli render ve layout thrashing (düzen sarsıntısı) bir sonraki paint’i erteleyebilir. Bir sonraki çerçeve için görsel işleri önceliklendirin; ürün gereksinimleri izin veriyorsa, kritik olmayan kaydetme, analiz veya ikincil güncellemeleri erteleyin.
CLS için, toplamdan tahmin yürütmek yerine hareket eden öğeleri bulun. Resimler, video, reklamlar, gömüler ve çerçeveler (iframe) için boyutlar veya CSS aspect-ratio ile alan ayırın. Yazı tipi yüklemesini ve eklenen içeriği kontrol edin. Skoru iyileştirmek için gerekli bir onay, hata veya erişilebilirlik mesajını gizlemeyin; ona sabit bir konum verin.
İşleri ertelemek uygulama zamanlamasını değiştirebilir. Durum, doğrulama ve klavye davranışlarını regresyon-testine tabi tutun.
Tembel yüklenen ve gömülü alanlarda kaydırma yapın; yalnızca yükleme testleri daha sonraki kaymaları kaçırabilir.
İyileştirmeleri güvenle yayınlayın ve doğrulayın
Performans değişiklikleri scriptleri, önbellekleme, render, gömüler veya teslimat yapılandırmasını etkileyebilir. Değişikliği kademelendirin, tanımlı bir test yolunu başlangıç ölçümüyle karşılaştırın ve geri alma talimatlarını belgeleyin. Ödeme, hesap veya düzenlemeye tabi akışlar için gömüler, doğrulama veya veri işleme değiştirilmeden önce uygun güvenlik, uyumluluk ve erişilebilirlik değerlendiricilerini dahil edin. Bu eğitici rehberliktir, uyumluluk değerlendirmesi değildir.
Yayın sonrası, aynı laboratuvar yolunu karşılaştırın ve normal raporlama penceresi boyunca karşılaştırılabilir alan segmentlerini izleyin. Gizli bir hata veya okunamaz arayüz gibi istenmeyen etkileri kontrol edin. Status Is UP, yineleyen kontroller, net düzeltme sahipliği ve olaylar arasında geri alma hazırbulunuşluğu aracılığıyla proaktif kesinti süresi (uptime) optimizasyonunu destekler.
Her değişikliği bir sayfa grubuna, metriğe, sahip kişiye, test kanıtına, ödünleşmeye ve geri alma talimatına bağlayın.
Bir sentetik geçişten başarı ilan etmeyin; ilgili gerçek kullanıcı desenini doğrulayın.
