5+ TBT pada WordPress: Bagaimana menggurangi tugas Main Thread dan Javascript

Total Blocking Time (TBT) adalah waktu yang dihabiskan oleh browser untuk menunggu respon dari server sebelum bisa melanjutkan proses rendering halaman. Semakin lama waktu tunggu tersebut, maka semakin lambat pula halaman akan dimuat dan ditampilkan kepada pengunjung.

Pada WordPress, ada beberapa cara yang dapat dilakukan untuk mengurangi TBT, yaitu dengan mengurangi jumlah tugas yang dilakukan oleh main thread dan mengurangi jumlah JavaScript yang dijalankan.

Untuk mengurangi tugas yang dilakukan oleh main thread, Anda dapat melakukan beberapa hal berikut:

1. Gunakan plugin caching untuk menyimpan versi statis dari halaman yang sering diakses, sehingga browser tidak perlu mengirimkan permintaan ke server setiap kali halaman tersebut dibuka.
2. Optimalkan ukuran gambar dengan menggunakan plugin seperti WP Smush atau EWWW Image Optimizer. Hal ini akan mengurangi waktu yang diperlukan untuk mengunduh gambar dan mempercepat proses loading halaman.
3. Hapus plugin yang tidak diperlukan atau yang tidak digunakan secara aktif. Plugin yang tidak dipakai hanya akan membebani main thread tanpa memberikan manfaat apapun.

Untuk mengurangi jumlah JavaScript yang dijalankan, Anda dapat melakukan beberapa hal berikut:

1. Gunakan plugin seperti Autoptimize atau Async JavaScript untuk mengoptimalkan penggunaan JavaScript di situs Anda. Plugin ini akan mengkombinasikan file JavaScript menjadi satu file, sehingga browser tidak perlu memuat file yang terpisah-pisah.
2. Gunakan plugin seperti Cloudflare atau Fast Velocity Minify untuk mengaktifkan minifikasi JavaScript. Minifikasi akan menghapus spasi dan baris baru dari file JavaScript, sehingga ukurannya menjadi lebih kecil dan lebih cepat untuk dimuat.
3. Hapus plugin yang tidak diperlukan atau yang tidak digunakan secara aktif. Plugin yang tidak dipakai hanya akan menambah jumlah JavaScript yang dijalankan tanpa memberikan manfaat apapun.

1. Temukan Long Main-Thread Tasks

Long Main-Thread Tasks (Kode Utama terload lama) adalah suatu proses yang menyebabkan jeda atau lag pada aplikasi JavaScript yang berjalan di browser. Hal ini terjadi karena proses tersebut mengambil terlalu banyak waktu untuk menyelesaikan tugasnya dan menyebabkan thread utama (main thread) tidak bisa digunakan untuk menangani tugas lain selama proses tersebut berlangsung.

Para developer harus mencari cara untuk mengurangi atau menghindari Long Main-Thread Tasks untuk memastikan aplikasi JavaScript berjalan dengan cepat dan responsif. Salah satu cara untuk mengatasinya adalah dengan memecah tugas besar menjadi beberapa tugas kecil yang dapat dieksekusi secara paralel atau sekuensial.

Selain itu, perlu diwaspadai juga performace pada saat mengakses object, array, dan looping yang terlalu besar, itu juga bisa menyebabkan terjadinya Long Main-Thread Tasks.

Beberapa outil yang dapat digunakan untuk menemukan dan menganalisa Long Main-Thread Tasks diantaranya :

• Chrome DevTools: melalui fitur Performance, Anda dapat melihat bagaimana aplikasi Anda berjalan dalam rentang waktu tertentu dan menemukan Long Main-Thread Tasks.
• Lighthouse: sebuah alat analisis performa dari Google yang dapat digunakan untuk mengevaluasi kinerja aplikasi web dan memberikan saran untuk meningkatkan performa.
• LongTask API: API baru yang dapat digunakan untuk menemukan Long Main-Thread Tasks dalam aplikasi JavaScript.

Pengurangan Long Main-Thread Tasks, dapat membuat aplikasi web yang lebih responsif, performa yang lebih baik, dan pengalaman pengguna yang lebih baik.

Pada Pagespeed Insight, tugas yang terlalu lama biasa nya pada URL dari domain pihak ketiga tertentu, plugin, Jquery, dll.

Minimalkan pekerjaan code utama pada dasarnya adalah laporan yang sama, hanya saja ini menunjukkan gambaran yang lebih umum. Anda dapat melihat apakah Anda perlu mengerjakan JavaScript, CSS, atau file lainnya. Laporan apa pun yang memengaruhi total waktu pemblokiran menunjukkan singkatan “TBT” di sebelahnya seperti yang ditunjukkan pada tangkapan layar di atas.

2. Delay JavaScript

Delay atau penundaan adalah suatu mekanisme di JavaScript yang digunakan untuk menunda eksekusi suatu kode untuk jangka waktu tertentu. Di WordPress, Anda dapat menambahkan delay pada JavaScript dengan beberapa cara:

1. Menggunakan fungsi setTimeout(): Anda dapat menambahkan fungsi setTimeout() langsung pada file JavaScript yang digunakan oleh tema atau plugin WordPress Anda. Sebagai contoh:

setTimeout(function() {
  console.log("Hello, World!");
}, 3000);

Ini akan menampilkan "Hello, World!" setelah 3 detik.

2. Menggunakan jQuery: WordPress menggunakan library jQuery yang memiliki fungsi delay() untuk menambahkan delay pada animasi dan event. Sebagai contoh:

$("#element").delay(3000).fadeOut();

Ini akan menyembunyikan element dengan ID "element" setelah 3 detik.

3. Menambahkan delay pada plugin: Anda dapat menambahkan delay pada plugin WordPress yang Anda gunakan dengan mengubah kode plugin yang sesuai. Misalnya, jika Anda menggunakan plugin slider, Anda dapat menambahkan delay pada fungsi slide untuk mengatur kecepatan transisi slide.
4. Menambahkan delay pada tema : Anda dapat menambahkan delay pada tema WordPress yang Anda gunakan dengan menambahkan kode JavaScript atau jQuery pada file tema yang sesuai, misalnya pada file functions.php atau di bagian javascript di file header.php .

Ada juga plugin yang memudahkan untuk menambahkan delay pada javascript seperti WP Add Custom JS yang memungkinkan anda untuk menambahkan custom javascript kedalam wordpress tanpa perlu menyentuh file theme anda.

Note:

Ingat bahwa setiap kali Anda menambahkan kode JavaScript atau jQuery pada WordPress, pastikan untuk melakukan backup sebelum melakukan perubahan agar Anda dapat dengan mudah mengembalikan konfigurasi jika terjadi masalah.

Pada wordpress anda bisa menggunakan plugin WP Rocket atau plugin lainnya seperti (FlyingPress, Flying Scripts, LiteSpeed Cache, dan Perfmatters) untuk kebutuhan delay Javascript lewat plugin. Berikut Dokumentasi yang bisa membantu anda mengatasi Delay Javascript.

Berikut daftar file JavaScript umum yang dapat Anda Delay (tunda) :

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name

Lalu tambahkan pada plugin anda, contoh disini saya pakai Perfmatters

3. Hapus Plugin yang menambahkan Javascript

Anda binggung plugin mana yang menambahkan banyak javascript code?

Lihat pada Coverage pada console browser, anda bisa mencarinya dan filter berdasarkan file-file javascript yang memiliki total byte yang besar dan byte yang tidak digunakan di website serta url plugin yang memiliki file javascript tersebut.

Anda juga bisa cek artikel berikut yang bermanfaat untuk menggurangi plugin yang tidak perlu digunakan, 75+ Plugin secara umum yang memperlambat website wordpress.

4. Cari dan Optimalkan Tema + Page Builder Anda

Secara umum pembuatan website wordpress perlu nya tema dan Page builder yang mempermudah pengerjaan pembuatan layout nya. Namun setelah saya research lebih lanjut ada beberapa hal yang perlu diperhatikan untuk file css atau js yang terkadang tidak perlu digunakan pada theme atau builder tersebut yang mengakibatkan berat nya file website kita. Jadi perlu nya kalian untuk memilih tema dan builder yang ringan dan cocok sesuai kebutuhan fitur website yang akan dibuat.

Page builder atau pembuat halaman seperti Elementor & Divi lebih banyak menambahkan file css & js dari pada Guternberg. Berikut perbandingan grafik Tema awal yang sempat saya cek lewat coverage tools.

Jika Anda ingin tetap menggunakan Builder dan Theme tersebut, bisa juga untuk optimasi.

1. Aktifkan Pengaturan Kinerja: Bawaan builder terkadang disetting secara default dan seharusnya bisa dioptimasi dan dikurangi css, javascript, dan font. Bahkan apabila di Elementor bisa mengurangi ukuran DOM untuk total waktu pemblokiran.
2. Jangan Install Plugin Page Builder yang Berat: Menggunakan page builder itu sudah membuat lambat website, apalagi menambah builder page yang berat. Mungkin anda perlu membuat template yang berbagai macam, namun perlu di ingat kalau page builder juga memperburuk lambat nya suatu website.

5. Hapus Javascript tertentu

Ya benar, tidak semua javascript file di gunakan pada halaman tersebut. Kita perlu filter dan mengoptimalkannya sebagiannya dengan plugin cache, contoh nya plugin Perfmatters dan Asset CleanUp. Saya rekomendasikan pakai Perfmatters karena memiliki banyak pengoptimalan lain yang tidak ditemukan di sebagian besar plugin cache.

Contoh:

• Nonaktifkan plugin berbagi sosial di mana saja kecuali posting.
• Nonaktifkan formulir kontak di mana saja kecuali halaman kontak.
• Nonaktifkan semua plugin galeri kecuali halaman dengan galeri.
• Nonaktifkan elementor-diagolog jika Anda tidak menggunakannya untuk Popup.

6. Minify File Javascript & CSS

Minify merupakan cara untuk mengurangi ukuran file dengan menghapus karakter yang tidak diperlukan. Namun apabila itu merusak website, anda bisa mencari file mana yang rusak dan bisa mengecualikan pada pengaturan plugin cache yang diaktifkan.

Dengan mengikuti tips di atas, Anda dapat mengurangi TBT di situs WordPress Anda dan meningkatkan kecepatan loading halaman untuk pengunjung. Selain itu, hal ini juga dapat meningkatkan SEO situs Anda karena kecepatan loading halaman merupakan faktor yang dipertimbang.

Bisa cek portfolio website yang sudah saya buat di sini.