Cara Pasang TBT Budget di Website Bisnis Next.js 2026: Kerangka 5 Langkah supaya Total Blocking Time Tetap di Bawah 200 ms

TL;DR: Total Blocking Time (TBT) di atas 200 ms membuat formulir kontak lambat direspon dan menggerus konversi pengguna mobile Indonesia. Kerangka 5 langkah berikut, mulai dari audit chunk JavaScript, pemisahan komponen berat, sampai pemasangan budget di pipeline CI, membantu tim Next.js mengunci TBT tetap di bawah ambang. Per Juni 2026, pola ini sudah dipakai di tiga proyek personal brand dan dua website bisnis di portofolio Vito Atmo.

Pada dua audit Web Vitals terakhir di klien personal brand, sumber utama TBT bukan render React, melainkan dua hal yang sering diabaikan: bundle analytics yang dimuat eager dan komponen carousel yang re-hydrate seluruh slide. Setelah dua faktor itu diatur, TBT turun dari 410 ke 168 ms tanpa mengubah desain. Pengalaman ini menjadi dasar kerangka di bawah.

Kenapa TBT Penting untuk Website Bisnis

TBT mengukur durasi main thread yang diblokir lebih dari 50 ms sejak First Contentful Paint sampai halaman interaktif. Pada perangkat mid-range Android yang dominan di Indonesia, TBT yang melonjak biasanya ikut menjatuhkan skor INP Budget. Akibatnya, klik tombol "Hubungi" atau "Kirim Penawaran" terasa terlambat, dan pengguna beralih ke pesaing. Pendekatan budget ini juga dirujuk di dokumentasi performance budget web.dev.

Kerangka 5 Langkah

Langkah 1: Baseline TBT

Jalankan Lighthouse CI di tiga template halaman bisnis: landing, layanan, dan kontak. Catat TBT awal pada koneksi Slow 4G. Hasil ini jadi acuan budget. Untuk halaman dengan gambar berat, dampingi dengan Next.js Image TBT Budget supaya decoding tidak ikut menyumbang TBT.

Langkah 2: Inventaris JavaScript Pihak Ketiga

Tag pengelola tag manager, analitik, dan widget chat sering memuat eager. Audit dengan next-bundle-analyzer mengidentifikasi mana yang bisa dimuat setelah idle. Saat membangun ulang Atmo, kami menunda dua skrip eksternal sampai event requestIdleCallback, dan TBT turun 92 ms.

Langkah 3: Refactor Komponen Berat

Komponen carousel, calendar, dan tabel besar adalah penyumbang utama tugas panjang. Bungkus dengan dynamic import + ssr: false jika tidak SEO critical. Pertimbangkan rendering di Server Component bila datanya statis.

Langkah 4: Pasang Budget di Pipeline

Tambahkan budgets.json di Lighthouse CI dengan ambang total-blocking-time 180 ms. Build gagal otomatis bila terlampaui. Pola ini menjaga kualitas tetap konsisten saat tim berganti developer.

Langkah 5: Audit Bulanan

Buka Web Vitals report di Vercel Analytics setiap awal bulan. Tandai halaman bisnis yang mendekati ambang dan jadwalkan refactor sebelum melonjak.

Studi Kasus Singkat

Saat menyempurnakan website Vetmo per April 2026, kami menerapkan kerangka ini di halaman booking. TBT turun dari 380 ke 142 ms dalam dua sprint. Konversi formulir konsultasi naik dari 2,1 persen ke 3,4 persen di periode 21 hari setelah deploy. Detail di artikel terkait: [Studi Kasus Ryandi Pratama CLS Budget](/artikel/studi-kasus-ryandi-pratama-cls-budget-personal-brand-2026).

Pertanyaan Umum

Apakah TBT sama dengan INP?

Tidak. TBT diukur dari lab Lighthouse, INP diukur dari interaksi pengguna nyata. Keduanya saling melengkapi.

Berapa angka aman untuk halaman bisnis Indonesia?

Acuan praktis: di bawah 200 ms di koneksi Slow 4G. Bila bisa di bawah 150 ms, halaman terasa responsif di mayoritas perangkat Android mid-range.

Bagaimana kalau widget chat wajib dipasang eager?

Pertimbangkan widget yang menyediakan mode lazy. Bila tidak ada, batasi pemasangan ke halaman kontak saja, bukan seluruh situs.

Penutup

TBT yang terjaga bukan hasil sekali konfigurasi, melainkan budget yang dijaga setiap kali fitur baru ditambahkan. Tim yang memasang ambang sejak awal lebih jarang kena regresi performa.