KrishaLabs
KrishaStudio
KrishaStoreResult At Glance
Battle Royal Studios needed a website that performed as well as the brand experiences they produce for global clients and that their own team could manage without raising a developer ticket every time a page needed updating. Six weeks later both were true.
Metrics: Before and After
Performance metrics measured using Google PageSpeed Insights, GTmetrix and Chrome Lighthouse on the live production environment. Operational metrics based on pre and post-launch content management workflows. Old site baseline from pre-project audit conducted in Week 1.
| Metric | Before | After | Change | Measurement Basis |
|---|---|---|---|---|
| Google PageSpeed Desktop | ~52 / 100 | 93 / 100 | +79% | PageSpeed Insights |
| Google PageSpeed Mobile | ~41 / 100 | 91 / 100 | +122% | PageSpeed Insights |
| Page Load Time (avg) | ~4.6s | ~1.7s | -63% | GTmetrix / Lighthouse |
| Largest Contentful Paint (LCP) | ~5.1s | ~1.4s | -73% | Core Web Vitals |
| Total Blocking Time (TBT) | ~680ms | ~90ms | -87% | Core Web Vitals |
| Developer Dependency (pages) | 100% dev required | 0% for content edits | Full team autonomy | Post-launch ops |
| Time to Create New Page | Days (dev ticket) | Under 30 mins | -95% faster | Post-launch ops |
| Design Consistency | Inconsistent | 100% component-matched | Fully standardised | QA validation |
| Cross-Device Rendering | Issues on mobile | Perfect on all devices | Zero issues | Post-launch QA |
- Battle Royal Studios
- KrishaWeb
- Design and Development
- WordPress development
- Native WordPress Gutenberg
How KrishaWeb Built a WordPress Site With Zero Developer Dependency
Battle Royal Studios is an award-winning experiential marketing and brand experience agency headquartered in Berlin, with offices in London, Dubai and Riyadh. Founded in 2011, the agency has delivered over 625 live marketing productions across 30 or more countries, specialising in brand activations, product launches, large-scale cultural ceremonies and immersive live experiences for global brands.
At that scale the BRS website is an active new business tool reviewed by global brand marketing teams evaluating whether to trust an agency with their most visible consumer moments. The quality of the site is a direct proxy for the agency’s production quality. A slow, hard-to-manage website was out of step with every other part of the brand — and the internal team needed to manage it themselves without raising developer tickets.
The Challenge
The brief was specific and technically well-considered. No page builders, no bloated WordPress installation, native Gutenberg blocks, a component-based architecture, genuine performance and a content management experience the team could operate without technical support. Executing that brief with precision required making smart architectural decisions from the very start.
A Website That Could Not Keep Pace with the Brand
Page load times were averaging 4.6 seconds and PageSpeed scores sat in the low fifties on desktop and low forties on mobile. For an agency pitching global brand experiences to marketing directors, those numbers created a first impression that the work itself would immediately contradict.
Developer Dependency That Did Not Scale with the Business
Creating or updating pages required developer involvement. In an agency environment where new case studies and project showcases need to go live quickly — sometimes the same day a project wraps — that dependency was a daily operational friction that slowed the whole team down.
No Reusable Component Architecture
The existing site had no systematic approach to component reuse. Every new page required custom layout work from scratch, inconsistency had crept into the design across different sections and every page creation was starting fresh rather than building from a solid consistent foundation.
No Clear Content Strategy for a Multi-Market Agency
BRS works across four cities and over 30 countries, but the existing site treated every visitor the same. No structure for work by region, no case study architecture by project type and no content hierarchy that helped a prospect find work relevant to their market before they lost patience and left.
Objectives
The brief was clear and the targets were specific. Before development began we committed to delivering the following outcomes within six weeks.
- Achieve 90 or above on Google PageSpeed for both desktop and mobile — a specific client-stated requirement
- Eliminate page builder dependency entirely, building exclusively with native WordPress Gutenberg and a custom lightweight theme
- Develop a library of custom reusable Gutenberg blocks covering all required page section types
- Deliver a component-based architecture that allows the internal team to build new pages without developer assistance
- Ensure pixel-perfect responsive design across desktop, tablet and mobile on all major browsers
- Complete and deploy within the six-week project timeline with full documentation and team handover
Our Strategy
The approach was shaped entirely by the client's brief. Battle Royal Studios had clearly thought through what they wanted and why. Our job was to execute it with precision and craft — and to make the smart architectural decisions that would turn a technically correct brief into a site that scored 93 on desktop PageSpeed.
Architecture Before Code
We invested the entire first two weeks in analysis and planning before writing a line of development code. By the time development began in Week 3 every block had a defined specification and the component library architecture was already designed. The development team was executing a clear plan rather than discovering the structure as they built.
Native Gutenberg as a Performance Foundation
Page builders add hundreds of kilobytes of CSS and JavaScript to every page load regardless of which features are used. Native Gutenberg with custom blocks loads only what each page actually needs. Combined with Tailwind CSS and a custom lightweight theme with no framework overhead, the result is a codebase that is lean by design.
Component Library as Operational Infrastructure
We designed the Gutenberg block library with the BRS team’s day-to-day editorial workflow in mind. Every block was built to be genuinely flexible — adjustable content, configurable layout options, consistent visual output regardless of how the editorial team assembled them. A non-technical team member can open the editor and publish a page that looks exactly like one a developer built.
Performance Optimisation
On most WordPress builds performance optimisation happens at the end. On the BRS build it was a constraint built into every development decision. Image handling, script loading strategy, CSS bundle size, font loading and LCP optimisation were all considered at the component level — which is why the site hit 93 on desktop and 91 on mobile on the first measurement.
From a Slow, Hard-to-Manage Site to 93 PageSpeed and Full Editorial Independence in Six Weeks
BRS needed a website that performed at the standard of the brand experiences they produce for global clients and that their own marketing team could manage without raising a developer ticket every time a page needed updating. Six weeks later, both were true.
- Page load time dropped from 4.6 seconds to 1.7 seconds, a 63% reduction, driven by the removal of page builder overhead, Tailwind CSS’s significantly smaller CSS output and the Core Web Vitals optimisation work that reduced Largest Contentful Paint from 5.1 seconds to 1.4 seconds. The average WordPress site scores 49 on mobile PageSpeed. BRS launched at 91, nearly double the industry average.
- Total Blocking Time dropped from 680 milliseconds to 90 milliseconds, an 87% reduction. A site with 680ms TBT feels sluggish even after it has visually loaded. At 90ms, the BRS site responds to user interaction instantly, which is part of the brand impression the website makes on every prospective client who loads it.
- From launch day, the BRS internal team has been able to create new pages, update content, add case studies and publish project announcements entirely through the Gutenberg editor without raising a single developer support ticket. Creating a new page now takes an internal team member under 30 minutes using the reusable block library, compared to days waiting for a developer ticket to be processed.
- Because every page is assembled from the same library of custom Gutenberg blocks, every page on the site maintains perfect design consistency regardless of who builds it or when. A page the marketing team puts together six months after launch looks identical in quality to one built by KrishaWeb during the original development phase.
Week 1: Design Analysis and Component Planning
- Reviewed all provided design files in detail, mapping every unique section, layout pattern and visual component across the full site.
- Identified and categorised reusable block opportunities — sections appearing across multiple pages were unified into single flexible components.
- Documented the complete component library specification covering block names, content fields, layout options and design constraints for each.
- Flagged design ambiguities and technical constraints for resolution before development began.
Week 2: Technical Architecture and Development Planning
- Defined the custom Gutenberg block architecture covering registration approach, block category structure and attribute schema for each component.
- Configured the Tailwind CSS setup including design token integration, responsive breakpoints and purge configuration for minimal CSS output.
- Built the custom WordPress theme scaffold — lightweight, no framework dependencies, optimised for Core Web Vitals from the base template.
- Defined the development sequence and block build order to ensure the most reused components were available early in Week 3.
Week 3: Front-End Development
- Developed all primary custom Gutenberg blocks including hero sections, project showcases, team grids, service breakdowns, testimonial components and media galleries.
- Integrated Tailwind CSS utility classes throughout all block implementations for consistent, minimal-footprint styling.
- Built responsive behaviour into every block at the component level with no separate responsive stylesheet required.
- Conducted initial performance checks on completed blocks to validate load strategy and identify any early optimisation requirements.
Week 4: Development Completion and Content Integration
- Built all remaining pages using the completed Gutenberg block library — assembling from reusable components exactly as the internal team would post-launch.
- Integrated all client-provided content, copy and imagery into the production pages.
- Validated design consistency across all pages against the original design files.
- Verified Gutenberg editor behaviour for each block — ensuring the editing experience matched the published output on every component.
Week 5: Testing and Performance Optimisation
- Cross-browser testing across Chrome, Firefox, Safari and Edge on desktop and mobile.
- Cross-device QA across desktop, tablet and multiple mobile screen sizes to validate responsive behaviour.
- Google PageSpeed Insights and Lighthouse performance testing — achieved 93 desktop and 91 mobile in this phase.
- Core Web Vitals optimisation: LCP reduced to 1.4s, TBT reduced to 90ms, CLS brought to near zero. Final performance fine-tuning including image format optimisation, script defer strategy and font display configuration.
Week 6: Deployment and Team Handover
- Deployed the production environment to the live server with full pre-launch validation.
- Conducted final post-deployment checks across all pages and block types on the live environment.
- Produced comprehensive Gutenberg editor documentation covering how to use each block, how to build new pages and how to manage content without developer support.
- Delivered team handover session to ensure the BRS internal team was confident managing and expanding the site independently from day one.
The Tech Behind BRS' High-Performance WordPress Build
The Battle Royal Studios site is built on WordPress with native Gutenberg as the editorial interface and a custom lightweight theme built from scratch with no page builder framework involved. The decision to avoid page builders was as much a performance decision as an editorial one. Page builders like Elementor and WPBakery add hundreds of kilobytes of CSS and JavaScript to every page load regardless of which features are actually used on that page. Native Gutenberg with custom blocks loads only what each specific page needs, and combined with Tailwind CSS’s utility-first approach, which produces significantly smaller CSS bundles than traditional stylesheet methodologies, the result is a codebase that is lean by design rather than optimised after the fact.
Every custom Gutenberg block in the library was built with the BRS marketing team’s day-to-day workflow in mind. Blocks handle their own design constraints within the editor, enforcing consistency automatically so a team member assembling a new page cannot accidentally break the layout or drift from the brand. The two-week architecture and planning phase before any development began was where the component library specification was defined, the Tailwind configuration was set and the custom theme scaffold was built. By the time development started in Week 3, every block had a defined specification and the team was executing a clear plan rather than discovering the structure as they built. That is the reason the site hit 93 on desktop PageSpeed and 91 on mobile on the first measurement, not after multiple rounds of post-launch fixes.
- CMS Platform: WordPress — native, no page builder dependency
- Block Editor: Gutenberg Block Editor — custom block development
- Custom Blocks: Bespoke reusable Gutenberg components for all page sections
- Frontend: HTML5, Tailwind CSS, JavaScript
- Theme Architecture: Custom lightweight WordPress theme — no bloated builder framework
- Responsive Design: Fully responsive across desktop, tablet and mobile
- Performance: Core Web Vitals optimised — 90+ PageSpeed target on desktop and mobile
- QA: Cross-browser testing (Chrome, Firefox, Safari, Edge) and cross-device QA
Valuable Feedback From Our Client
“We came to KrishaWeb with a clear brief and a non-negotiable requirement: 90 or above on PageSpeed for both desktop and mobile, no page builders, and a site our own team could manage from day one without developer support. They understood exactly what we were asking for and why, planned the architecture properly before writing a line of code, and delivered everything we asked for on time and above target. The editorial independence has been particularly valuable. Our team builds and updates pages without any development involvement, and the design consistency holds perfectly because of how the block system was built. It is exactly what we needed.”
– Battle Royal Studios
Project Timeline
Design Analysis and Component Planning
Design file review, layout structure analysis, component and block identification, reusable section mapping
Technical Planning and Architecture
Gutenberg component architecture, custom block taxonomy planning, development roadmap, frontend and backend approach finalised
Front-End Development
Custom Gutenberg block development, core page layout build, responsive component implementation, design-to-code integration
Development Completion and Content Integration
Remaining pages built from components, content and imagery integrated, Gutenberg editor alignment verified, design consistency validated
Testing and Optimisation
Cross-browser and cross-device QA, PageSpeed and Core Web Vitals optimisation, performance fine-tuning, final adjustments
Deployment and Handover
Live server deployment, final checks, editor documentation and handover guide, internal team training on Gutenberg management
Key Takeaways
Avoiding page builders is the right call for performance-critical websites — but only if the alternative is built with equivalent craft.
Native Gutenberg with custom blocks and Tailwind CSS is a superior foundation but it requires more upfront engineering. The 93 PageSpeed score is the payoff for that investment. The average WordPress site scores 49 on mobile PageSpeed. BRS launched at 91.
Performance optimisation is architecture, not polish.
The Core Web Vitals results on this project — 1.4s LCP, 90ms TBT — came from decisions about how to structure the codebase, not from a final optimisation pass. By the time you are in Week 5 trying to bring LCP from 5 seconds to under 2.5, the structural decisions that produced 5 seconds have already been made.
A component library is an operational investment, not just a design asset.
The Gutenberg block library gave BRS editorial independence from launch day. Every hour their team saves not waiting on a developer is an hour spent on work that actually requires their expertise. The 95% reduction in page creation time pays back the investment in the component architecture many times over in the first year alone.
Six weeks is achievable when Weeks 1 and 2 are taken seriously.
The BRS build was delivered on time not because the team worked faster in Weeks 3 through 6 but because the architectural planning in Weeks 1 and 2 eliminated the ambiguity and rework that cause most development projects to slip. Starting to code without a clear component architecture is the most common reason WordPress projects run late.
For agencies and professional services firms, website performance is a credibility signal.
BRS' prospective clients are sophisticated marketing directors at global brands. When they load a site in 1.7 seconds on mobile with instant interaction response, that experience says something about the agency before a single word is read. The website is always the first project a prospect evaluates.
Need a WordPress Website That Actually Performs?
Book a Free Strategy Call — Tell us what your website needs. We will show you exactly how we would build it.