Jawaban Singkat
Block theme WordPress modern sering ngirim file CSS gede banget, tapi mayoritas isinya adalah kode yang nggak dipakai halaman itu. Masalahnya bukan di theme developer doang; arsitektur theme.json dan global-styles-inline-css bisa ngebloat tanpa kamu sadari. Solusinya: pisahkan CSS per halaman, buang unused CSS, dan manfaatkan wp_should_load_separate_core_block_assets buat nurunin payload.
Kenapa Block Theme Modern Bisa Lebih Gemuk dari Classic Theme?
Gampangnya, block theme (FSE) ngandelin theme.json buat ngatur semua styling. File ini powerful; kamu tinggal definisiin preset warna, typography, spacing, dan layout. WordPress lalu otomatis generate CSS dari situ. Hasilnya? Setiap halaman nerima minimal dua layer CSS bawaan: global styles inline dan core block styles.
Yang bikin kaget: satu halaman blog biasa bisa narik lebih dari 150 KB CSS dari core WordPress doang, sebelum theme-mu nambahin apa pun. Padahal halaman itu mungkin cuma pakai paragraf, heading, sama gambar. Sisa 80% CSS-nya buat block yang nggak pernah muncul di halaman tersebut.
Classic theme dulu nggak sebloat ini karena CSS-nya manual. Developer nulis stylesheet sendiri, cuma load yang diperlukan. Tapi block theme mengganti model itu. Ini bukan downgrade, cuma pergeseran tanggung jawab; sekarang kamu yang harus aktif memotong, bukan mengandalkan theme.
Musuh Utama: Global Styles yang Nggak Kamu Sadari
Buka Chrome DevTools, cek tab Network, filter CSS. Lihat file global-styles-inline-css. Di beberapa theme populer, file ini bisa tembus 40-60 KB inline. Itu ditaro di <head>, jadi render-blocking. Browser harus parse semuanya sebelum nge-render apa pun di layar.
Masalahnya: global styles itu sifatnya “all or nothing”. WordPress generate satu set CSS dari theme.json lalu nyelipin ke semua halaman. Kamu nggak bisa bilang, “Eh, halaman kontak nggak butuh style tombol carousel, skip aja.” Sistemnya nggak sepintar itu.
Gimana Cara Benerin? Framework Empat Langkah
1. Aktifkan Separate Core Block Assets
WordPress 6.7+ punya fungsi yang underrated banget: wp_should_load_separate_core_block_assets(). Pas aktif, WordPress cuma load CSS buat block yang benar-benar ada di halaman itu. Jadi kalau halaman kamu nggak pakai block tabel, stylesheet tabel nggak ikut ditarik. Simpel tapi efeknya besar.
Caranya: pastikan theme-mu support fitur ini. Kalau kamu theme dev, tambahin ini di functions.php atau via filter:
add_filter( 'should_load_separate_core_block_assets', '__return_true' );Atau, pake wp_should_load_separate_core_block_assets() untuk conditional logic yang lebih presisi.
2. Audit CSS-mu dengan Coverage Tool
Chrome DevTools punya tab Coverage (buka Command Palette, ketik “coverage”, pilih “Show Coverage”). Reload halaman, lalu lihat persentase unused bytes per file CSS. Rata-rata block theme WordPress: 65-85% CSS-nya nggak kepakai. Angka ini yang harus kamu pangkas.
- Unused CSS di atas 70%: Pertanda theme-mu terlalu generik.
- Unused CSS di bawah 40%: Kamu di jalur yang benar.
3. Ekstrak Critical CSS Per Tipe Halaman
Critical CSS adalah CSS minimum yang dibutuhkan buat nge-render above the fold. Tools kayak WP Rocket, Flying Press, atau Perfmatters bisa generate ini otomatis. Tapi kalau kamu mau kontrol penuh, tools eksternal kayak Critical (npm) atau Penthouse bisa kamu integrasiin ke build pipeline.
Pisahin per tipe halaman: homepage, single post, archive, page, search. Setiap tipe punya komposisi block yang beda, jadi critical CSS-nya juga beda. Jangan pake satu set critical CSS buat semua halaman; itu sama aja bohong.
4. Hapus Unused CSS dari Plugin Pihak Ketiga
Ini bagian yang paling menyakitkan. Plugin kayak form builder, slider, atau social sharing sering ngeload CSS-nya di semua halaman, padahal cuma dipakai di satu halaman. Solusinya:
- Perfmatters punya fitur Script Manager buat disable aset per halaman/post.
- Asset CleanUp (gratis) bisa unload CSS/JS per URL.
- Atau kamu bisa
wp_dequeue_style()secara manual dengan conditional tag WordPress.
Real Case: Ngurangin CSS dari 212 KB Jadi 38 KB
Saya pernah audit block theme buatan agency lokal yang dipake klien e-commerce. Di homepage, total CSS-nya 212 KB. Setelah dicek Coverage: 82% unused. Langkah yang diambil:
- Aktifkan
should_load_separate_core_block_assets: turun ke 168 KB. - Hapus stylesheet plugin yang nggak relevan via Perfmatters: turun ke 94 KB.
- Generate critical CSS inline (above the fold) dan defer sisanya: payload awal cuma 38 KB.
Hasilnya: LCP turun dari 3.8s ke 1.6s di mobile. Skor PageSpeed dari 52 ke 91. Dan yang paling penting: nggak ada visual flicker karena critical CSS udah inline di <head>.
Satu Hal yang Theme Dev Sering Abaiin
Banyak developer nulis theme.json kayak nulis daftar belanja: semua dimasukin. Padahal setiap preset di theme.json nambah byte ke global-styles-inline-css. Color palette 12 warna, 8 ukuran font, 6 gradient presets. Itu semua jadi string CSS yang diulang-ulang di setiap halaman.
Aturannya gampang: kalau klien cuma pakai 4 warna, definisiin cuma 4 warna di theme.json. Jangan kasih opsi “siapa tahu nanti dipakai”. Itu bukan fleksibilitas; itu bom waktu performa.
Toolkit Buat Theme Dev & Agency
- Chrome Coverage Tab: Audit pertama, cari unused CSS.
- web.dev/measure: Lighthouse audit dengan rekomendasi spesifik.
- Perfmatters / Flying Press: Critical CSS generation + script management.
- npm critical: Buat yang mau integrate ke CI/CD pipeline.
- Lighthouse: Reduce unused CSS (Google): Dokumentasi resmi dari Chrome.
Kalau kamu pakai WordPress core 6.5 ke atas, baca juga dokumentasi resmi soal separate core block assets. Fitur ini masih terus disempurnakan tiap rilis.
Kesimpulan
Block theme bukan musuh performa. Arsitekturnya emang beda, tapi masalah CSS yang nggak terkontrol bisa terjadi di semua jenis tema. Bedanya, block theme kasih kamu kontrol lebih granular lewat theme.json dan separate block assets. Kamu tinggal mau serius atau nggak.
Kalau kamu theme dev atau agency yang ngurusin puluhan situs klien, biasakan audit CSS coverage tiap kali rilis. Angka 200 KB CSS itu bukan masalah sepele; di koneksi mobile 3G, itu bisa bikin LCP meledak dan calon pengunjung kabur sebelum halaman selesai loading.
Jangan lupa baca juga artikel kami soal performance budget WordPress dan cara optimasi gambar yang benar. Dua artikel itu nglengkapi strategi CSS yang udah kita bahas.
