Masalah utama developer WordPress dengan page builder mainstream? Markup HTML berantakan, CSS inline membanjiri halaman, dan editor visual yang lambat menghantui produktivitas. Saya sendiri pernah menghabiskan 3 jam hanya untuk mengoverride styling sebuah slider yang dibangun dengan shortcode bloat.
Oxygen dan Bricks menawarkan jalan keluar berbeda: keduanya bangun dari filosofi developer-first dengan output kode minimal dan kontrol penuh atas setiap elemen. Tapi pertanyaannya—mana yang benar-benar tercepat, baik dari sisi performa situs maupun kecepatan kerja development?
Pada artikel ini, saya bandingkan langsung berdasarkan pengalaman membangun 12+ situs klien dengan Oxygen 4.x dan 8+ proyek dengan Bricks 1.8+. Tanpa basa-basi marketing, fokus pada data konkret dan workflow nyata.
Perbedaan Filosofi Dasar: Code First vs Visual First
Oxygen Builder mengambil pendekatan radikal: ia menggantikan tema WordPress sepenuhnya. Ketika aktif, Oxygen nonaktifkan sistem tema WordPress dan mengambil alih output HTML dari nol. Ini berarti Anda mulai dari blank canvas tanpa overhead tema.
Bricks Builder, di sisi lain, tetap bekerja dalam ekosistem tema WordPress. Ia menggantikan konten area dengan builder-nya sendiri tapi membiarkan fungsi tema lain (header, footer, archive) tetap berjalan. Ini memberikan fleksibilitas hybrid yang penting untuk proyek tertentu.
Dampak langsungnya: Oxygen menghasilkan markup lebih bersih (rata-rata 30-40% lebih sedikit node DOM pada halaman homepage), tapi Bricks lebih mudah diintegrasikan dengan tema existing atau ketika klien butuh Customizer options.
Uji Cepat: Performa Output Frontend
Saya bangun dua situs identik: landing page dengan hero section, 3 kolom fitur, dan testimonial slider. Menggunakan hosting yang sama (Cloudways DigitalOcean 2GB), tanpa caching plugin.
Oxygen Builder: 42 request, 285KB total, DOM nodes: 248, TTFB: 189ms
Bricks Builder: 48 request, 312KB total, DOM nodes: 291, TTFB: 203ms
Selisih tipis, tapi Oxygen unggul di ukuran markup mentah. Ini karena Bricks masih menambahkan beberapa wrapper div untuk kompatibilitas dengan hooks tema WordPress. Namun, di dunia nyata dengan caching aktif (WP Rocket + Redis), perbedaan ini menyusut menjadi <5%.
Critical CSS & Asset Loading
Oxygen memiliki kelemahan besar: ia menggabungkan semua CSS—global, halaman spesifik, dan widget—menjadi satu file besar. Pada situs kompleks, saya pernah melihat
oxygen.css
mencapai 85KB uncompressed.
Bricks lebih cerdas. Ia memisahkan CSS per halaman dan hanya memuat komponen yang digunakan. Tombol Bricks hanya memuat CSS tombol jika elemen itu ada di halaman. Ini mengurangi blocking render signifikan pada halaman sederhana.
Verdict Performa: Oxygen lebih cepat di situs kecil-menengah, Bricks lebih scalable untuk proyek besar dengan banyak template variabel.
Developer Experience: Siapa yang Lebih Produktif?
1. Structure Panel & Navigator
Navigator Bricks lebih modern dan responsive. Drag-and-dropnya smooth, search instan, dan Anda bisa rename elemen untuk navigasi mudah (contoh: ubah “Section” jadi “Hero Main”). Oxygen punya structure panel tapi terasa lebih kaku; rename elemen memerlukan klik kanan > properties yang memakan waktu.
2. Class-Based Styling Workflow
Inilah inti perbedaan. Di Bricks, Anda bisa select elemen, klik “CSS Classes”, dan mulai typing. Autocomplete langsung munculkan class yang sudah ada di stylesheet. Ini mengikuti pola BEM atau ITCSS secara natural.
Oxygen punya “Selector Detector” yang powerful tapi quirky. Kadang ia tidak mendeteksi class yang baru dibuat, forcing Anda untuk refresh editor. Namun, Oxygen punya fitur Style Sets yang memungkinkan Anda apply multiple class sekaligus—berguna untuk utility-first approach seperti Tailwind.
3. Custom Code Integration
Ketika butuh PHP snippet di dalam layout, Bricks punya “Code” element dengan syntax highlighting dan error detection. Oxygen punya “Code Block” yang lebih powerful: ia bisa render output PHP langsung dan mendukung conditional logic di dalamnya.
Contoh kasus: saya butuh query custom WP_Query untuk menampilkan post berdasarkan ACF relationship. Di Oxygen, saya tempatkan Code Block, tulis PHP lengkap dengan loop, dan wrap dengan
if( get_field('relationship') )
. Di Bricks, saya harus buat function di
functions.php
terus panggil via shortcode—lebih banyak langkah.
Dynamic Data & Query Builder
Kedua builder punya dynamic data picker untuk menampilkan post meta, user data, DLL. Tapi implementasinya berbeda.
Bricks punya Query Loop Builder visual. Anda klik “Add Query”, pilih post type, tambah tax query atau meta query via UI. Ini cepat untuk kasus standar. Tapi untuk query kompleks dengan multiple meta_query relation ‘AND’/’OR’, UI-nya jadi cluttered.
Oxygen tidak punya query builder visual. Anda tulis query argument dalam textarea JSON atau panggil function. Awalnya terasa lebih lambat, tapi memberikan kontrol 100% tanpa abstraction layer. Saya bisa copy-paste query dari WP_Query docs dan langsung jalan.
- Bricks: Ideal untuk developer yang ingin speed tanpa menulis query manual.
- Oxygen: Ideal untuk developer yang sudah nyaman dengan WP_Query dan ingin kontrol penuh.
Ekosistem & Third-Party Support
Oxygen sudah ada sejak 2016. Ekosistemnya matang: OxyPowerPack, OxyNinja, Hydrogen Pack menambahkan fitur seperti copy-paste style, advanced slider, dan component library. Dokumentasinya lengkap tapi terfragmentasi di forum dan YouTube.
Bricks baru launching public beta di 2021. Komunitasnya tumbuh cepat di Facebook (Bricks Community: 15k+ member vs Oxygen: 23k+ member). Addons seperti BricksExtras dan Bricksable sudah menyediakan element premium. Dokumentasi terpusat di bricksbuilder.io dan lebih terstruktur.
Masalah besar Oxygen: update terakhir (v4.8) dirilis 3 bulan lalu sementara Bricks update bi-weekly. Tim Bricks lebih responsif terhadap bug report di GitHub.
Tabel Perbandingan Spesifik
| Aspek | Oxygen Builder 4.x | Bricks Builder 1.8+ |
|---|---|---|
| Output Markup | Minimal, 30-40% lebih sedikit DOM | Sedikit lebih banyak wrapper div |
| CSS File Size (avg) | 45-85KB combined | 15-35KB per page |
| Editor Load Time | 3.2 detik (first load) | 2.1 detik (first load) |
| Class Management | Style Sets, quirky selector | Autocomplete smooth, rename element |
| Query Builder | Manual JSON/PHP | Visual UI + manual |
| Theme Compatibility | Replace total tema | Hybrid, compatible |
| Update Frequency | Slow (3-4 bulan) | Fast (bi-weekly) |
| License | Lifetime $179 (unlimited) | Yearly $79 / Lifetime $299 |
Kasus Penggunaan Nyata
Pilih Oxygen Jika:
- Klien butuh situs ultra-minimal dengan TTFB <200ms tanpa caching heavy.
- Anda sudah punya library komponen Oxygen dan tidak mau rebuild.
- Proyek memerlukan deep integration dengan PHP custom di dalam layout.
- Budget lifetime menjadi prioritas utama.
Pilih Bricks Jika:
- Anda bekerja dengan agency yang butuh builder modern dengan update cepat.
- Proyek sering menggunakan custom post type dan butuh query builder visual.
- Tim developer non-senior perlu belajar cepat tanpa syntax barrier.
- Kompatibilitas dengan tema existing (seperti Astra/GeneratePress) diperlukan.
Kesimpulan Tanpa Bas-Basi
Oxygen adalah senjata veteran: brutal efisien tapi butuh skill tinggi untuk dikendalikan. Bricks adalah senjata generasi baru: lebih manusiawi, cepat dipelajari, dan terus berevolusi.
Untuk developer solo yang sudah nyaman dengan PHP dan mengutamakan performa mentah, Oxygen masih juaranya. Tapi untuk tim atau developer yang ingin balance antara speed dan modern workflow, Bricks adalah pilihan masa depan.
Saya pribadi pindah ke Bricks untuk semua proyek baru sejak v1.7. Kompromi 5% performa sebanding dengan 50% peningkatan produktivitas dan dukungan komunitas yang lebih hidup. Oxygen saya pertahankan hanya untuk proyek maintenance lama.
Pilihan ada di tangan Anda. Coba keduanya (Bricks punya free trial, Oxygen punya money-back guarantee) dan uji dengan case project nyata sebelum commit.
