Ana iş parçacığı bloke: işleyiciniz çalışmadan önce yüksek input delay

Ne oluyor

Input delay, kullanıcının tıklaması ile olay işleyicinizin başladığı an arasındaki süredir. İşleyici son derece hızlı olabilir — ama ana iş parçacığı uzun bir görevin ortasındaysa (hydration, analitik başlatma, veri ayrıştıran bir zamanlayıcı), olay o görev bitene kadar kuyrukta bekler.

Bu, işleyicinizin düzeltemeyeceği tek INP aşamasıdır, çünkü suçlu o sırada çalışan başka bir koddur.

Nasıl tanınır

• INP dökümünde input delay baskındır; processing time kısadır.
• Sorun aralıklıdır: aynı düğme, ne zaman tıkladığınıza göre hızlı ya da yavaştır.
• En kötüsü sayfa yüklenmesinin hemen ardındadır; init kodu, hydration ve üçüncü taraf scriptleri ana iş parçacığı için yarışır.

Nasıl düzeltilir

• DevTools Performance'ta uzun görevleri bul (50 ms üzeri kırmızı işaretli bloklar) — düzeltme onları hedefler, işleyiciyi değil.
• Init işini scheduler.yield() ile parçalara böl ya da kritik olmayan kısımları requestIdleCallback ile ertele.
• Özellikleri sayfa yüklemesinde değil ilk kullanımda tembel başlat; üçüncü taraf scriptlerini async/defer ile yükle.

Sorun

// at page load: one 800 ms task — every click during it waits
initAnalytics()
buildSearchIndex(allProducts)
prefetchRecommendations()

Çözüm

initAnalytics()
await scheduler.yield()                  // events can run between steps
buildSearchIndex(allProducts)
requestIdleCallback(() => prefetchRecommendations())