LCP, INP ve CLS nedir? Web performansı nasıl ölçülür?

Core Web Vitals, Google'ın sayfa deneyimi için öne çıkardığı üç ölçümdür. LCP yüklemeyi, INP etkileşime tepkiyi, CLS görsel kaymayı izler. İyi bir deneyim için hedefler, ziyaretlerin çoğu için konmuştur. web.dev bunu sayfa yüklemelerinin yüzde 75'lik dilimi olarak yazar. Mobil ve masaüstü ayrı okunur. Sayfayı bir kez açıp hızlı bulmak, bu dilimi tutturmak değildir.

LCP ve CLS, 31 Ekim 2024'te güncellenen Web Vitals sayfasında kararlı ölçümdür. INP, 2024'te First Input Delay'in yerine geçen kararlı ölçümdür. Kararlı ölçüm yılda birden fazla değiştirilmez. Yine de kalıcı olmak zorunda değildir. Bu üç sayı, metnin doğru olup olmadığını söylemez. İyi bir yükleme süresi dağınık bir sayfayı düzeltmez. Sırayı da bu yazı vaat etmez.

LCP, ziyaretçi sayfayı açmaya başladıktan sonra görünen alandaki en büyük görselin veya metin bloğunun boyanmasına kadar geçen süredir. Kapak görseli çoğu sayfada bu öğedir. Süreyi tek bir ayarla düzeltmek nadiren yeter. web.dev, ilk HTML belgesine ve LCP öğesinin kullandığı dosyaya birlikte bakılmasını önerir.

İlk baytın gecikmesi, yani TTFB, sunucunun HTML'i geç göndermesidir. Yönlendirmeler, ziyaretçinin sunucuya uzak olması veya önbelleğin kullanılamaması bunu uzatır. TTFB ile ilk içeriğin görünmesi arasındaki uzun ara, tarayıcının boyamadan önce çok sayıda dosya indirdiğini veya içeriğin JavaScript ile kurulduğunu gösterebilir. İlk içerik ile LCP arasındaki uzun ara ise asıl görselin HTML'de hazır olmadığını, betiğin onu sonradan istediğini düşündürür.

LCP görseline loading="lazy" vermek yüklemeyi bilerek geciktirir. web.dev, LCP görselinin asla tembel yüklenmemesini yazar. Görsel HTML'de duruyorsa fetchpriority="high" ile öncelik verilebilir. Bu önceliği çok sayıda görsele vermek işe yaramaz. PageSpeed Insights'ta önce gerçek kullanıcı verisine, yani CrUX bölümüne bakın. Laboratuvar bölümü ancak saha verisiyle aynı yöndeyse teşhis için kullanılır. Bir adresin kendi verisi yoksa araç, sitenin tamamının verisini gösterebilir. Ana sayfa ile bir iç sayfanın LCP'si aynı olmak zorunda değildir.

INP, ziyaret boyunca nitelikli etkileşimlere bakar ve en uzun olanı raporlar. Çok sayıda etkileşimde aykırı değerler dışarıda kalabilir. İyi bir deneyim için 200 milisaniye veya altıdır. Lighthouse bu ölçümü, kullanıcı girişi olmayan bir testte alamaz. Laboratuvarda onun yerine Total Blocking Time kullanılır. Laboratuvardaki iyileşme sahadaki INP'yi düzeltebilir. Onun yerine geçmez.

Bir etkileşim üç parçaya ayrılır. Gecikme, ziyaretçi tıkladığında başlar ve olayın işlenmesi başlayana kadar sürer. İşleme, tıklamaya cevap veren kodun çalışma süresidir. Sunum, kod bittikten sonra tarayıcının bir sonraki kareyi ekrana getirmesine kadar olan süredir. Hangi parçanın uzun olduğu bilinmeden kodu küçültmek tahmindir.

CLS, görünür içeriğin beklenmedik biçimde yer değiştirmesidir. web.dev'in sık yazdığı nedenler, boyutsuz görseller, geç gelen reklam ve gömülü içerik, yerleşimi bozan animasyonlar ve yazı tipi değişimidir.

Görsele veya videoya genişlik ve yükseklik vermemek, tarayıcının yer ayırmasını dosya inene kadar erteler. CSS ile genişliği yüzde yüz, yüksekliği otomatik yapmak da aynı boşluğu bırakır. width ve height, ya da aspect-ratio, yerin önceden açılmasını sağlar. Reklam, harita, video gömüsü ve sonradan eklenen bantlar da aynı şekilde itebilir. Geç gelen içerik için min-height veya aspect-ratio ile yer ayırın. Reklam gelmezse ayrılan yeri kapatmak, içeriği sonradan itmek kadar kayma üretir. Yeri ayıramıyorsanız, sonradan gelen içeriği sayfanın daha altına almak kaymanın etkisini azaltır.

top ve left ile yapılan animasyon yerleşimi kaydırır. transform ile yapılan taşıma, CLS'e yazılmaz. Web fontu gelince yedek fontun yerini alması da satırları oynatır. Yedek font, asıl fonta yakın bir aileden seçilir. font-display: optional, font ilk yerleşimden önce yetişmezse yazı tipini değiştirmeden devam edebilen bir yoldur.

Ziyaretçinin kendi tıkladığı bir yüklemeden sonraki 500 milisaniye içindeki kayma CLS'e yazılmaz. Daha fazla ürün yükle gibi bir düğme bu yüzden, haber vermeden üstten inen bir banttan farklıdır.

PageSpeed Insights'ın üst bölümü gerçek Chrome kullanıcılarının verisidir. Alt bölüm laboratuvardır. İkisi ayrılıyorsa, saha verisi deneyimi anlatır. Laboratuvar, nedeni görmek için kullanılır. Kendi gerçek kullanıcı ölçümünüz, CrUX'un vermediği sayfa ayrıntısını tamamlar. JavaScript ile okunan değer, CrUX raporuyla aynı çıkmak zorunda değildir.

Bu ölçüler sayfanın ne söylediğini değiştirmez. Metin, form ve teklif site ve yazılım işinin içinde kalır.