Apa yang dimaksud dengan 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 Waktu Hingga Interaktif (TTI), seperti 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 mengganggu tugas yang sedang berlangsung. Jadi, jika pengguna memang berinteraksi dengan halaman di 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 kedua | 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 sudah ada sebelum INP dan berguna sebagai indikator masalah INP, terutama di lingkungan lab tempat pengukuran INP lebih sulit. 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 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 "interaktif secara andal" jika thread utama bebas dari tugas yang lama selama minimal 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 dalam kasus kedua mengukur pengalaman yang lebih buruk.
Contoh ini menunjukkan mengapa TBT sering kali merupakan metrik yang lebih baik daripada TTI karena kurang rentan terhadap outlier. Hal ini bahkan berlaku 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 di TBT untuk mengetahui 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 di lapangan yang lebih baru 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 mengetahui detail tentang pengaruh TBT halaman terhadap skor performa Lighthouse, lihat Cara Lighthouse menentukan skor TBT
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 ingin melihat TBT secara khusus, Anda dapat menjalankan audit performa Lighthouse dan memperhatikan peluang tertentu yang disarankan audit.
Secara umum, meningkatkan TBT untuk situs berarti mengurangi jumlah skrip pemblokiran, yang berarti mengoptimalkannya agar tidak terlalu memblokir, atau mengurangi jumlah skrip secara keseluruhan. Lihat panduan performa berikut: