Dropdown & Menu Mobile Rusak Setelah Aktifkan WP Rocket? Ini Jebakan RUCSS

Skenario yang sangat umum: Anda menyalakan Remove Unused CSS (RUCSS) di WP Rocket untuk mengejar skor PageSpeed, halaman jadi lebih cepat, semua tampak baik — sampai ada yang melapor bahwa menu mobile tidak mau terbuka, dropdown tidak muncul, atau modal tampil tanpa style. Di desktop biasa-biasa saja, tapi komponen interaktifnya patah.

Saya kena ini saat mengoptimasi sebuah situs editorial untuk klien. Dan yang bikin makin membingungkan: di akun admin saya semuanya normal. Baru setelah buka di incognito masalahnya muncul.

Kenapa RUCSS membuang CSS yang Anda butuhkan

RUCSS bekerja dengan memindai HTML awal halaman, lalu hanya menyimpan selector CSS yang ditemukannya di situ. Sisanya dibuang demi menghemat ukuran.

Masalahnya: banyak state UI belum ada di HTML awal. State itu baru di-set oleh JavaScript setelah pengguna berinteraksi:

• [data-open="1"] — muncul saat drawer dibuka
• .is-active / .is-open — ditambahkan saat klik
• [aria-expanded="true"] — di-toggle saat dropdown dibuka

Karena selector-selector ini tidak ada saat RUCSS memindai, mereka dianggap "tidak terpakai" dan dibuang. Akibatnya begitu drawer/dropdown/modal terbuka, CSS-nya sudah tidak ada → komponen tampil rusak.

Jebakan #1: admin yang login melihat versi berbeda

Ini yang bikin saya buang waktu paling lama. WP Rocket tidak menjalankan output RUCSS untuk admin yang sedang login — Anda melihat CSS penuh, jadi semuanya tampak normal. Pengunjung anonim melihat versi yang sudah dipangkas.

Aturannya: selalu verifikasi lewat incognito atau curl anonim, jangan percaya tampilan di tab admin Anda.

# Cek HTML yang benar-benar dilihat pengunjung
curl -s "https://situs-anda.com/" | grep -i "wpr-usedcss"

Diagnostik tercepat: tambahkan ?nowprocket di URL untuk melewati seluruh proses WP Rocket. Kalau dengan ?nowprocket komponennya normal, RUCSS-lah penyebabnya.

Perbaikan: safelist selector toggle

Tambahkan selector state interaktif ke "CSS Safelist" di WP Rocket (File Optimization → Remove Unused CSS). Tapi ada satu keterbatasan penting:

Safelist hanya menerima class polos (.class) dan id (#id) — bukan attribute selector seperti [data-open] atau [aria-expanded].

Jadi untuk komponen yang dikontrol attribute, Anda harus mengakali. Tiga opsi, dari paling rapi:

1. Tambahkan class toggle, bukan hanya attribute. Saat JS membuka drawer, set .is-open dan [data-open], lalu safelist .is-open. Sederhana dan didukung penuh.

2. Set style penting langsung dari JS (sabuk pengaman). Walaupun CSS-nya dipangkas, JS tetap memaksakan style-nya:

   drawer.style.setProperty("display", "block", "important");
   drawer.style.setProperty("transform", "translateX(0)", "important");

3. Pakai "Load CSS Asynchronously" sebagai ganti RUCSS untuk halaman dengan CSS interaktif kompleks — lebih sedikit penghematan, tapi tidak membuang state toggle.

Jebakan #2: mematikan RUCSS tidak otomatis membersihkan cache lama

Ini penting. Saat Anda menonaktifkan RUCSS, WP Rocket tidak otomatis membuang blok wpr-usedcss yang sudah ter-cache per-URL. Halaman lama tetap menyajikan CSS terpangkas.

Setelah mengubah pengaturan RUCSS apa pun, Anda harus klik Tools → "Clear Used CSS" secara spesifik — "Clear Cache" biasa tidak cukup.

Checklist saat "komponen rusak setelah WP Rocket"

1. Buka di incognito (atau ?nowprocket) — konfirmasi ini cuma kejadian buat pengunjung anonim.
2. Identifikasi state yang hilang — drawer/dropdown/modal yang di-toggle JS.
3. Safelist class toggle-nya (.is-open, .is-active) — ingat, attribute selector tidak didukung.
4. Untuk komponen attribute-driven: tambahkan class toggle, atau paksa style penting dari JS.
5. Setelah mengubah setting, "Clear Used CSS" — bukan cuma clear cache biasa.

RUCSS itu alat performa yang bagus, tapi ia buta terhadap apa pun yang baru muncul setelah interaksi. Begitu Anda paham itu, perbaikannya cepat — dan menu mobile Anda kembali hidup tanpa mengorbankan skor PageSpeed.