Etkileşimleri engelleyen üçüncü taraf scriptleri: teşhis ve sınırlama
Ne oluyor
Üçüncü taraf scriptleri — analitik, etiket yöneticileri, reklamlar, sohbet widget'ları, A/B testleri — kodunuzla aynı ana iş parçacığında çalışır. Bir etiket yöneticisi elli kural değerlendirdiğinde ya da bir reklam scripti bir payload ayrıştırdığında, kullanıcınızın tıklaması tıpkı kendi uzun göreviniz için bekleyeceği gibi bekler.
Long Animation Frames API uzun görevleri source URL'lerine atfeder, böylece hangi alan adının size INP'ye mal olduğunu tam olarak görebilirsiniz.
Nasıl tanınır
- DevTools Performance'taki uzun görevler harici alan adlarına atfedilir (googletagmanager.com, connect.facebook.net, widget CDN'leri).
- Kendi kodunuzda değişiklik olmadan, bir pazarlama etiketi ekledikten sonra INP kötüleşti.
- Üçüncü taraf scriptleri başlatılırken, yüklemeden kısa süre sonra input delay sıçrar.
Nasıl düzeltilir
- Her üçüncü taraf scriptini async ya da defer ile yükle; asla <head> içinde senkron olarak yükleme.
- Etiket listesini denetle: kimsenin kullanmadığı etiketleri kaldır — bir scripti silmek sıfır milisaniyeye mal olan tek düzeltmedir.
- Etiketleri Partytown ile ana iş parçacığından çıkar (onları bir Web Worker'da çalıştırır) ve sohbet gibi widget'ları sayfa yüklemesinde değil kullanıcı niyetinde (ilk tıklama) yükle.
Sorun
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Çözüm
<script async src="https://cdn.example-widget.com/loader.js"></script>
<!-- or better: inject on first user intent -->
<script>
chatButton.addEventListener("click", loadChatWidget, { once: true })
</script>