Third-Party Script Isolation

TL;DR: Third-Party Script Isolation adalah teknik menjalankan skrip pihak ketiga seperti analytics, widget chat, dan pixel iklan secara terpisah dari thread utama browser, sehingga skrip itu tidak memperlambat muat halaman. Caranya bisa lewat web worker, atribut async/defer, atau memuat skrip hanya saat dibutuhkan.

Apa itu Third-Party Script Isolation?

Third-Party Script Isolation adalah pendekatan untuk membatasi dampak skrip eksternal terhadap performa halaman. Setiap kali Anda memasang Google Analytics, tombol chat, atau pixel iklan, browser harus mengunduh dan mengeksekusi kode dari domain lain. Kode itu sering berjalan di thread yang sama dengan rendering halaman, sehingga bisa membuat halaman terasa tersendat. Isolasi memindahkan eksekusi itu agar tidak mengganggu pengalaman utama.

Masalah ini erat kaitannya dengan Tag Manager Bloat, yaitu menumpuknya skrip pihak ketiga lewat satu container hingga membebani halaman.

Cara Mengisolasi Skrip Pihak Ketiga

• async / defer: menunda eksekusi skrip sampai parsing HTML selesai, sehingga tidak menjadi render-blocking resource.
• Web worker (mis. Partytown): memindahkan skrip ke thread terpisah dari main thread.
• Lazy load on interaction: memuat widget chat hanya setelah pengguna mengklik, bukan saat halaman dibuka.
• Facade pattern: menampilkan placeholder ringan dulu, baru memuat embed berat saat diklik.

Panduan teknis yang baik tersedia di dokumentasi web.dev tentang third-party JavaScript.

Kenapa Penting?

Dalam audit performa beberapa website bisnis, saya kerap menemukan bahwa pelaku utama kelambatan bukan kode internal, melainkan empat sampai enam skrip pihak ketiga yang dimuat sekaligus di awal. Mengisolasi atau menunda skrip ini sering menurunkan waktu muat awal secara terasa tanpa menghapus satu pun fitur. Hasilnya berdampak langsung pada Core Web Vitals dan kenyamanan pengunjung.

Pertanyaan Umum

Apakah menunda skrip analytics membuat data hilang?

Umumnya tidak. Skrip analytics modern dirancang menangkap event meski dimuat dengan defer, selama dimuat sebelum pengguna meninggalkan halaman.

Apa bedanya async dan defer?

Keduanya tidak memblokir parsing, tetapi async mengeksekusi skrip segera setelah terunduh, sedangkan defer menunggu seluruh HTML selesai diparse lebih dulu.