Total Blocking Time (TBT) adalah salah satu metrik yang dilacak di bagian Performance dalam laporan Lighthouse. Setiap metrik mencatat beberapa aspek kecepatan pemuatan halaman.
Laporan Lighthouse menampilkan TBT dalam milidetik:
Yang diukur dengan TBT
TBT mengukur jumlah total waktu halaman diblokir agar tidak merespons input pengguna, seperti klik mouse, ketukan layar, atau penekanan keyboard. Jumlah tersebut dihitung dengan menambahkan bagian pemblokiran dari semua tugas berdurasi panjang antara First Contentful Paint dan Waktu untuk Interaktif. Setiap tugas yang dijalankan lebih dari 50 md adalah tugas yang panjang. Jumlah waktu setelah 50 md adalah bagian pemblokiran. Misalnya, jika Lighthouse mendeteksi tugas berdurasi 70 md, bagian pemblokirannya adalah 20 md.
Cara Lighthouse menentukan skor TBT Anda
Skor TBT Anda adalah perbandingan antara waktu TBT halaman dan TBT dikalikan dengan jutaan situs sebenarnya saat dimuat di perangkat seluler. Lihat Cara skor metrik ditentukan untuk mempelajari cara nilai minimum skor Lighthouse ditetapkan.
Tabel ini menunjukkan cara menafsirkan skor TBT Anda:
| Waktu TBT (dalam milidetik) |
Pengodean warna |
|---|---|
| 0–200 | Hijau (cepat) |
| 200-600 | Oranye (sedang) |
| Lebih dari 600 | Merah (lambat) |
Cara meningkatkan skor TBT Anda
Lihat Apa yang menyebabkan tugas saya berjalan lama? untuk mempelajari cara mendiagnosis penyebab utama dari tugas yang berjalan lama dengan panel Performa Chrome DevTools.
Secara umum, penyebab paling umum tugas yang berjalan lama adalah:
- Pemuatan, penguraian, atau eksekusi JavaScript yang tidak diperlukan. Saat menganalisis kode di panel Performa, Anda mungkin menemukan bahwa thread utama melakukan pekerjaan yang tidak benar-benar diperlukan untuk memuat halaman. Mengurangi payload JavaScript dengan pemisahan kode, menghapus kode yang tidak digunakan, atau memuat JavaScript pihak ketiga secara efisien akan meningkatkan skor TBT Anda.
- Pernyataan JavaScript yang tidak efisien. Misalnya, setelah menganalisis kode di panel Performa, misalnya Anda melihat panggilan ke
document.querySelectorAll('a')yang menampilkan 2.000 node. Memfaktorkan ulang kode untuk menggunakan pemilih yang lebih spesifik yang hanya menampilkan 10 node akan meningkatkan skor TBT Anda.
Cara meningkatkan Skor performa secara keseluruhan
Kecuali jika Anda memiliki alasan khusus untuk berfokus pada metrik tertentu, sebaiknya fokus pada peningkatan skor Performa secara keseluruhan.
Gunakan bagian Peluang di laporan Lighthouse Anda untuk menentukan peningkatan mana yang menghasilkan nilai terbanyak untuk halaman Anda. Semakin signifikan peluangnya, semakin besar dampaknya terhadap skor Performa Anda. Misalnya, screenshot Lighthouse di bawah menunjukkan bahwa menghilangkan resource yang memblokir render akan menghasilkan peningkatan terbesar:
Lihat halaman landing Audit performa untuk mempelajari cara menangani peluang yang diidentifikasi dalam laporan Lighthouse Anda.
Referensi
- Kode sumber untuk audit Total Waktu Pemblokiran
- Apakah tugas JavaScript yang panjang menunda Waktu untuk Interaktif Anda?
- Mengoptimalkan Penundaan Input Pertama
- First Contentful Paint
- Saatnya untuk Interaktif
- Mengurangi payload JavaScript dengan pemisahan kode
- Menghapus kode yang tidak digunakan
- Memuat resource pihak ketiga secara efisien