Digital Transformation
TBT Budget (Total Blocking Time Budget)
TL;DR: TBT Budget adalah anggaran waktu maksimum untuk Total Blocking Time, yaitu akumulasi waktu main thread browser terblokir saat memproses skrip panjang. Target Lighthouse yang baik di bawah 200 ms, dan TBT yang sehat menjadi indikator awal INP yang baik di lapangan.
Apa itu TBT Budget?
TBT Budget adalah batas atas Total Blocking Time yang dijaga developer supaya halaman tetap responsif. TBT diukur di Lab test (Lighthouse, PageSpeed Insights) dan menghitung total durasi task di main thread yang melebihi 50 ms, dikurangi 50 ms itu sendiri. TBT sering dijadikan proxy untuk INP Budget di tahap pre-launch karena INP lapangan hanya bisa diukur dari user nyata.
Skor TBT
| Status | Skor |
|---|---|
| Good | 0 hingga 200 ms |
| Needs improvement | 200 hingga 600 ms |
| Poor | di atas 600 ms |
Kenapa Penting?
TBT tinggi biasanya disebabkan bundle JavaScript besar, third-party script yang berat, atau hydration React yang tidak dioptimasi. Untuk website bisnis di Indonesia yang sering dibuka di perangkat mid-range, menjaga TBT di bawah 200 ms membantu memastikan tombol CTA, form, dan navigasi langsung bisa diklik tanpa jeda terasa. Praktik standar di industri menunjukkan menurunkan TBT 300 ms saja sudah cukup untuk membuat halaman terasa instan.
Pertanyaan Umum
Apakah TBT sama dengan INP?
Tidak. TBT diukur di Lab test sebelum interaksi user, sedangkan INP diukur dari interaksi user nyata di lapangan. Keduanya saling terkait, tapi TBT lebih mudah dijadikan target di tahap development.
Bagaimana menurunkan TBT?
Code splitting, lazy load komponen non-kritis, hapus skrip third-party yang tidak perlu, dan tunda hidrasi React dengan teknik seperti next/dynamic atau React Server Components.
Istilah Terkait