Apa itu TBT?
Metrik Total Blocking Time (TBT) mengukur jumlah total waktu setelah First Contentful Paint (FCP) ketika thread utama diblokir cukup lama untuk mencegah responsivitas input.
Secara default, Lighthouse berhenti memantau TBT setelah Time to Interactive (TTI), begitu juga beberapa alat lab lainnya yang mengukur pemuatan halaman. Lihat Bagaimana hubungan antara TBT dengan TTI?.
Thread utama dianggap "diblokir" setiap kali ada tugas Long Task yang berjalan di thread utama selama lebih dari 50 milidetik. Kita mengatakan bahwa thread utama "diblokir" karena browser tidak dapat mengganggu tugas yang sedang berlangsung. Jadi, jika pengguna berinteraksi dengan halaman di tengah-tengah tugas yang lama, browser harus menunggu tugas selesai sebelum dapat merespons.
Jika tugas tersebut cukup panjang (di atas 50 milidetik), pengguna mungkin akan menyadari penundaan dan menganggap halaman tersebut lambat atau rusak.
Waktu pemblokiran untuk tugas panjang tertentu adalah durasinya lebih dari 50 milidetik. Dan 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 trace untuk alat lainnya).
Misalnya, perhatikan diagram thread utama browser berikut selama pemuatan halaman:
Linimasa yang digambarkan dalam gambar sebelumnya memiliki lima tugas, tiga di antaranya adalah Tugas Lama karena durasinya melebihi 50 milidetik. Diagram berikutnya menunjukkan waktu pemblokiran untuk setiap tugas yang berjalan lama:
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 kelima | 155 | 105 |
| Total Waktu Pemblokiran | 345 milidetik | |
Bagaimana hubungan antara TBT dengan TTI?
TBT diukur selama jangka waktu tertentu. Untuk beberapa alat lab yang biasanya mengukur pemuatan halaman, termasuk Lighthouse, TBT telah diukur hingga TTI karena membantu mengukur tingkat keparahan halaman non-interaktif sebelum menjadi interaktif yang andal. Namun, TBT juga dapat terus diukur setelah halaman dimuat dan di luar TTI, misalnya dalam mode Rentang Waktu Lighthouse.
TTI menganggap halaman "interaktif dengan andal" jika thread utama tidak memiliki tugas lama selama setidaknya lima detik. Ini berarti bahwa tiga tugas 51 md yang tersebar selama 10 detik dapat mendorong 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 md akan memiliki TBT 3 milidetik. Sementara itu, satu tugas berdurasi 10 detik akan memiliki TBT 9.950 milidetik. Nilai TBT yang lebih besar pada kasus kedua mengukur pengalaman yang lebih buruk.
Contoh ini menunjukkan mengapa TBT sering kali merupakan metrik yang lebih baik daripada TTI karena lebih tidak rentan terhadap pencilan. Hal ini bahkan terjadi ketika TTI digunakan sebagai titik akhir 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 detail penggunaan.
Alat lab
Berapa skor TBT yang baik?
Untuk memberikan pengalaman pengguna yang baik, situs harus memiliki Waktu Pemblokiran Total kurang dari 200 milidetik saat diuji di hardware seluler rata-rata.
Untuk detail tentang pengaruh TBT halaman terhadap skor performa Lighthouse, lihat Cara Lighthouse menentukan skor TBT Anda
Cara meningkatkan kualitas TBT
Untuk mempelajari cara meningkatkan TBT untuk situs tertentu, Anda dapat menjalankan audit performa Lighthouse dan memperhatikan peluang spesifik yang disarankan audit.
Untuk mempelajari cara meningkatkan kualitas TBT secara umum (untuk situs apa pun), lihat panduan performa berikut: