The Context
A regional brand approached us to improve their website performance and scalability.
The existing stack was WordPress with Elementor. The site had already been optimized, but performance and scalability were still limited.
Instead of continuing with incremental improvements, we proposed and built a performance-first rebuild using Gutenberg and custom React components. The goal was to remove structural bottlenecks and create a more scalable foundation.
The Reality
The client ultimately chose a different direction.
However, the rebuild itself provided valuable insight into what is actually possible when performance constraints are removed at the architectural level.
This project became less about the final decision and more about validating a better approach to building high-performance websites.
The Problem We Set Out to Solve
Even after optimization, the original site showed clear limitations:
Performance Constraints
- Total Blocking Time of 400ms
- High JavaScript execution time
- Large payload size around 4.7MB
Structural Issues
- Accessibility issues
- Complex DOM structure from the page builder
The site was not broken. It was constrained by how it was built.
The Approach
We rebuilt the site from the ground up with a focus on performance and scalability.
Key Changes
- Removing the page builder layer
- Replacing it with native Gutenberg blocks
- Introducing modular React components
- Structuring content and layout for performance instead of convenience
This approach allowed for tighter control over rendering, reduced unnecessary code, and improved long-term maintainability.
The Results
Even without a full production rollout, the rebuilt version showed significant improvements:
Performance Scores
- Performance: 91
- Accessibility: 100
- Best Practices: 100
- SEO: 100
Core Web Vitals Improvements
- Total Blocking Time: 400ms → 80ms
- Cumulative Layout Shift: 0
- First Contentful Paint: 0.7 seconds
- Speed Index: 1.1 seconds
Additional Insight
These results were achieved without fully optimizing images or aggressively reducing media payloads.
Further opportunities identified:
- Over 2MB in potential image optimization savings
- Additional caching improvements
- Reduction of unused JavaScript
This highlights a key point: the gains came from better architecture, not surface-level optimization. With proper image and asset optimization, performance could improve even further.
What This Means
This was not just a faster version of the same site. It demonstrated several important principles:
Architecture Over Optimization
Architecture drives performance. Optimization alone cannot overcome structural limitations.
Tradeoffs of Page Builders
Page builders introduce tradeoffs. Even well-optimized builds carry overhead in the form of additional JavaScript and DOM complexity.
Modern WordPress Approach
Modern WordPress does not require a page builder. Gutenberg combined with custom components provides better performance and flexibility.
The Real Outcome
Although the client chose not to move forward, the project delivered clear value:
Key Outcomes
- A validated high-performance architecture
- A repeatable approach to rebuilding websites
- Measurable benchmarks for performance improvement
It also reinforced the importance of building systems that scale, rather than relying on incremental fixes.
Why This Matters for B2B Companies
If a website loads slowly, struggles to convert, or is difficult to maintain, the issue is often not design.
The Real Issue
It is usually the underlying structure.
The Impact
A better system leads to:
- Better performance
- More flexibility
- Improved long-term results
Final Insight
The most important takeaway from this project was not the outcome, but the clarity it created.
Improving a website is not about adding more tools or plugins.
It is about building on the right foundation.