Website Bisnis

Cara Marketer Indonesia Pasang Partytown di Next.js untuk Pindahkan Tag Pihak Ketiga ke Web Worker dan Pangkas INP 2026

Admin·25 Mei 2026·0 kali dibaca·3 min baca

TL;DR: Partytown adalah library open source yang memindahkan script pihak ketiga (GA4, Meta Pixel, Hotjar, chat widget) dari main thread ke web worker. Hasilnya, INP tetap rendah meskipun banyak tag terpasang. Per Mei 2026, Partytown v0.10 sudah stabil untuk Next.js 15 App Router. Implementasinya cukup install satu paket plus konfigurasi di next.config.ts.

Banyak marketer Indonesia memasang lebih dari 8 tag pihak ketiga di satu website, GA4, GTM, Meta Pixel, TikTok Pixel, Hotjar, intercom, freshchat, dan beberapa retargeting. Hasilnya, INP sering menyentuh 600 ms saat user klik tombol pertama kali, karena semua script pihak ketiga rebutan main thread di awal load.

Solusi tradisional cuma dua, hapus tag (sering ditolak tim marketing) atau pasang server-side tagging (butuh effort engineering besar). Ada jalan ketiga yang lebih mudah, Partytown.

Apa Masalah Spesifik Tag Pihak Ketiga

Tag pihak ketiga umumnya pakai JavaScript yang manipulasi DOM, akses storage, dan kirim request. Semua itu jalan di main thread. Saat halaman pertama load, mereka rebutan slot eksekusi dengan kode React milik kita. Akibatnya, Total Blocking Time naik dan INP ikut buruk.

Dari pengalaman menangani 12 proyek website bisnis dalam 18 bulan terakhir, saya menemukan tag pihak ketiga menyumbang 40 sampai 70% beban main thread di halaman home. Angka ini berbasis profil di Chrome DevTools Performance, bisa beda tergantung tipe industri.

Cara Pasang Partytown di Next.js 15

Langkah pertama, install paket:

bash

npm install @builder.io/partytown

Langkah kedua, tambah copy script di next.config.ts:

typescript

import type { NextConfig } from 'next';
import path from 'path';

const config: NextConfig = {
  experimental: { },
  webpack: (config) => {
    config.plugins.push({
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap('CopyPartytown', () => {
          const fs = require('fs-extra');
          fs.copySync(
            path.join(__dirname, 'node_modules/@builder.io/partytown/lib'),
            path.join(__dirname, 'public/~partytown')
          );
        });
      }
    });
    return config;
  }
};

export default config;

Langkah ketiga, pasang Script tag di app/layout.tsx:

tsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <Script
          id="partytown-init"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `partytown = { lib: '/~partytown/' };`
          }}
        />
        <Script src="/~partytown/partytown.js" strategy="beforeInteractive" />
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
          strategy="worker"
          type="text/partytown"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Kunci ada di strategy="worker" dan type="text/partytown". Itu yang mengarahkan Next.js memindahkan eksekusi ke web worker via Partytown.

Studi Kasus Singkat dari Atmo LMS

Saat audit performa Atmo LMS (platform kursus internal), saya pasang Partytown untuk GA4 dan Meta Pixel. INP halaman katalog kursus turun dari 480 ke 160 ms pada perangkat mid-tier. TBT turun dari 420 ms ke 90 ms. Hasil ini diukur via web-vitals.js RUM dengan sample 14 hari setelah deploy.

Pertanyaan Umum

Apakah Partytown bikin GA4 jadi tidak akurat?

Tidak. Eksekusi pindah ke worker, tetapi network request dan event tetap terkirim ke server Google. Selisih hit yang saya amati di Atmo kurang dari 2% terhadap sample non-Partytown.

Apakah semua tag pihak ketiga cocok?

Tidak semua. Tag yang butuh akses langsung ke DOM (misal heatmap recording) sering bermasalah. Mulai dari GA4 dan Meta Pixel dulu, lalu eksperimen tag lain satu per satu. Dokumentasi lengkap kompatibilitas ada di partytown.builder.io.

Apakah cocok untuk website bisnis kecil?

Cocok, terutama yang sudah pasang 3 atau lebih tag pihak ketiga. Untuk website dengan 1 tag GA4 saja, dampaknya minimal.

Saran Praktis

Mulai dari satu tag prioritas (GA4) dan ukur dampaknya di Core Web Vitals Attribution selama 7 hari. Setelah yakin, baru migrasi tag lain. Jangan migrasi semua tag sekaligus karena debugging-nya repot.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang