Performa website bukan hanya soal tampilan yang menarik atau konten yang lengkap. Dalam dunia pengembangan web modern, kecepatan dan responsivitas menjadi faktor utama yang menentukan apakah pengunjung akan bertahan atau langsung menutup halaman. Google sendiri telah menegaskan bahwa pengalaman pengguna atau User Experience (UX) menjadi salah satu komponen penting dalam sistem peringkat mesin pencari. Itulah sebabnya berbagai metrik performa website mulai diperkenalkan, salah satunya adalah Total Blocking Time (TBT).
Bagi programmer atau developer yang sering melakukan audit performa website menggunakan Google Lighthouse atau PageSpeed Insights, metrik TBT pasti sering muncul dalam laporan analisis. Nilai TBT yang tinggi biasanya menandakan adanya proses JavaScript yang memblokir interaksi pengguna dalam waktu tertentu. Artikel ini akan membahas secara lengkap mengenai apa itu Total Blocking Time, cara mengukurnya, penyebab nilainya tinggi, serta strategi optimasi yang bisa dilakukan untuk menguranginya sehingga performa website menjadi lebih cepat dan responsif.
Apa Itu Total Blocking Time (TBT)?
Total Blocking Time (TBT) adalah metrik performa website yang mengukur total waktu di mana thread utama browser (main thread) terblokir sehingga tidak dapat merespons interaksi pengguna. Dalam konteks pengujian performa website, TBT dihitung selama periode antara First Contentful Paint (FCP) hingga Time to Interactive (TTI).
Untuk memahami konsep ini dengan lebih sederhana, bayangkan browser seperti sebuah kasir di sebuah toko. Ketika kasir sedang memproses transaksi yang sangat lama, pelanggan lain harus menunggu sebelum dilayani. Hal yang sama terjadi pada browser ketika menjalankan JavaScript yang berat. Jika sebuah script membutuhkan waktu lebih dari 50 milidetik, maka proses tersebut disebut sebagai long task. Long task inilah yang menyebabkan browser tidak bisa merespons klik, scroll, atau input pengguna.
Baca Juga: Largest Contentful Paint (LCP): Dampak dan Solusi
Cara Kerja Total Blocking Time (TBT)
Untuk memahami bagaimana Total Blocking Time terjadi, penting memahami bagaimana browser memproses sebuah halaman web. Browser bekerja menggunakan sebuah komponen utama yang disebut main thread. Thread ini bertanggung jawab untuk menjalankan berbagai tugas penting seperti parsing HTML, rendering layout, menjalankan JavaScript, serta memproses interaksi pengguna.
Proses kerja TBT dapat dijelaskan melalui beberapa tahapan berikut:
1. Main Thread pada Browser
Main thread adalah jalur utama tempat semua proses utama browser dijalankan. Ketika halaman dimuat, browser akan membaca HTML, membangun DOM, memproses CSS, dan menjalankan JavaScript. Jika salah satu proses tersebut terlalu berat, main thread akan menjadi sibuk dan tidak bisa menangani tugas lain.
2. Long Tasks pada JavaScript
Dalam standar performa web, sebuah tugas disebut long task ketika eksekusinya memakan waktu lebih dari 50 milidetik. Script JavaScript yang kompleks atau terlalu besar sering menjadi penyebab munculnya long task ini.
3. Blocking Time yang Terjadi
Ketika long task terjadi, browser tidak dapat merespons interaksi pengguna sampai tugas tersebut selesai. Waktu di atas 50 ms inilah yang dianggap sebagai blocking time.
4. Interaksi Pengguna yang Tertunda
Jika pengguna mencoba melakukan klik atau input saat blocking terjadi, browser harus menunggu hingga task selesai. Akibatnya muncul delay yang terasa oleh pengguna.
Semua blocking time dari berbagai long task kemudian dijumlahkan untuk menghasilkan nilai Total Blocking Time. Semakin banyak script berat yang berjalan selama proses loading, semakin besar pula nilai TBT yang dihasilkan.
Baca Juga: Cumulative Layout Shift (CLS): Dampak dan Solusinya
Rumus Perhitungan Total Blocking Time (TBT)
Secara konsep, perhitungan Total Blocking Time sebenarnya cukup sederhana. Metrik ini hanya menjumlahkan waktu blocking yang terjadi pada setiap long task selama periode antara First Contentful Paint (FCP) dan Time to Interactive (TTI).
Rumus sederhananya dapat dituliskan seperti berikut:
Artinya, hanya bagian waktu yang melebihi 50 milidetik yang dihitung sebagai blocking time. Jika sebuah task berjalan kurang dari 50 ms, maka task tersebut tidak dihitung sebagai blocking.
Sebagai contoh sederhana, bayangkan sebuah halaman memiliki tiga long task seperti berikut:
| Task | Durasi Task | Blocking Time |
|---|---|---|
| Task 1 | 120 ms | 70 ms |
| Task 2 | 80 ms | 30 ms |
| Task 3 | 200 ms | 150 ms |
Total Blocking Time dihitung dengan menjumlahkan semua blocking time:
Dalam laporan Google Lighthouse, nilai TBT biasanya dikategorikan sebagai berikut:
| Nilai TBT | Kategori |
|---|---|
| 0 – 200 ms | Baik |
| 200 – 600 ms | Perlu perbaikan |
| > 600 ms | Buruk |
Semakin kecil nilai TBT, semakin responsif halaman tersebut saat dimuat. Developer biasanya berusaha menjaga TBT di bawah 200 ms agar interaksi pengguna tetap terasa cepat dan natural.
Perbedaan Total Blocking Time dan First Input Delay (FID)
Banyak developer sering bingung membedakan Total Blocking Time (TBT) dengan First Input Delay (FID). Kedua metrik ini memang sama-sama mengukur responsivitas halaman, tetapi cara pengukurannya berbeda.
| Aspek | Total Blocking Time (TBT) | First Input Delay (FID) |
|---|---|---|
| Fungsi | Mengukur total waktu blocking selama loading | Mengukur delay pada interaksi pertama pengguna |
| Jenis Data | Lab data (pengujian simulasi) | Field data (data pengguna nyata) |
| Digunakan oleh | Google Lighthouse | Core Web Vitals |
| Waktu Pengukuran | Antara FCP dan TTI | Saat pengguna melakukan input pertama |
Perbedaan utama antara keduanya terletak pada sumber datanya. TBT diukur dalam lingkungan pengujian seperti Lighthouse yang mensimulasikan kondisi loading halaman. Sementara itu, FID diukur dari data pengguna nyata melalui Chrome User Experience Report.
Baca Juga: Cara Optimasi LCP pada Website Banyak Gambar
Penyebab Nilai Total Blocking Time Tinggi (TBT)
Beberapa penyebab umum nilai TBT tinggi antara lain sebagai berikut:
1. JavaScript Berukuran Terlalu Besar
Banyak website modern menggunakan framework JavaScript seperti React, Vue, atau Angular yang menghasilkan bundle file cukup besar. Jika file JavaScript tidak dipecah menjadi bagian kecil atau tidak menggunakan teknik seperti code splitting, browser harus memproses seluruh script sekaligus. Hal ini membuat eksekusi script membutuhkan waktu lama dan menghasilkan long tasks.
2. Terlalu Banyak Script Pihak Ketiga
Script pihak ketiga seperti Google Analytics, Facebook Pixel, iklan, live chat, atau tracking tools lainnya sering kali menambah beban pada halaman. Setiap script tambahan harus diunduh, diparsing, dan dieksekusi oleh browser. Jika jumlahnya terlalu banyak, main thread akan dipenuhi oleh berbagai tugas yang menyebabkan blocking time meningkat.
3. Rendering JavaScript yang Berat
Beberapa aplikasi web melakukan proses rendering komponen secara kompleks menggunakan JavaScript. Misalnya pada aplikasi Single Page Application (SPA) yang membangun DOM secara dinamis. Jika proses rendering terlalu berat, browser membutuhkan waktu lebih lama untuk menyelesaikan eksekusi script sebelum halaman bisa merespons interaksi pengguna.
4. Proses Parsing JavaScript yang Lambat
Sebelum script dijalankan, browser harus melakukan parsing terlebih dahulu. File JavaScript yang sangat besar membutuhkan waktu parsing lebih lama. Dalam situasi tertentu, parsing saja sudah cukup untuk menciptakan long task yang memblokir main thread.
5. Struktur DOM yang Terlalu Kompleks
Meskipun JavaScript sering menjadi penyebab utama TBT tinggi, struktur Document Object Model (DOM) yang terlalu besar juga dapat memperburuk situasi. DOM dengan ribuan elemen membuat proses rendering dan manipulasi elemen menjadi lebih berat bagi browser.
Baca Juga: Cara Mudah Mengetahui Website Terindeks Google atau Belum
Cara Mengukur Total Blocking Time (TBT)
Untuk mengetahui apakah sebuah website memiliki masalah pada Total Blocking Time, developer perlu menggunakan beberapa tools analisis performa. Tools ini biasanya memberikan laporan lengkap mengenai berbagai metrik kecepatan halaman, termasuk TBT. Beberapa tools populer yang sering digunakan antara lain:
1. Google Lighthouse
Google Lighthouse adalah salah satu tools audit performa yang paling sering digunakan oleh developer. Lighthouse dapat dijalankan langsung melalui Chrome DevTools atau melalui command line.
Cara menggunakannya cukup sederhana:
- Buka website menggunakan Google Chrome
- Tekan F12 untuk membuka DevTools
- Pilih tab Lighthouse
- Jalankan audit performa
Setelah proses analisis selesai, Lighthouse akan menampilkan berbagai metrik performa termasuk Total Blocking Time lengkap dengan rekomendasi optimasinya.
2. Google PageSpeed Insights
PageSpeed Insights merupakan tools online yang disediakan Google untuk menganalisis performa website. Tools ini menggunakan Lighthouse sebagai engine utamanya sehingga hasil analisisnya hampir sama.
Cukup masukkan URL website, kemudian PageSpeed Insights akan menampilkan laporan performa yang mencakup:
- Core Web Vitals
- Total Blocking Time
- Largest Contentful Paint
- Cumulative Layout Shift
Tools ini juga memberikan saran teknis seperti mengurangi JavaScript yang tidak digunakan atau menunda eksekusi script tertentu.
3. Chrome DevTools Performance Panel
Chrome DevTools juga memiliki Performance Panel yang sangat berguna untuk menganalisis aktivitas main thread secara detail. Developer dapat merekam aktivitas halaman dan melihat bagian mana yang menyebabkan long task.
Dengan menggunakan panel ini, developer bisa mengetahui:
- Script mana yang menyebabkan blocking
- Berapa lama eksekusi setiap task
- Bagian mana dari kode yang perlu dioptimasi
4. WebPageTest
WebPageTest adalah tools analisis performa website yang menyediakan laporan lebih mendalam dibanding PageSpeed Insights. Tools ini memungkinkan pengujian dari berbagai lokasi server dan perangkat yang berbeda.
Laporan WebPageTest biasanya mencakup waterfall chart yang menunjukkan proses loading setiap resource pada halaman. Dengan data ini, developer dapat mengidentifikasi script yang menyebabkan blocking time terbesar.
Baca Juga: Bounce Rate pada Website dan Dampaknya ke SEO
Cara Mengurangi Total Blocking Time (TBT)
Setelah mengetahui penyebab nilai TBT tinggi, langkah berikutnya adalah melakukan optimasi untuk menguranginya. Ada beberapa teknik yang sering digunakan oleh developer untuk memperbaiki masalah ini.
1. Mengurangi JavaScript yang Tidak Digunakan
Banyak website memuat library JavaScript yang sebenarnya tidak digunakan sepenuhnya. File JavaScript yang besar akan meningkatkan waktu parsing dan eksekusi. Developer dapat menggunakan teknik tree shaking atau menghapus library yang tidak diperlukan untuk mengurangi ukuran bundle.
2. Memecah Long Tasks
Long task yang berjalan lebih dari 50 ms dapat dipecah menjadi beberapa task kecil. Teknik ini sering disebut sebagai task splitting atau chunking. Dengan membagi tugas besar menjadi bagian kecil, browser memiliki kesempatan untuk memproses interaksi pengguna di sela-sela eksekusi script.
3. Menggunakan Code Splitting
Code splitting adalah teknik membagi bundle JavaScript menjadi beberapa file kecil yang dimuat secara dinamis. Framework modern seperti React atau Vue sudah mendukung teknik ini secara bawaan.
Dengan code splitting, hanya script yang benar-benar dibutuhkan yang akan dimuat pada halaman awal. Script lainnya dapat dimuat ketika pengguna benar-benar membutuhkannya.
4. Meminimalkan Script Pihak Ketiga
Script pihak ketiga sering menjadi penyebab utama TBT tinggi. Sebaiknya hanya gunakan script yang benar-benar penting. Tools seperti Tag Manager juga dapat membantu mengontrol kapan script tertentu dijalankan.
5. Menggunakan Web Workers
Web Workers memungkinkan JavaScript dijalankan di thread terpisah sehingga tidak membebani main thread browser. Proses komputasi berat seperti pengolahan data dapat dipindahkan ke worker thread agar tidak memblokir interaksi pengguna.
6. Menggunakan Lazy Loading untuk Script
Script yang tidak diperlukan pada saat awal halaman dimuat dapat ditunda menggunakan teknik lazy loading. Dengan cara ini, browser hanya memuat script penting terlebih dahulu sehingga halaman dapat menjadi interaktif lebih cepat.
Baca Juga: Cara Optimasi Lazy Load Gambar Website Tanpa JS
Kesimpulan
Pada pembahasan kita di atas dapat kita simpulkan bahwa Total Blocking Time (TBT) merupakan salah satu metrik penting dalam analisis performa website modern. Metrik ini mengukur total waktu ketika main thread browser terblokir oleh tugas-tugas berat sehingga tidak dapat merespons interaksi pengguna. Nilai TBT yang tinggi biasanya disebabkan oleh JavaScript yang terlalu besar, script pihak ketiga yang berlebihan, atau proses rendering yang kompleks.
Dalam praktiknya, TBT sering digunakan oleh developer sebagai indikator untuk memperkirakan kualitas responsivitas halaman selama proses loading. Meskipun metrik ini bukan bagian langsung dari Core Web Vitals, TBT memiliki hubungan erat dengan First Input Delay (FID) yang merupakan salah satu metrik resmi Google dalam mengukur pengalaman pengguna. Oleh karena itu, menjaga nilai TBT tetap rendah menjadi langkah penting dalam optimasi performa website.
Artikel ini merupakan bagian dari seri WordPress KantinIT.com. Jika artikel ini bermanfaat, jangan lupa bagikan ke media sosial atau ke teman kamu.
