Üç değer, üç eşik
LCP, sayfadaki en büyük içerik öğesinin ekrana gelme süresi. Bu bir görsel de olabilir, büyük bir metin bloğu da. İyi değer 2,5 saniye ve altı.
INP, kullanıcının sayfayla etkileşimine sayfanın ne kadar çabuk karşılık verdiği. web.dev’in tanımıyla, ziyaret boyunca yapılan bütün tıklama, dokunma ve tuş basışlarının gecikmesi gözleniyor; fareyle üzerine gelmek ve kaydırmak sayılmıyor. 200 milisaniye ve altı iyi, 500 milisaniyenin üstü kötü. Kullanıcı sayfada hiçbir şeye tıklamadıysa o ziyaret için INP değeri oluşmuyor.
CLS, sayfa yüklenirken öğelerin yer değiştirmesini ölçüyor. Okurken metnin aşağı kayması, tıklayacağınız düğmenin son anda yer değiştirmesi buraya yazılıyor. 0,1 ve altı iyi.
Üç eşiğin ortak kuralı 75. yüzdelik. Bir sayfa, ziyaretlerin yüzde 75’inde eşiğin altında kalıyorsa o değerden geçiyor; ölçüm mobil ve masaüstü için ayrı yapılıyor. Ortalama değil yüzdelik kullanılmasının nedeni, yavaş telefon ve zayıf bağlantıdaki kullanıcıların da hesaba girmesi.
Saha verisi ve laboratuvar verisi
PageSpeed Insights’ın sonuç sayfası iki yarıdan oluşuyor. Üst yarı saha verisi: gerçek Chrome kullanıcılarının son 28 günde sitenizde yaşadıkları. Alt yarı laboratuvar verisi: tek bir cihazın ve sabit bir ağın taklit edildiği tek bir yükleme. Google’ın değerlendirmesi üst yarıya dayanıyor.
Sitenizi ölçtüğünüzde üst yarı büyük olasılıkla boş gelecek. Chrome Kullanıcı Deneyimi Raporu’na girmek için bir sayfanın herkese açık olması ve yeterince ziyaret alması gerekiyor; eşiğin kaç olduğu açıklanmıyor. Sayfanın verisi yetmezse araç bütün sitenin verisine bakıyor, o da yetmezse gerçek kullanıcı verisi gösteremiyor. Veriye yalnızca masaüstü ve Android’deki Chrome kullanıcıları katkı yapıyor; iOS’taki Chrome dahil değil.
Geriye laboratuvar kalıyor ve onun da bir sınırı var: kullanıcı olmadığı için INP ölçemiyor. Lighthouse bunun yerine Total Blocking Time değerini veriyor; ana iş parçacığının ne kadar süre meşgul kaldığını gösteren bir vekil. Laboratuvar ölçümünü bu yüzden bir not olarak değil, bir teşhis aracı olarak kullanıyoruz: neyin yavaş olduğunu söylüyor, kullanıcının ne yaşadığını değil.
Derste yaptığımız iki düzeltme
LCP için önce öğeyi buluyoruz; PageSpeed Insights onu adıyla gösteriyor. Öğe bir görselse web.dev’in rehberindeki üç kural sırayla uygulanıyor. Görsel HTML kaynağında bulunabilir olmalı: img öğesinde src ya da srcset ile; betikle sonradan eklenen ya da CSS arka planı olan bir görseli tarayıcı geç fark ediyor. LCP görseli asla lazy yüklenmemeli; rehberin ifadesiyle bu her zaman gereksiz bir gecikme yaratıyor. Ve görsele fetchpriority="high" verilerek tarayıcıya önceliği söylenmeli.
Asistanla çalışırken bakacağınız yer şurası: bütün görsellere topluca loading="lazy" eklenmiş ve ilk ekrandaki görsel de bundan payını almış olabilir. AGENTS.md’ye bir satır ekliyoruz: ilk ekrandaki görsel eager ve yüksek öncelikli, geri kalanı lazy.
CLS’te web.dev en yaygın nedenleri sayıyor: boyutu yazılmamış görseller; boyutu yazılmamış reklam, gömülü içerik ve iframe’ler; sayfaya sonradan eklenen içerik; web yazı tipleri. İlki 3. dersten beri kuralınız: her görselde width ve height. Tarayıcı bu iki değerden en-boy oranını hesaplayıp yeri önceden ayırıyor. Bugün gömülü haritaya, videoya ve varsa çerez bildirimine bakıyoruz; her birinin yeri yüklenmeden önce ayrılmış olmalı.
Üçüncü taraf betiklerin bedeli
Astro ile kurduğunuz site varsayılan olarak tarayıcıya çok az JavaScript gönderiyor; INP tarafında avantajlı başlıyorsunuz. Bu avantajı geri alan şey sonradan eklenenler: sayaç, canlı destek penceresi, harita, video oynatıcı, sosyal medya eklentisi. web.dev’in INP rehberine göre betiklerin ayrıştırılması, derlenmesi ve çalıştırılması ana iş parçacığını meşgul eden uzun görevler yaratıyor ve o sırada yapılan tıklama bekliyor.
Derste basit bir deney yapıyoruz. En ağır sayfanızı ölçüyor, üçüncü taraf betikleri tek tek kapatıp yeniden ölçüyorsunuz. Her betiğin bedeli Total Blocking Time farkı olarak önünüze geliyor. Sonra her biri için karar: kalır, kullanıcı etkileşimine kadar gecikir ya da gider. Haritayı tıklanınca yüklenen bir görselle değiştirmek bu derste yapılabilecek bir iştir.
