Apa itu TBT?
Metrik Total Blocking Time (TBT) mengukur jumlah total waktu setelah First Contentful Paint (FCP), saat 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 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 cukup lama (lebih dari 50 milidetik), kemungkinan pengguna akan melihat penundaan dan menganggap halaman lambat atau rusak.
Waktu pemblokiran tugas panjang tertentu adalah durasinya yang melebihi 50 milidetik. Selain itu, 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 pelacakan 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 Panjang karena durasinya melebihi 50 milidetik. Diagram berikutnya menunjukkan waktu pemblokiran untuk setiap tugas yang 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 Blocking Time | 345 milidetik | |
Bagaimana hubungan TBT dengan INP?
TBT mendahului INP dan berguna sebagai indikator masalah INP, terutama di lingkungan lab yang lebih sulit mengukur INP. Namun, TBT dapat menandai potensi masalah jika mungkin tidak ada masalah bagi pengguna—jika mereka tidak berinteraksi pada saat itu. Selain itu, pengukuran ini juga dapat melewatkan masalah yang disebabkan oleh interaksi saat diukur di lingkungan lab. Sebaiknya ukur INP di lapangan sebagai ukuran masalah responsivitas yang sebenarnya seperti yang dialami pengguna. TBT mungkin merupakan metrik proxy yang wajar untuk INP untuk lab, tetapi bukan merupakan pengganti INP itu sendiri.
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 pemuatan halaman 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. Artinya, tiga tugas berdurasi 51 md yang tersebar selama 10 detik dapat mendorong TTI sama seperti 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. Sedangkan 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.
Anda dapat mengukur TBT di lapangan, tetapi kami tidak merekomendasikannya karena interaksi pengguna dapat memengaruhi TBT halaman Anda dengan cara yang menyebabkan banyak varian dalam laporan Anda. Sebagai gantinya, sebaiknya lihat Long Animations Frame API yang lebih baru di lapangan 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 di hardware seluler rata-rata.
Untuk detail tentang pengaruh TBT halaman terhadap skor performa Lighthouse, lihat Cara Lighthouse menentukan skor TBT Anda
Cara meningkatkan TBT
Secara umum, sebaiknya optimalkan INP daripada TBT karena kami merekomendasikan penggunaan 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 melihat secara khusus 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: