Dipublikasikan: 7 November 2019, Terakhir diperbarui: 15 Oktober 2025
Apa itu TBT?
Metrik Total Blocking Time (TBT) mengukur total waktu setelah First Contentful Paint (FCP), tempat thread utama diblokir cukup lama untuk mencegah responsivitas input.
Secara default, Lighthouse berhenti memantau TBT setelah Waktu hingga Interaktif (TTI), seperti juga beberapa alat lab lainnya yang mengukur pemuatan halaman. Lihat Bagaimana hubungan TBT dengan TTI?.
Thread utama dianggap "diblokir" setiap kali ada Tugas Panjang, yaitu tugas yang berjalan di thread utama selama lebih dari 50 milidetik. Kita mengatakan bahwa thread utama "diblokir" karena browser tidak dapat menginterupsi tugas yang sedang berlangsung. Jadi, jika pengguna berinteraksi dengan halaman di tengah tugas yang panjang, browser harus menunggu hingga tugas selesai sebelum dapat merespons.
Jika tugas cukup lama (lebih dari 50 milidetik), kemungkinan pengguna akan menyadari penundaan dan menganggap halaman lambat atau rusak.
Waktu pemblokiran tugas panjang tertentu adalah durasinya yang melebihi 50 milidetik. Total waktu pemblokiran untuk halaman adalah jumlah waktu pemblokiran untuk setiap tugas panjang yang terjadi setelah FCP untuk jangka waktu yang diukur (biasanya TTI untuk alat pemuatan halaman, atau total waktu rekaman aktivitas untuk alat lainnya).
Misalnya, perhatikan diagram thread utama browser berikut selama pemuatan halaman:
Linimasa yang digambarkan pada gambar sebelumnya memiliki lima tugas, tiga di antaranya adalah Tugas Panjang karena durasinya melebihi 50 milidetik. Diagram berikutnya menunjukkan waktu pemblokiran untuk setiap tugas yang panjang:
Jadi, meskipun total waktu yang dihabiskan untuk menjalankan tugas di thread utama adalah 560 milidetik, hanya 345 milidetik dari waktu tersebut yang dianggap sebagai waktu pemblokiran.
| Durasi tugas (milidetik) | Waktu pemblokiran tugas (milidetik) | |
|---|---|---|
| Tugas satu | 250 | 200 |
| Tugas dua | 90 | 40 |
| Tugas tiga | 35 | 0 |
| Tugas empat | 30 | 0 |
| Tugas lima | 155 | 105 |
| Total Blocking Time | 345 milidetik | |
Bagaimana hubungan TBT dengan INP?
TBT mendahului INP dan berguna sebagai indikator masalah INP, terutama di lingkungan lab tempat pengukuran INP lebih sulit dilakukan. Namun, TBT dapat menandai potensi masalah yang mungkin tidak dialami pengguna—jika mereka tidak berinteraksi pada saat itu. Selain itu, masalah yang disebabkan oleh interaksi juga dapat terlewat saat diukur di lingkungan lab. Sebaiknya ukur INP di lapangan sebagai ukuran masalah responsivitas sebenarnya yang dialami pengguna. TBT mungkin merupakan metrik proxy yang wajar untuk INP di lab, tetapi bukan pengganti INP itu sendiri.
Bagaimana kaitan TBT dengan TTI?
TBT diukur selama jangka waktu tertentu. Untuk beberapa alat lab yang secara tradisional mengukur pemuatan halaman, termasuk Lighthouse, TBT telah diukur hingga TTI karena membantu mengukur tingkat keparahan halaman non-interaktif sebelum menjadi interaktif secara andal. Namun, TBT juga dapat terus diukur setelah pemuatan halaman dan di luar TTI, misalnya dalam mode Rentang Waktu Lighthouse.
TTI menganggap halaman "dapat diandalkan untuk interaksi" jika thread utama tidak memiliki tugas panjang selama minimal lima detik. Artinya, tiga tugas 51 md yang tersebar selama 10 detik dapat menunda TTI sejauh satu tugas berdurasi 10 detik—tetapi kedua skenario tersebut akan terasa sangat berbeda bagi pengguna yang mencoba berinteraksi dengan halaman.
Dalam kasus pertama, tiga tugas 51 ms akan memiliki TBT 3 milidetik. Sedangkan tugas tunggal berdurasi 10 detik akan memiliki TBT 9.950 milidetik. Nilai TBT yang lebih besar dalam kasus kedua mengukur pengalaman yang lebih buruk.
Contoh ini menunjukkan mengapa TBT sering kali menjadi metrik yang lebih baik daripada TTI karena tidak terlalu rentan terhadap pencilan. Hal ini bahkan terjadi saat TTI digunakan sebagai endpoint untuk TBT.
Cara mengukur TBT
TBT adalah metrik yang harus diukur di lab. Cara terbaik untuk mengukur TBT adalah dengan menjalankan audit performa Lighthouse di situs Anda. Lihat dokumentasi Lighthouse tentang TBT untuk mengetahui detail penggunaan.
TBT dapat diukur di lapangan, tetapi kami tidak merekomendasikannya karena interaksi pengguna dapat memengaruhi TBT halaman Anda dengan cara yang menyebabkan banyak variasi dalam laporan Anda. Sebagai gantinya, sebaiknya lihat Long Animations Frame API yang lebih baru di kolom jika ingin melihat lebih dari satu interaksi INP.
Alat lab
Berapa skor TBT yang baik?
Untuk memberikan pengalaman pengguna yang baik, situs harus mengusahakan agar Total Blocking Time kurang dari 200 milidetik saat diuji pada hardware seluler rata-rata.
Untuk mengetahui detail tentang pengaruh TBT halaman Anda terhadap skor performa Lighthouse, lihat Cara Lighthouse menentukan skor TBT Anda
Cara meningkatkan TBT
Secara umum, sebaiknya optimalkan INP daripada TBT karena sebaiknya gunakan TBT sebagai metrik proxy untuk INP di lab (tempat INP biasanya tidak dapat diukur secara akurat). Oleh karena itu, untuk meningkatkan TBT, lihat panduan kami tentang Mengoptimalkan INP.
Jika Anda secara khusus melihat TBT, Anda dapat menjalankan audit performa Lighthouse dan memperhatikan peluang tertentu yang disarankan oleh audit.
Secara umum, meningkatkan TBT untuk situs melibatkan pengurangan jumlah skrip pemblokiran, yang berarti mengoptimalkannya agar tidak terlalu memblokir, atau mengurangi jumlah skrip secara keseluruhan. Lihat panduan performa berikut: