Total Waktu Pemblokiran

Total Blocking Time (TBT) adalah salah satu metrik yang dilacak di bagian Performa laporan Lighthouse. Setiap metrik menangkap beberapa aspek kecepatan pemuatan halaman.

Laporan Lighthouse menampilkan TBT dalam milidetik:

Screenshot audit Total Blocking Time Lighthouse

Yang diukur TBT

TBT mengukur jumlah total waktu halaman diblokir agar tidak merespons input pengguna, seperti klik mouse, ketukan layar, atau penekanan tombol keyboard. Jumlahnya dihitung dengan menambahkan bagian pemblokiran dari semua tugas panjang antara First Contentful Paint dan Time to Interactive. Setiap tugas yang dieksekusi selama lebih dari 50 md adalah tugas yang lama. Jumlah waktu setelah 50 milidetik adalah bagian pemblokiran. Misalnya, jika Lighthouse mendeteksi tugas berdurasi 70 milidetik, bagian pemblokiran akan menjadi 20 milidetik.

Cara Lighthouse menentukan skor TBT Anda

Skor TBT adalah perbandingan antara waktu TBT halaman Anda dan waktu TBT jutaan situs sebenarnya saat dimuat di perangkat seluler. Lihat Cara menentukan skor metrik untuk mempelajari cara menetapkan nilai minimum skor Lighthouse.

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

Lihat Apa yang menyebabkan tugas saya lama? untuk mempelajari cara mendiagnosis akar masalah tugas yang lama dengan panel Performa di Chrome DevTools.

Secara umum, penyebab paling umum dari tugas yang lama adalah:

  • Pemuatan, penguraian, atau eksekusi JavaScript yang tidak perlu. Saat menganalisis kode di panel Performa, Anda mungkin menemukan bahwa thread utama melakukan pekerjaan yang tidak terlalu 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, 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 fokuslah untuk meningkatkan skor Performa secara keseluruhan.

Gunakan bagian Diagnostik di laporan Lighthouse untuk menentukan peningkatan mana yang akan memberikan nilai paling besar untuk halaman Anda. Makin signifikan peluangnya, makin besar dampaknya terhadap Skor performa Anda. Misalnya, screenshot Lighthouse berikut menunjukkan bahwa menghapus resource yang memblokir rendering akan menghasilkan peningkatan terbesar:

Lighthouse: Bagian Diagnostik yang menampilkan sejumlah audit dan dampaknya
Lighthouse: Bagian diagnostik

Lihat Audit performa untuk mempelajari cara mengatasi peluang yang diidentifikasi dalam laporan Lighthouse Anda.

Resource