INP sorunları açıklandı: yavaş etkileşimlerin nedenleri ve nasıl düzeltilir
Interaction to Next Paint (INP), bir sayfanın tıklamalara, dokunuşlara ve tuş basışlarına ne kadar hızlı yanıt verdiğini ölçen bir Core Web Vital'dir. 200 ms'nin üzerindeki INP yavaş hissettirir; 500 ms'nin üzerinde bozuk hissettirir.
Kötü bir INP'nin neredeyse tamamı birkaç kök nedenden birine dayanır. Aşağıdaki her rehber bir nedeni açıklar: nasıl tanınır, neden olur ve kodla birlikte nasıl düzeltilir.
Kök nedenler
Uzun süren bir olay işleyici ana iş parçacığını bloke eder ve bir sonraki boyamayı geciktirir. Ağır işleyiciler nasıl bulunur ve scheduler.yield() ya da Web Worker ile nasıl bölünür.
Layout thrashing: bir karede tekrarlanan reflow'lar ve nasıl durdurulurDOM okuma ve yazmalarını dönüşümlü yapmak, tarayıcıyı tek bir karede layout'u tekrar tekrar hesaplamaya zorlar. INP'yi düzeltmek için okuma ve yazmaları nasıl gruplarsınız.
Zorlanmış senkron layout: DOM'a yazdıktan sonra geometri okumakDOM'u değiştirdikten hemen sonra offsetWidth ya da getBoundingClientRect okumak, tarayıcıyı JS görevinizde layout'u yeniden hesaplamaya zorlar. Nasıl tespit edilir ve düzeltilir.
Ana iş parçacığı bloke: işleyiciniz çalışmadan önce yüksek input delayAna iş parçacığı başka bir uzun görevle meşgulken, tıklamalar işleyiciniz başlamadan önce kuyrukta bekler. INP input delay'ini düzeltmek için engelleyen görevi nasıl bulup bölersiniz.
Etkileşimleri engelleyen üçüncü taraf scriptleri: teşhis ve sınırlamaAnalitik, reklamlar ve sohbet widget'ları ana iş parçacığınızda uzun görevler çalıştırıp INP'yi mahveder. Uzun görevleri üçüncü taraflara nasıl atfedip async, defer veya bir worker ile sınırlarsınız.
React yeniden render zinciri: bir tıklamanın tüm ağacı yeniden render etmesiReact ağacının üst kısmındaki bir state güncellemesi her tıklamada yüzlerce bileşeni yeniden render eder. Render zincirleri nasıl bulunur ve memo, useCallback ve useTransition ile nasıl düzeltilir.