Tech Stack Overhaul

Our internal website development team relied heavily on WPBakery and BeTheme, which, over time, became inefficient due to:

Bloated code & slow performance – WPBakery-generated pages produced excessive div wrappers and rendered pages using shortcodes.

Difficult maintainability – Updates and modifications required repetitive manual work.

Limited scalability – Creating reusable components was challenging, leading to inconsistent designs and slower development.

To improve efficiency, we needed a developer and marketer friendly, modular system that streamlined workflows, enhanced performance, and improved maintainability.

To ensure a future-proof solution, I focused on:

• Evaluating modern WordPress builders with clean HTML output and developer-first workflows
• Exploring frameworks that improve CSS maintainability and ensure design consistency
• Finding ways to better structure custom content types and relationships

After testing multiple approaches, I presented:

• Bricks Builder for its lightweight, performance-focused, and developer-first approach
• Automatic.css (ACSS) for scalable, utility-driven styling and global design control
• Advanced Custom Fields (ACF) to structure content modularly and dynamically

I implemented a new development workflow that:

• Rebuilt pages in Bricks for cleaner, semantic HTML output and faster loading times.

• Standardised design using Automatic.css, reducing unnecessary custom styles and ensuring consistency across pages.

• Optimised content management by replacing theme-dependent shortcodes with ACF-driven dynamic content, improving flexibility.

• Modularised components with Bricks' templates and reusable elements, making maintenance easier and reducing development time.

• Improved site performance, reducing load times and improving Core Web Vitals scores.

The new tech stack delivered significant improvements across multiple areas:

• Performance Boost: Pages now load 30-50% faster due to cleaner HTML and reduced bloat.

• Better Maintainability: Updates are easier with ACSS global styles and Bricks' reusable elements. It also allowed Marketers to make easy content updates.

• Improved Developer Experience: Bricks' intuitive yet low-code interface allows for Junior developers to enter rapid development without sacrificing flexibility.

• Scalability & Future-Proofing: The modular approach with ACF and Bricks enables easier expansion and customisation.