Skrip pihak ketiga yang memblokir interaksi: mendiagnosis dan membendungnya
Apa yang terjadi
Skrip pihak ketiga — analitik, tag manager, iklan, widget chat, pengujian A/B — berjalan di main thread yang sama dengan kode Anda. Saat tag manager mengevaluasi lima puluh aturan atau skrip iklan mem-parsing payload, klik pengguna Anda menunggu persis seperti menunggu tugas panjang Anda sendiri.
Long Animation Frames API mengatribusikan tugas panjang ke source URL-nya, jadi Anda bisa melihat persis domain mana yang merugikan INP Anda.
Cara mengenali
- Tugas panjang di DevTools Performance diatribusikan ke domain eksternal (googletagmanager.com, connect.facebook.net, CDN widget).
- INP memburuk setelah menambahkan tag pemasaran, tanpa perubahan pada kode Anda sendiri.
- Input delay melonjak sesaat setelah pemuatan, saat skrip pihak ketiga melakukan inisialisasi.
Cara memperbaiki
- Muat setiap skrip pihak ketiga dengan async atau defer; jangan pernah secara sinkron di <head>.
- Audit daftar tag: hapus tag yang tidak dipakai siapa pun — menghapus skrip adalah satu-satunya perbaikan yang berbiaya nol milidetik.
- Pindahkan tag keluar dari main thread dengan Partytown (menjalankannya di Web Worker), dan muat widget seperti chat berdasarkan niat pengguna (klik pertama) alih-alih saat pemuatan halaman.
Masalah
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Perbaikan
<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>