Site açılıyor, peki düğmeler neden gecikiyor?
Bir formu doldurdun, “Kaydet” düğmesine bastın ve ekranda hiçbir şey değişmedi. Bir daha bastın. Sonunda iki işlemin birden çalıştığını gördün. Sorun yalnızca beklemek değil; sayfanın seni duyup duymadığını anlayamamak. Etkileşim performansı tam olarak bu boşluğa bakar.
Benim için bir sitenin hızlı olması yalnızca ilk ekranın çabuk görünmesi değil. Düğmeye bastığımda ne olduğunu anlayabilmek de hız hissinin parçası. Güzel bir arayüz birkaç saniye tepkisiz kalınca bütün özen geri plana düşebilir. Bana kalırsa performansı tasarımın sonuna bırakmak yerine, her etkileşimin içinde düşünmek gerekiyor. Özellikle blog filtresi ve kart açılışı gibi basit hareketlerde gereksiz beklemek istemem.
1. Açılış hızı ile tepki hızını ayır
INP, yani Interaction to Next Paint, tıklama, dokunma veya klavye etkileşiminden sonra tarayıcının bir sonraki görüntüyü sunmasına kadar geçen gecikmeyi değerlendirir. Sayfanın tüm ziyaret boyunca verdiği tepkilerle ilgilenir; yalnızca ilk açılışı ölçmez. Ayrıca bir dosyanın tamamen yüklenmesi veya sunucudaki işlemin bitmesiyle aynı şey değildir. web.dev'in INP açıklaması bu ayrımı netleştirir.
2. Tek bir hızlı bilgisayara güvenme
web.dev, gerçek ziyaretlerin yüzde 75'lik diliminde, mobil ve masaüstünü ayrı değerlendirerek 200 milisaniye veya altını iyi INP olarak tanımlar. Bu, her isteğin 200 milisaniyede tamamlanacağı anlamına gelmez. Yerel bir test de bütün ziyaretçilerin deneyimini temsil etmez.
Örnek bir kontrol listesi hazırlayabilirsin: menüyü aç, kategori değiştir, arama yap, form gönder. Hangi eylemde ekranın yanıtı gecikiyor? Gerçek kullanıcı verisi varsa önceliği ona ver; yoksa farklı cihazlarda bu akışları deneyerek ilk sorun listesini çıkar.
3. Görsel geri bildirimi doğru ver
Bir kayıt işlemi için üç ayrı durum tasarlamak yararlıdır: “Kaydet”, “Kaydediliyor…” ve “Kaydedildi”. Son mesajı ancak kayıt başarılı olduğunda göster. Başarısızlıkta da yeniden deneme yolunu açık bırak. Kapaktaki başarı bildirimi, bu akışın son durumunu temsil eden AI üretimi bir örnektir; gerçek performans ölçümü değildir.
Teknik tarafta uzun JavaScript işleri, tıklama sonrasında yapılan ağır hesaplar ve pahalı ekran güncellemeleri incelenmelidir. INP iyileştirme rehberi, sorunu girdi gecikmesi, işlem süresi ve görüntünün sunulması aşamalarında ele alır.
İlk adım: en sık kullanılan düğme
Her şeyi bir anda yeniden yazma. En önemli kullanıcı eylemini seç, gecikmeyi kaydet ve o akışı düzelt. Ardından yeniden ölç. Gölgeli, basılabilir görünen bir düğme hoş bir ayrıntıdır; asıl güven, tıklamanın anlaşılır ve doğru bir yanıt üretmesiyle oluşur.
Benim yaklaşımım
Bir kategori filtresi tasarlasam seçilen düğmenin durumunu hemen görünür yapardım. İçerik hazırlanıyorsa bunu sakin bir geri bildirimle anlatırdım. Ardından farklı cihazlarda hızlı tıklamalarla akışı kontrol ederdim. Aynı işlem iki kez tetikleniyor mu, sonuç geldiğinde odak kayboluyor mu? Benim için bu ayrıntılar gösterişli geçişten daha önce gelir.
