Core/Dash Boyutu: Girdi Türü (INP)

Boyut: Girdi Türü INP (inpit)

Girdi Türü (Input Type - INP) boyutu, kullanıcının sayfa ziyareti sırasında en kötü tekil etkileşimi tetikleyen DOM olay türünü kaydeder. Değer, tarayıcının Event Timing API'sindeki ham olay adıdır: click, keydown, pointerdown, pointerup, keypress ve diğer birkaçı.

INP bir en kötü durum (worst-case) metriğidir. Etkileşimlerin ortalamasını almaz. Girdiden sonraki ilk boyamaya (next paint) kadar en uzun süren tek bir etkileşimi bulur ve bu süreyi raporlar. Girdi türü boyutu, kullanıcının tam o anda ne yaptığını söyler. "INP'nin 450ms olduğunu" bilmek ile "Kullanıcı arama alanınıza yazı yazdığı için INP'nin 450ms olduğunu" bilmek arasındaki fark budur.

Event Timing API, ilgili olayları tek bir mantıksal etkileşimde gruplandırır. Dokunmatik ekrandaki bir dokunuş; pointerdown, pointerup ve click olaylarını tek bir grup olarak tetikler. Bu grup içindeki en uzun süren tek olay işleyicisi (event handler), etkileşim gecikmesini belirler. CoreDash, etkileşimi yavaşlatan en uzun işleyicinin olay türünü kaydeder.

Girdi Türü INP İçin Neden Önemlidir?

Her girdi türü, JavaScript kod tabanınızın farklı bir bölümüyle eşleşir. Kötü INP'ye sahip bir sayfada baskın girdi türü olarak keydown görüyorsanız, sorunun tuş vuruşu işleyicilerinizde olduğunu anında anlarsınız: otomatik tamamlama, yazarken arama, her tuşa basıldığında çalışan form doğrulaması. Eğer click görüyorsanız, sorun buton ve bağlantı işleyicilerinizdedir: gezinme mantığı, durum güncellemeleri, modal açılışları, senkron olarak tetiklenen analitik çağrıları.

Bu boyut olmadan, bir INP incelemesi profil çıkarma oturumları, yeniden üretme adımları ve 75. yüzdelik dilimdeki kullanıcının hangi etkileşimi denediğini tahmin etmekle başlar. Girdi türü boyutu sayesinde, doğrudan ilgili işleyiciye atlarsınız. Zamandan tasarruf gerçektir.

Girdi türü aynı zamanda platform farklılıklarını da ortaya çıkarır. İleri düzey kullanıcılardan yoğun klavye navigasyonu alan bir site, kötü INP'yi tetikleyen yüksek oranda keydown olayları gösterecektir. Ağırlıklı olarak mobilde kullanılan bir üründe ise pointerdown baskın olacaktır. Aynı sayfa, aynı INP puanı; kullanıcılarınızın gerçekte kim olduğuna bağlı olarak farklı işleyicilere aynı düzeltme uygulanır.

Girdi Türleri

click ve pointerdown

Bunlar, en kötü INP olaylarının kabaca %75'ini oluşturan, CoreDash verilerindeki en yaygın girdi türleridir. Masaüstünde click, bir fare düğmesinin bırakılmasını temsil eder. Mobilde, bir dokunuş tüm zinciri tetikler: parmak ekrana dokunduğunda önce pointerdown tetiklenir, ardından kalktığında pointerup ve en sonunda click tetiklenir. CoreDash, bu zincirde hangi olayın en uzun işleyiciye sahip olduğunu kaydeder.

Tıklama işleyicileri, ağır senkron JavaScript işlerinin birincil konumudur. Bir gezinme öğesine tek bir tıklama; aynı görev içinde durum yönetimi güncellemelerini, DOM mutasyonlarını, analitik olaylarını ve yeniden oluşturmayı (re-render) tetikleyebilir. Bir tıklama işleyicisindeki her bir milisaniyelik senkron çalışma, INP'ye eklenen bir milisaniyedir.

Yavaş tıklama işleyicilerinin çözümü görev ayrıştırmasıdır. İşleyiciyi daha küçük görevlere bölmek ve tarayıcının bunlar arasında render yapmasına izin vermek için <code>scheduler.yield()</code> kullanın. Analitik çağrıları gibi kritik olmayan işleri sıfır gecikmeli bir setTimeout içine taşıyın veya bunları tamamen requestIdleCallback'e erteleyin. Tarayıcının, bir sonraki boyamadan önce yalnızca görsel yanıtı etkileyen işleri tamamlaması gerekir. Diğer her şey bekleyebilir.

keydown

Klavye girdisi, CoreDash verilerindeki en kötü INP olaylarının kabaca %15'ini oluşturur, ancak en vahim puanlardan bazılarını üretir. Nedeni sıklıktır: bir arama alanına yazı yazan bir kullanıcı, her bir tuş vuruşunda keydown tetikler. İşleyiciniz 200ms sürüyorsa, kullanıcı yazdığı her karakterden sonra 200ms gecikme yaşar. 10 karakterlik bir arama sorgusu, 2 saniyelik birikmiş engelleme süresine dönüşür.

Yaygın suçlular, her tuş vuruşunda senkron API istekleri tetikleyen veya pahalı DOM diffing işlemleri çalıştıran yazarken arama uygulamaları ve her tuşa basıldığında tüm formu yeniden kontrol eden form doğrulamasıdır. Bu desenler küçük ölçekte gayet iyi çalışır ve gerçek kullanıcı koşulları altında çöker.

Standart çözümler debouncing ve offloading'dir. Arama işleyicinize debounce uygulayın, böylece yalnızca kullanıcı yazmaya ara verdikten sonra, genellikle 200 ila 300 milisaniye sonra tetiklenir. Büyük bir yerel veri kümesinde bulanık arama gibi daha karmaşık işlemler için, hesaplamayı bir Web Worker'a taşıyın, böylece ana iş parçacığı her bir keydown olayından sonraki kareyi render etmek için serbest kalır.

pointerup

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

pointerup baskın girdi türü olarak ortaya çıktığında, inceleme tıklama işleyicilerindekiyle aynıdır: işleyicide hangi JavaScript'in çalıştığını bulun ve bir sonraki boyamayı engellemesi gereken işleri ertelenebilecek işlerden ayırın. Bunun click olayından farkı genellikle uygulama düzeyinde değil, framework düzeyinde bir karardır; bu nedenle çözüm, bileşen kütüphanesinin etkileşim bağlamasını nasıl ele aldığını ayarlamayı içerebilir.

Hata Ayıklama İş Akışı

1. CoreDash'te girdi türüne göre filtreleyin: Başarısız olan bir URL için INP dökümünü açın ve en kötü etkileşimlerde hangi girdi türünün baskın olduğunu kontrol edin. Eğer bir tür kötü INP olaylarınızın yarısından fazlasını oluşturuyorsa, oradan başlayın. Dağılım, profil çıkarma zamanınızı nerede harcayacağınızı size söyler.
2. Doğru etkileşimle yeniden üretin: Chrome DevTools'u açın, Performance profillemesini etkinleştirin ve CoreDash'te gösterilen tam etkileşim türünü gerçekleştirin. keydown ağırlıklı bir sayfa yazı yazılarak test edilmelidir. click ağırlıklı bir sayfa, kullanıcılarınızın etkileşime girdiği öğelere fare tıklamaları yapılarak test edilmelidir. İzi kaydedin ve girdi olayından hemen sonra tetiklenen Main thread içindeki uzun görevleri belirleyin.
3. Türe özgü düzeltmeyi uygulayın ve doğrulayın: keydown sorunları için debounce ekleyin ve yeniden profil çıkarın. click sorunları için işleyicideki mantıksal kesme noktalarına scheduler.yield() çağrıları ekleyin. Bir test ortamına dağıtın, etkileşim betikleme özellikli WebPageTest veya Chrome DevTools Performance panelini kullanın ve canlıya almadan önce görev süresinin düştüğünü doğrulayın.

Mühendislik Pratik Kuralı

• keydown kötü INP'nizi domine ediyorsa: Tüm arama ve otomatik tamamlama işleyicilerine debouncing ekleyin. 200ms gecikme standart başlangıç noktasıdır. Hesaplama bu gecikmede bile maliyetliyse, onu bir Web Worker ile ana iş parçacığının dışına taşıyın.
• click veya pointerdown domine ediyorsa: İşleyicileriniz, tarayıcı boyama yapmadan önce çok fazla senkron iş yapıyor. Başarısız URL'deki her tıklama işleyicisini denetleyin. Senkron analitik çağrılarını kaldırın. Çok adımlı mantığı, adımlar arasında scheduler.yield() ile kırın.
• pointerup domine ediyorsa: Framework'ünüzün etkileşim mantığını click yerine pointerup olayına bağlayıp bağlamadığını kontrol edin. Çözüm genellikle tıklama işleyicilerindekiyle aynıdır, ancak kod tabanındaki giriş noktası farklıdır.
• Açık bir kazananı olmayan karmaşık dağılım: Sorun tek bir etkileşim türü değildir. Tüm türlerdeki en yavaş üç bireysel etkileşimin profilini çıkarın ve bunları etki sırasına göre ele alın. Soyut bir şekilde optimize etmeyin.

Girdi Türü bir yönlendirme sinyalidir. Size neyin yavaş olduğunu söylemez. Size nereye bakacağınızı söyler. INP bozulduğunda kullanıcılarınızın tıklıyor mu, yazıyor mu yoksa dokunuyor mu olduğunu öğrendiğinizde, sonraki her bir inceleme adımı daha hızlı ve daha hedefe yönelik hale gelir.