Situs klien di produksi tiba-tiba tampil telanjang total. Times New Roman di mana-mana, layout flex bubar, tombol jadi teks polos. Padahal beberapa menit sebelumnya semuanya normal; yang berubah hanya sejumlah halaman Elementor yang baru saja di-update.
Saya buka DevTools, tab Network, filter CSS: nol. Tidak ada satu pun file CSS yang dimuat. Saya periksa head HTML-nya, dan di sana cuma ada satu blok inline <style id="wpr-usedcss">, tanpa satu pun tag <link rel="stylesheet">. Itu tanda tangan fitur Remove Unused CSS (RUCSS) milik WP Rocket: dia mencabut semua stylesheet dan menggantinya dengan satu blok berisi CSS yang dia anggap terpakai. Masalahnya, blok itu tidak berisi CSS dasar Elementor sama sekali. RUCSS memutuskan hampir seluruh CSS Elementor "tidak terpakai" dan membuangnya.
Ini bukan pertemuan pertama saya dengan RUCSS di situs ini. Sebelumnya di saga yang sama, produksi sempat rusak tepat setelah halaman-halaman diperbarui: RUCSS meng-inline cache used-css yang basi dan tidak lengkap, yang class-nya sudah tidak cocok lagi dengan HTML baru. Jadi tersangkanya sudah jelas. Solusi resminya juga jelas: masukkan selector Elementor ke safelist RUCSS supaya tidak ikut di-strip. Dan di sinilah saya masuk jebakan.
Jalan buntu: safelist yang saya kira regex
Saya isi field safelist dengan satu entri yang menurut saya elegan:
.elementor-3(.*)Niatnya: "amankan semua class yang diawali elementor-3", karena Elementor memberi tiap halaman class scoped seperti .elementor-3199 sesuai post ID-nya. Placeholder di field-nya pun mengesankan pola wildcard didukung, jadi saya percaya diri. Clear cache, preload, purge Cloudflare, reload. Masih telanjang. Ulangi ritualnya dari awal. Hasilnya sama persis.
Root cause: field itu menerima selector, bukan pattern
Setelah berhenti menebak dan membongkar perilakunya pelan-pelan, jawabannya sederhana dan agak menyebalkan: field safelist RUCSS menerima selector CSS biasa, bukan regex. Entri .elementor-3(.*) tidak pernah dibaca sebagai pola. Dia dibaca literal, sebagai class bernama elementor-3(.*), yang tentu tidak cocok dengan elemen mana pun di halaman mana pun. Efeknya, safelist saya setara dengan kosong, dan RUCSS bebas men-strip seluruh CSS dasar Elementor.
Ada jebakan lapis kedua di kasus yang sama: RUCSS juga bisa menandai selector custom_css yang panjang dan page-scoped, misalnya .elementor-3176 .elementor-element-f8e2dbe, sebagai tidak terpakai, karena selector seperti itu lolos dari pemindaian HTML-nya. Jadi meskipun class-nya benar-benar ada di halaman, CSS-nya tetap bisa hilang.
Perbaikannya
Tulis selector plain secara eksplisit, satu per baris:
.elementor
.elementor-element
[class*="elementor-element-"]
.e-con
.e-flex
.elementor-widget
.elementor-heading-title
.elementor-button
.elementor-image
.elementor-3199Baris terakhir itu contoh: satu entri .elementor- plus post ID untuk tiap halaman. Dokumentasi WP Rocket memang bilang wildcard trailing seperti .elementor-3* didukung, tapi di lapangan perilakunya tidak konsisten. Yang terbukti jalan adalah daftar eksplisit satu per baris.
Setelah safelist beres, urutannya: Clear and Preload Cache di WP Rocket, Purge Everything di Cloudflare, tunggu kira-kira 30 detik supaya job regenerasi used-css selesai, lalu reload lewat jendela incognito. CSS Elementor kembali, layout hidup lagi.
Fallback yang selalu jalan
Kalau situs produksi sedang hancur dan kamu butuh dia waras sekarang, bukan setelah eksperimen safelist selesai: ganti opsi Remove Unused CSS ke Load CSS Asynchronously. Fallback ini 100% andal karena tidak ada CSS yang dibuang sama sekali. Dan jadikan kebiasaan: setiap selesai deploy atau edit halaman, jalankan Clear Used CSS di WP Rocket supaya cache used-css yang basi tidak menghantui halaman baru.
Pelajaran
- Field safelist RUCSS menerima selector CSS biasa, bukan regex.
(.*)dibaca sebagai teks literal, bukan pola. - Wildcard
*yang dijanjikan dokumentasi berperilaku tidak konsisten. Tulis tiap selector eksplisit, satu per baris. - Head yang hanya berisi
<style id="wpr-usedcss">tanpa<link rel="stylesheet">adalah tanda tangan RUCSS. Mulai curiga dari sana. - Selector
custom_cssyang panjang dan page-scoped bisa ikut dianggap tidak terpakai. Safelist-kan juga. - Setelah tiap deploy, Clear Used CSS. Kalau butuh aman instan, Load CSS Asynchronously selalu jalan.