Mengelola Skrip Pihak Ketiga agar Website Tetap Cepat

Diperbarui 16 Oktober 2026 · ±6 menit baca

Skrip pihak ketiga adalah kode dari layanan luar yang dipasang di website Anda: Google Analytics, Google Tag Manager, Meta Pixel, TikTok Pixel, iklan, chat widget, tombol WhatsApp, embed YouTube dan Google Maps, widget ulasan, dan sebagainya. Masing-masing memberikan manfaat, tetapi bersama-sama mereka sering menjadi penyebab terbesar halaman lambat, terutama di ponsel.

Mengapa skrip pihak ketiga memperlambat halaman

• Koneksi tambahan. Setiap domain baru membutuhkan pencarian DNS, koneksi, dan jabat tangan HTTPS.
• JavaScript yang berat. Banyak skrip memuat skrip lain, yang memuat skrip lain lagi. Semuanya harus diunduh, dibaca, dan dijalankan oleh prosesor ponsel.
• Memblokir thread utama. Saat skrip berjalan, browser tidak bisa merespons klik. Ini menaikkan Total Blocking Time dan memperburuk INP.
• Di luar kendali Anda. Penyedia bisa mengubah skripnya kapan saja, sehingga website Anda bisa tiba-tiba melambat tanpa Anda mengubah apa pun.
• Pergeseran tata letak. Iklan dan widget yang muncul belakangan sering mendorong konten dan menaikkan CLS.

Lighthouse menampilkan dampaknya dalam audit "Kurangi dampak kode pihak ketiga", yang menunjukkan berapa banyak waktu thread utama dan ukuran transfer yang dipakai setiap penyedia.

Langkah 1: Inventarisasi

Buat daftar semua skrip pihak ketiga di website Anda. Caranya:

1. Uji halaman di webmaster.my.id dan lihat temuan terkait pihak ketiga.
2. Buka DevTools (F12) > Network, muat ulang halaman, lalu urutkan berdasarkan domain.
3. Periksa isi Google Tag Manager jika dipakai; sering ada tag lama yang terlupakan.

Untuk setiap skrip, tanyakan: siapa yang memakainya, untuk apa, dan apakah datanya masih dilihat. Pixel dari kampanye iklan yang sudah selesai atau alat uji coba yang dulu dipasang sering masih berjalan bertahun-tahun.

Langkah 2: Hapus yang tidak perlu

Ini cara paling efektif. Skrip yang dihapus tidak memiliki biaya sama sekali. Hindari juga memasang dua alat untuk fungsi yang sama, misalnya dua layanan analytics atau dua widget chat.

Langkah 3: Muat secara asinkron atau tunda

Skrip yang tetap diperlukan sebaiknya tidak memblokir tampilan:

<script src="https://contoh-layanan.com/widget.js" async></script>

Untuk skrip yang tidak dibutuhkan di awal, seperti chat widget atau popup, tunda sampai halaman selesai dimuat atau sampai pengguna berinteraksi:

<script>
  function muatChat() {
    var s = document.createElement('script');
    s.src = 'https://contoh-chat.com/widget.js';
    document.body.appendChild(s);
  }
  window.addEventListener('load', function () { setTimeout(muatChat, 3000); });
</script>

Banyak plugin optimasi WordPress memiliki fitur "delay JavaScript" yang menunda skrip sampai ada gerakan mouse, gulir, atau sentuhan pertama.

Langkah 4: Fasad untuk embed berat

Fasad (facade) adalah tampilan pengganti yang ringan, yang baru memuat widget asli saat diklik:

• YouTube: tampilkan gambar thumbnail dengan tombol putar. Pemutar YouTube asli baru dimuat saat diklik. Komponen seperti lite-youtube-embed melakukannya otomatis.
• Google Maps: tampilkan gambar peta statis dengan tautan "Buka di Google Maps", atau muat peta interaktif hanya saat diklik.
• Chat widget: tampilkan tombol buatan sendiri; muat skrip chat saat tombol diklik.
• Tombol WhatsApp: cukup tautan biasa ke https://wa.me/62xxxxxxxxxx. Tidak perlu plugin dengan JavaScript besar.

Lighthouse juga menyarankan fasad untuk embed tertentu dalam audit "Muat lambat resource pihak ketiga dengan fasad".

Langkah 5: Gunakan Tag Manager dengan disiplin

Google Tag Manager memudahkan tim pemasaran menambah tag tanpa bantuan pengembang, tetapi juga memudahkan tag menumpuk. Tips:

• Tinjau tag secara berkala dan hapus yang tidak dipakai.
• Batasi pemicu (trigger) hanya pada halaman yang membutuhkan, misalnya pixel konversi hanya di halaman terima kasih.
• Hindari memasang skrip yang sama di GTM sekaligus langsung di tema.

Langkah 6: Siapkan ruang untuk iklan dan widget

Agar tidak menyebabkan pergeseran, beri wadah dengan ukuran tetap untuk iklan dan widget:

.slot-iklan { min-height: 250px; }

Jangan menyisipkan iklan di atas konten yang sudah terlihat setelah halaman dimuat.

Langkah 7: Preconnect seperlunya

Untuk satu atau dua domain pihak ketiga yang penting dan pasti dipakai di awal, preconnect membantu memulai koneksi lebih cepat:

<link rel="preconnect" href="https://www.googletagmanager.com">

Jangan preconnect ke banyak domain; setiap koneksi membutuhkan sumber daya.

Pertimbangan privasi dan keamanan

Setiap skrip pihak ketiga dapat membaca isi halaman dan perilaku pengunjung. Pasang hanya dari penyedia tepercaya, sebutkan penggunaannya dalam kebijakan privasi, dan pertimbangkan Content-Security-Policy untuk membatasi domain yang diizinkan. Lihat Header Keamanan.

Mengukur dampaknya

Cara sederhana mengukur biaya sebuah skrip: uji halaman di webmaster.my.id, lalu nonaktifkan skrip tersebut sementara dan uji ulang. Selisih TBT dan skor performa menunjukkan dampaknya. Di DevTools, Anda juga bisa memblokir domain tertentu (klik kanan permintaan > Block request domain) untuk melihat perbedaan tanpa mengubah website.

Contoh inventarisasi skrip

Buat tabel sederhana berisi nama skrip, fungsi, pemilik atau tim yang memakainya, halaman tempat dipasang, dan dampaknya. Contoh hasilnya:

• Google Analytics – mengukur kunjungan, dipakai tim pemasaran, di semua halaman. Tetap, dimuat asinkron.
• Pixel iklan lama – kampanye sudah selesai sejak lama, tidak ada yang memakai datanya. Hapus.
• Widget chat – dipakai tim layanan pelanggan, tetapi berat. Ganti dengan tombol fasad yang memuat chat saat diklik.
• Embed video YouTube di beranda – dipakai, tetapi memuat banyak skrip. Ganti dengan gambar thumbnail yang memuat pemutar saat diklik.
• Skrip heatmap – hanya diperlukan sesekali. Aktifkan saat penelitian, lalu matikan.

Setelah setiap perubahan, uji ulang dan catat penurunan TBT serta jumlah permintaan.

Checklist skrip pihak ketiga

• Daftar semua skrip pihak ketiga beserta pemilik dan fungsinya tersedia.
• Skrip yang tidak dipakai sudah dihapus, termasuk dari Tag Manager.
• Skrip non-kritis dimuat dengan async, defer, atau setelah interaksi.
• Embed berat seperti video, peta, dan chat memakai fasad.
• Ruang untuk iklan dan widget sudah disiapkan agar tidak menimbulkan CLS.
• Preconnect hanya untuk satu atau dua domain terpenting.
• Kebijakan privasi mencantumkan layanan pihak ketiga yang mengumpulkan data.
• Ada peninjauan berkala, misalnya setiap tiga bulan.

Kesalahan umum

• Memasang skrip yang sama dua kali. Misalnya Analytics dipasang langsung di tema dan juga lewat Tag Manager, sehingga data ganda dan beban bertambah.
• Menganggap Tag Manager membuat skrip ringan. Tag Manager hanya mengatur pemuatan. Skrip yang dimuat lewat Tag Manager tetap berjalan di browser pengunjung.
• Menunda skrip yang dibutuhkan untuk fungsi utama. Skrip pembayaran atau formulir yang ditunda terlalu lama bisa membuat transaksi gagal. Uji alur penting setelah perubahan.
• Tidak memantau perubahan dari penyedia. Penyedia bisa memperbarui skripnya sehingga menjadi lebih berat tanpa pemberitahuan.

Pertanyaan yang sering diajukan

Bagaimana mengetahui skrip mana yang paling berat?

Lihat audit "Kurangi dampak kode pihak ketiga" di hasil Lighthouse. Audit ini menampilkan penyedia, ukuran transfer, dan waktu blokir thread utama. Tab Performance di DevTools juga bisa menunjukkan skrip yang menjalankan tugas panjang.

Apakah menunda Analytics membuat data hilang?

Jika dimuat dengan async, data tetap terekam untuk hampir semua kunjungan. Jika ditunda sampai interaksi pertama, kunjungan yang langsung pergi tanpa interaksi bisa tidak tercatat. Pilih sesuai kebutuhan bisnis.

Apa itu fasad?

Fasad adalah tampilan ringan, biasanya gambar dan tombol, yang menggantikan widget berat sampai pengunjung benar-benar ingin memakainya. Saat diklik, barulah skrip asli dimuat.

Apakah skrip pihak ketiga berisiko bagi keamanan?

Ya. Skrip dari domain lain berjalan dengan akses penuh ke halaman Anda. Gunakan hanya penyedia tepercaya, batasi sumbernya lewat CSP, dan hapus skrip yang tidak lagi diperlukan.

Apakah semua skrip pihak ketiga buruk?

Tidak. Banyak skrip memberi manfaat nyata, seperti analitik, pembayaran, dan layanan pelanggan. Tujuannya bukan menghapus semuanya, melainkan memastikan setiap skrip punya alasan jelas dan dimuat dengan cara paling ringan.

Ringkasan

1. Inventarisasi semua skrip pihak ketiga.
2. Hapus yang tidak dipakai.
3. Muat secara async atau tunda yang tidak penting.
4. Gunakan fasad untuk YouTube, peta, dan chat.
5. Disiplin dengan Tag Manager.
6. Siapkan ruang untuk iklan dan widget.

Setiap skrip harus "membayar" tempatnya di website Anda dengan manfaat yang jelas. Yang tidak, sebaiknya dilepas.