WP Rocket 'Delay JavaScript Execution' Merusak Dropdown Header — Kode Benar, Tapi Tidak Pernah Jalan

Ini salah satu bug yang paling menyesatkan yang pernah saya kejar di sebuah situs WordPress yang saya rawat: dropdown di menu header jalan sempurna di halaman lain, tapi mati total di homepage. Klik (atau hover) di trigger-nya, dan tidak terjadi apa-apa. Tidak ada error JavaScript merah di console. Tidak ada yang patah secara kasat mata. Cuma diam.

Yang bikin makin gila: di lingkungan lokal, semuanya jalan. Bug-nya cuma muncul di produksi. Saya habiskan hampir satu jam menatap kode yang memang benar.

Gejala yang menipu

Hal pertama yang saya lakukan adalah memastikan handler-nya benar-benar terpasang. Saya buka console di homepage produksi dan cek elemen trigger-nya:

// di console, pada elemen dropdown trigger
console.log( 'Click handler attached?', el.onclick );
// → Click handler attached? null

null. Handler-nya tidak ada. Tapi file JS-nya jelas ter-enqueue — saya bisa fetch() dan membaca isinya:

fetch( '/wp-content/themes/my-theme/assets/js/nav.js' )
  .then( r => r.text() )
  .then( t => console.log( t.slice( 0, 200 ) ) );
// → kode terbaru, persis seperti yang saya deploy. Benar.

Jadi file-nya ada, isinya benar, kode terbaru. Tapi handler-nya tidak pernah terpasang. Kode yang benar, yang tidak pernah dijalankan. Ini petunjuk besar.

Lalu saya tempel logika addEventListener itu manual ke console — dan dropdown langsung hidup. Begitu saya jalankan kodenya sendiri, semua jalan. Itulah momen "aha": kalau menjalankan kode secara manual memperbaikinya, masalahnya bukan kodenya — melainkan kapan (atau apakah) kode itu dijalankan.

Penyebabnya: Delay JavaScript Execution

Pelakunya adalah fitur Delay JavaScript Execution di WP Rocket. Fitur ini menunda semua eksekusi JavaScript sampai interaksi pengguna pertama (klik, scroll, sentuhan, gerak keyboard). Tujuannya bagus untuk skor performa: jangan jalankan JS sampai pengguna benar-benar berinteraksi, supaya metrik load awal jadi lebih bagus.

Tapi inilah jebakannya: hover bukan termasuk interaksi yang memicu eksekusi. Di homepage, perilaku pengguna pertama sering kali adalah mengarahkan mouse ke menu untuk membuka dropdown. Pada saat hover itu terjadi, JavaScript navigasi belum dijalankan — jadi addEventListener belum sempat memasang handler-nya. Trigger-nya hidup secara visual tapi mati secara fungsional, karena kode yang seharusnya menghidupkannya masih ditahan.

Itu juga menjelaskan kenapa "jalan di halaman lain": di halaman dalam, pengguna biasanya sudah klik atau scroll dulu sebelum menyentuh menu, dan interaksi itu sudah melepas eksekusi JS yang tertunda. Di homepage, dropdown sering jadi interaksi pertama — jadi ia kalah balapan.

Penundaan ini juga menjelaskan kenapa lokal selalu beres: WP Rocket umumnya tidak seagresif itu (atau tidak aktif sama sekali) di luar produksi.

Perbaikannya: kecualikan file JS dari delay

Kamu tidak perlu mematikan Delay JavaScript Execution sepenuhnya — itu fitur performa yang bagus. Cukup kecualikan file yang harus jalan lebih awal:

WP Rocket → File Optimization → tab JavaScript → Delay JavaScript Execution → Excluded JavaScript Files

Tambahkan path (atau substring unik) dari JS tema kamu di sana, misalnya:

/wp-content/themes/my-theme/assets/js/nav.js

Lalu clear cache WP Rocket. Setelah itu, file navigasi dijalankan normal saat load, addEventListener terpasang sebelum pengguna sempat hover, dan dropdown langsung hidup di homepage seperti seharusnya.

Cara cepat mendiagnosis bug "kode benar tapi tidak jalan"

Setiap kali sebuah fitur frontend mati di produksi tapi kodenya jelas benar, jalankan urutan ini:

1. Cek apakah handler-nya benar-benar terpasang — el.onclick atau inspeksi listener-nya. Kalau null, kode pemasangnya belum jalan.
2. fetch() file JS-nya dan baca isinya — pastikan kode terbaru benar-benar terkirim, bukan versi cache lama.
3. Tempel logikanya manual ke console. Kalau itu memperbaikinya, masalahnya soal timing eksekusi, bukan isi kodenya.
4. Curigai delay/defer JS. Di WP Rocket itu Delay JavaScript Execution; bisa juga atribut defer/async, atau lazy-init lain. Kecualikan script yang penting.

Pelajaran

Bug paling menyita waktu sering kali bukan soal kode yang salah, tapi kode yang benar namun tidak pernah dijalankan. Delay JavaScript Execution mengoptimalkan skor performa dengan menahan JS sampai interaksi pertama — dan hover diam-diam tidak masuk hitungan, jadi apa pun yang dipicu hover bisa mati tanpa satu pun error. Saat sesuatu mati hanya di produksi padahal kodenya sempurna, berhenti membaca ulang kodenya: cek kapan ia dijalankan. Kalau menempelkannya manual ke console memperbaikinya, kamu sedang melihat masalah delay, bukan masalah kode.