Digital Transformation
Total Blocking Time (TBT)
Total Blocking Time (TBT) adalah metrik lab yang mengukur total durasi main thread terblokir lebih dari 50 ms antara FCP dan TTI, indikator responsivitas halaman.
TL;DR: Total Blocking Time (TBT) adalah metrik lab Lighthouse yang menjumlahkan seluruh waktu main thread browser terblokir oleh tugas berat (lebih dari 50 ms) antara First Contentful Paint dan Time to Interactive. TBT yang baik berada di bawah 200 ms. Metrik ini menjadi proxy lab untuk Interaction to Next Paint (INP) di lapangan.
Apa itu Total Blocking Time?
Total Blocking Time atau TBT mengukur seberapa lama browser tidak bisa merespon input pengguna karena main thread sibuk mengeksekusi JavaScript berat. Setiap long task yang melebihi 50 ms dihitung kelebihannya, lalu dijumlahkan. Bayangkan kasir tunggal di minimarket. Setiap antrean yang menunggu lebih dari 50 detik akan dihitung sebagai blocking time bagi kasir tersebut.
TBT diukur di lingkungan lab oleh tools seperti Lighthouse atau PageSpeed Insights. Berbeda dengan INP yang mengukur interaksi pengguna nyata di field, TBT memberi sinyal awal sebelum halaman dirilis ke produksi.
Threshold dan Cara Membaca
| Skor TBT | Status | Implikasi |
|---|---|---|
| 0 - 200 ms | Baik | Halaman responsif, jarang ada input delay |
| 200 - 600 ms | Perlu perbaikan | Pengguna mulai merasa lag saat klik |
| > 600 ms | Buruk | Halaman terasa beku, banyak input hilang |
Skor TBT dihitung pada simulasi mobile mid-tier dengan throttling 4x CPU. Realita di perangkat low-end Indonesia bisa lebih buruk 2-3 kali lipat.
Penyebab TBT Tinggi
Penyebab paling umum adalah JavaScript bundle besar yang dieksekusi di awal. Library analytics pihak ketiga, tag manager, dan framework SPA tanpa code-splitting biasanya jadi sumber utama. Dalam audit beberapa proyek client dengan stack Next.js, TBT tinggi sering disebabkan import komponen besar di server component yang harusnya client-side dynamic import.
Hydration mismatch juga sering memicu re-render mahal. Pemilihan strategi rendering yang tepat antara SSR, ISR, dan SSG bisa menurunkan TBT 30-50%.
Kenapa Penting?
TBT adalah satu-satunya metrik responsivitas yang bisa diukur sebelum deploy. Tanpa TBT yang sehat, kemungkinan besar INP di field juga buruk. Untuk website bisnis Indonesia dengan trafik mobile dominan, TBT di bawah 300 ms wajib dijadikan budget performa. Audit Web Vitals bulanan membantu menjaga skor stabil seiring penambahan fitur.
Pertanyaan Umum
Apa beda TBT dan INP?
TBT adalah metrik lab yang disimulasikan di Lighthouse, sementara INP mengukur interaksi pengguna nyata di field. TBT prediktif, INP aktual.
Bagaimana cara menurunkan TBT?
Pecah JavaScript bundle dengan code-splitting, defer script non-kritis, hapus library yang tidak dipakai, dan pindahkan komputasi berat ke Web Worker.
Istilah Terkait