Digital Transformation
TBT (Total Blocking Time)
TBT adalah metrik lab yang mengukur total waktu thread utama browser terblokir oleh task panjang antara FCP dan TTI, indikator awal masalah interaktivitas halaman.
TL;DR: Total Blocking Time (TBT) adalah metrik laboratorium dari Lighthouse yang menjumlahkan durasi semua long task yang melebihi 50 ms, antara First Contentful Paint dan Time to Interactive. TBT bagus jika berada di bawah 200 ms pada simulasi mobile mid-tier. TBT sering jadi proksi awal sebelum data INP nyata terkumpul.
Apa itu Total Blocking Time?
TBT mengukur seberapa lama browser tidak bisa merespon input pengguna karena thread utama sibuk menjalankan JavaScript atau task panjang lain. Setiap task yang berjalan lebih dari 50 ms dianggap memblokir, dan kelebihan di atas 50 ms itu dijumlahkan menjadi TBT. Misalnya, dua task berdurasi 80 ms dan 120 ms menyumbang 30 + 70 = 100 ms TBT. TBT adalah metrik lab, artinya diukur di kondisi simulasi terkendali, bukan dari pengguna nyata seperti INP. TBT punya hubungan kuat dengan INP, sehingga sering dipakai untuk diagnosa awal sebelum punya data lapangan dari RUM.
Ambang dan Faktor Penyebab
| Skor | Kategori | Penyebab Umum |
|---|---|---|
| 0-200 ms | Baik | Bundle JS terkontrol, render server-first, sedikit script pihak ketiga. |
| 200-600 ms | Perlu Perbaikan | Bundle besar, hidrasi React berat, tracker pihak ketiga banyak. |
| Di atas 600 ms | Buruk | Single bundle berukuran 1 MB+, render full-CSR, pixel iklan tanpa Partytown. |
Kenapa Penting?
TBT adalah sinyal paling cepat untuk menemukan masalah interaktivitas sebelum dampaknya terlihat di [Core Web Vitals](/glosarium/core-web-vitals) lapangan. Bagi tim engineering yang sedang debug halaman lambat respon, TBT lab dari Lighthouse bisa menunjukkan task mana yang harus dipecah, di-defer, atau dipindah ke web worker. Untuk situs yang baru launching dan belum punya cukup data CrUX, TBT jadi metrik utama yang dipantau lewat Lighthouse CI di pipeline. Tim Vito Atmo memakai TBT sebagai gerbang pre-deploy supaya regresi performa tidak masuk ke produksi.
Pertanyaan Umum
Apakah TBT sama dengan INP?
Tidak. TBT adalah metrik lab dari satu sesi tes simulasi. INP adalah metrik lapangan dari interaksi nyata pengguna. Keduanya berkorelasi tapi tidak identik.
Bagaimana cara menurunkan TBT?
Pecah JavaScript besar dengan code splitting, kurangi script pihak ketiga atau pindahkan ke web worker, pakai server component atau static rendering, dan hindari hidrasi yang tidak perlu di komponen statis.
Istilah Terkait