INP Sorununu Çözmek: React Uygulamalarının Yavaş Hissettirmesi Nasıl Engellenir

Panonuz yavaş hissettiriyor. API'niz hızlı. Lighthouse yeşil skorlar gösteriyor. Yine de her tıklama gecikiyor.

Bu bir INP problemidir.

Interaction to Next Paint (INP), bir sayfanın kullanıcıya yanıt vermesinin ne kadar sürdüğünü ölçer. Mart 2024'te First Input Delay (FID)'nin yerini aldı. FID yalnızca ilk tıklamaya bakıyordu; INP ise her etkileşimi izler.

200 ms altındaki bir INP skoru hızlı hissettirir. 500 ms üzerindeki bir skor ise hantal hissettirir.

INP'yi düzeltmek için onu üç aşamaya ayırın:

  • Input Delay (Girdi Gecikmesi) – bir tıklama ile kodunuzun başlaması arasındaki boşluktur. Ana iş parçacığı (main thread) meşgul olduğunda ortaya çıkar.
  • Processing Time (İşleme Süresi) – fonksiyonlarınızın ve React state güncellemelerinizin ne kadar sürdüğüdür.
  • Presentation Delay (Sunum Gecikmesi) – kodunuzun bitişi ile tarayıcının ekranı boyaması (paint) arasındaki boşluktur.

Input Delay Sorununu Çözmek

Uzun süren görevler ana iş parçacığını bloke eder. Eğer bir görev 50 ms'den uzun sürerse, tıklamaları duraksatır. Tarayıcının bu görevler arasında tıklamaları işleyebilmesi için uzun görevleri daha küçük parçalara bölmek amacıyla scheduler.yield() çağrısı yapın.

Processing Time Sorununu Çözmek

Kullanıcı arayüzünü (UI) duyarlı tutmak için React'ın transition API'lerini kullanın.

  • startTransition – acil olmayan güncellemeleri sarmalayın. React, yeni bir tıklamayı işlemek için ağır bir güncellemeyi duraklatabilir.
  • useDeferredValue – anında güncellenmesi gerekmeyen değerleri erteleyin.

Bu API'ler kodu hızlandırmaz; kodu kesilebilir (interruptible) hale getirir, bu da INP değerinizi düşürür.

Presentation Delay Sorununu Çözmek

Çok fazla DOM öğesi boyama (paint) işlemini yavaşlatır.

  • Ekran dışındaki öğelerin işlenmesini atlamak için CSS'de content-visibility: auto uygulayın.
  • Layout thrashing'i durdurun: aynı döngü içinde asla önce bir stili okuyup sonra bir stili yazmayın. Bunun yerine okuma ve yazma işlemlerini toplu halde (batch) yapın.
  • Uzun listeleri sanallaştırın (virtualize).

Nasıl Ölçülür?

Lighthouse bir laboratuvar ortamında çalışır ve gerçek bir insan gibi butonlarınıza tıklayamaz. web-vitals kütüphanesini yükleyin ve kullanıcılarınızdan gelen gerçek verileri yakalayın.

Kaynak: https://dev.to/ahmed_mahmoud360/fixing-inp-field-notes-on-interaction-to-next-paint-in-a-react-app-32fa