Core/Dash Boyutu: Input Type (INP)

Boyut: Input Type INP (inpit)

Input Type (INP) boyutu, kullanıcının sayfa ziyareti sırasında gerçekleşen en kötü tek etkileşimi tetikleyen DOM event türünü kaydeder. Değer, tarayıcının Event Timing API'sinden alınan ham event adıdır: click, keydown, pointerdown, pointerup, keypress ve diğer birkaçı.

INP, en kötü senaryo metriğidir. Etkileşimlerin ortalamasını almaz. Girdiden sonraki boyamaya kadar en uzun süren tek etkileşimi bulur ve bu süreyi bildirir. Input type boyutu, kullanıcının tam o anda ne yaptığını söyler. "INP 450 ms" olduğunu bilmek ile "kullanıcı arama alanına yazı yazdığı için INP 450 ms" olduğunu bilmek arasındaki fark budur.

Event Timing API, ilişkili event'leri tek bir mantıksal etkileşimde gruplar. Dokunmatik ekrana yapılan bir dokunuş; pointerdown, pointerup ve click event'lerini tek bir grup olarak tetikler. Bu gruptaki en uzun event handler, etkileşim gecikmesini belirler. CoreDash, etkileşimi yavaşlatan en uzun handler'ın event türünü kaydeder.

Input Type, INP İçin Neden Önemli?

Her input type, JavaScript kod tabanının farklı bir bölümüyle eşleşir. INP'si kötü bir sayfada baskın girdi türü olarak keydown görüyorsan, sorunun tuş vuruşu işleyicilerinde olduğunu hemen anlarsın: otomatik tamamlama, yazarken arama (search-as-you-type) veya her tuş basışında çalışan form doğrulaması. click görüyorsan sorun buton ve link işleyicilerindedir: navigasyon mantığı, state güncellemeleri, modal açılışları veya senkronize tetiklenen analitik çağrıları.

Bu boyut olmadığında, INP incelemesi profiling oturumları, adımları yeniden üretme ve 75. persentildeki kullanıcının hangi etkileşimi denediğini tahmin etmeye çalışmakla başlar. Input type boyutu sayesinde doğrudan ilgili handler'a geçersin. Elde ettiğin zaman kazancı gerçektir.

Input type, platform farklarını da gösterir. İleri düzey kullanıcıların yoğun klavye navigasyonu kullandığı bir sitede, kötü INP'yi tetikleyen yüksek oranda keydown event'i görürsün. Ağırlıklı olarak mobilde kullanılan bir üründe ise pointerdown baskın olur. Aynı sayfa, aynı INP skoru; ancak kullanıcılarının gerçekte kim olduğuna bağlı olarak farklı handler'lara uygulanan aynı düzeltme.

Input Type'lar

click ve pointerdown

Bunlar CoreDash verilerindeki en yaygın input type'lardır ve en kötü INP event'lerinin yaklaşık %75'ini oluşturur. Masaüstünde click, fare butonunun bırakılmasını temsil eder. Mobilde ise dokunma eylemi tüm zinciri tetikler: parmak ekrana dokunduğunda önce pointerdown, kaldırıldığında pointerup ve en sonda click tetiklenir. CoreDash, bu zincirde en uzun handler'a sahip olan event'i kaydeder.

Click handler'ları, yoğun senkronize JavaScript işlerinin ana merkezidir. Bir navigasyon öğesine yapılan tek bir click; state yönetimi güncellemelerini, DOM mutasyonlarını, analitik event'lerini ve re-render işlemini aynı task içinde tetikleyebilir. Click handler'ındaki her milisaniyelik senkronize iş, INP'ye eklenen bir milisaniye demektir.

Yavaş click handler'larının çözümü task'ları parçalamaktır (task decomposition). Handler'ı daha küçük task'lara bölmek ve tarayıcının aralarda render yapmasını sağlamak için <code>scheduler.yield()</code> kullan. Analitik çağrıları gibi kritik olmayan işleri sıfır gecikmeli bir setTimeout içine taşı veya bunları tamamen requestIdleCallback ile ertele. Tarayıcının bir sonraki boyamadan önce yalnızca görsel yanıtı etkileyen işleri tamamlaması yeterlidir. Kalan her şey bekleyebilir.

keydown

Klavye girdisi, CoreDash verilerindeki en kötü INP event'lerinin yaklaşık %15'ini oluşturur; ancak en vahim skorlardan bazılarını bu girdi üretir. Bunun nedeni sıklıktır: Arama alanına yazan bir kullanıcı, her bir tuş vuruşunda keydown tetikler. Handler'ın 200 ms sürüyorsa, kullanıcı yazdığı her karakterden sonra 200 ms gecikme yaşar. 10 karakterlik bir arama sorgusu, birikerek 2 saniyelik bloklama süresine dönüşür.

Asıl sorumlular; her tuş vuruşunda senkronize API istekleri gönderen veya maliyetli DOM diffing işlemleri gerçekleştiren yazarken arama uygulamaları ile her tuş basışında tüm formu yeniden denetleyen form doğrulamalarıdır. Bu desenler küçük ölçekte sorunsuz çalışsa da gerçek kullanıcı koşullarında çöker.

Standart çözümler debouncing ve offloading'dir. Arama handler'ını, kullanıcı yazmayı durdurduktan sonra (genellikle 200 ila 300 milisaniye) tetiklenecek şekilde debounce et. Büyük bir yerel veri kümesinde fuzzy search gibi daha karmaşık işlemler için, hesaplamayı bir Web Worker'a aktar. Böylece main thread, her keydown event'inden sonra bir sonraki kareyi render etmek için serbest kalır.

pointerup

Pointer up event'leri, CoreDash verilerindeki en kötü INP durumlarının yaklaşık %8'ini temsil eder. pointerup, bir dokunma veya click dizisinin sonunda, pointerdown'dan sonra tetiklenir. Bazı framework'ler ve UI kütüphaneleri, birincil "click" davranışlarını click yerine pointerup event'ine bağlar; bu da handler'ı etkileşim yaşam döngüsünde daha erken bir aşamaya taşır.

Baskın input type olarak pointerup göründüğünde, yapılacak inceleme click handler'ları ile aynıdır: handler içinde hangi JavaScript kodunun çalıştığını bul ve sonraki boyamayı engellemesi gereken işleri ertelenebilecek işlerden ayır. click ile arasındaki fark genellikle uygulama düzeyinde değil, framework düzeyinde bir karardır. Bu yüzden çözüm, bileşen kütüphanesinin etkileşim bağlama (interaction binding) yapısını düzenlemeyi gerektirebilir.

Debugging İş Akışı

1. CoreDash'te input type'a göre filtrele: Sorunlu bir URL için INP dökümünü aç ve en kötü etkileşimlerde hangi input type'ın baskın olduğunu kontrol et. Eğer tek bir tür, kötü INP event'lerinin yarısından fazlasını oluşturuyorsa oradan başla. Dağılım, profiling süreni nereye harcaman gerektiğini gösterir.
2. Doğru etkileşimle yeniden üret: Chrome DevTools'u aç, Performance profiling'i etkinleştir ve CoreDash'te gösterilen etkileşimin aynısını gerçekleştir. keydown baskın bir sayfayı yazarak test etmelisin. click baskın bir sayfayı ise kullanıcılarının etkileşime girdiği öğelere tıklayarak test etmelisin. Trace kaydet ve girdi event'inden hemen sonra tetiklenen main thread'deki long task'ları belirle.
3. Türe özgü düzeltmeyi uygula ve doğrula: keydown sorunları için debouncing ekle ve yeniden profiling yap. click sorunları için handler içindeki mantıksal kesme noktalarına scheduler.yield() çağrıları ekle. Test ortamına deploy et, etkileşim betiklemeli (interaction scripting) WebPageTest veya Chrome DevTools Performance panelini kullan ve yayına almadan önce task süresinin düştüğünü doğrula.

Mühendislik Pratik Kuralları

• Kötü INP'nde keydown baskınsa: Tüm arama ve otomatik tamamlama handler'larına debouncing ekle. Standart başlangıç noktası 200 ms gecikmedir. Bu gecikmeye rağmen hesaplama maliyetliyse, bir Web Worker kullanarak işi main thread dışına taşı.
• click veya pointerdown baskınsa: Handler'ların, tarayıcı boyama yapmadan önce çok fazla senkronize iş yapıyordur. Sorunlu URL üzerindeki her click handler'ını denetle. Senkronize analitik çağrılarını kaldır. Çok adımlı mantığı, adımlar arasına scheduler.yield() koyarak böl.
• pointerup baskınsa: Framework'ünün etkileşim mantığını click yerine pointerup event'ine bağlayıp bağlamadığını kontrol et. Çözüm genellikle click handler'ları ile aynıdır ancak kod tabanındaki giriş noktası farklıdır.
• Net bir birincisi olmayan karışık dağılım varsa: Sorun tek bir etkileşim türü değildir. Tüm türlerdeki en yavaş üç etkileşimin profilini çıkar ve bunları etki sırasına göre ele al. Farazi optimizasyon yapma.

Input Type bir yönlendirme sinyalidir. Sana neyin yavaş olduğunu söylemez; nereye bakacağını gösterir. Kullanıcılarının INP bozulduğunda tıkladığını, yazdığını veya dokunduğunu bildikten sonra, sonraki her inceleme adımı çok daha hızlı ve hedef odaklı hale gelir.