Taking on a Performance Challenge

It was my first week as a developer at Business-in-a-Box, and I had no idea where to start. Facing two underperforming websites with Lighthouse scores in the mid-50s, I turned to PageSpeed Insights and began diving into Core Web Vitals metrics. What I discovered was daunting: we had over 10,000 document templates being served to users, and our performance issues were actively hurting our search rankings and user experience.

50s

Initial Lighthouse Scores

10+

Average Google Ranking

10K+

Templates to Optimize

Understanding the Challenge

We were managing two distinct platforms:

business-in-a-box.com

  • Main marketing website (SSR)

  • Primary customer acquisition point

/templates

  • Static site with 10,000+ templates

  • Templates loaded from API

The biggest performance bottleneck came from how we were handling template descriptions. Every page was loading all template descriptions at once, creating a massive JavaScript bundle that slowed down the entire site.

The Solution: Smart Content Loading

The breakthrough came when I created a middleware solution that would dynamically import only the content needed for each page. Instead of loading descriptions for all 10,000+ templates at once, we now loaded just what the user needed to see:

Dynamic Import Strategy

  • Check document type (doc, folder, or business plan kit)

  • Dynamically import only the required content

  • Render markdown content on demand

Revenue Impact

Impact on User Growth

Transformative Results

90+

Lighthouse Score

Up from mid-50s

5th

Average Search Position

Up from 10+

6

Languages Supported

Expanded market reach

Beyond Performance Metrics

The improvements went beyond just technical metrics. Our templates started ranking higher in search results, moving from beyond page 10 to an average position of 5. We successfully implemented multilingual support for six languages (English, French, Portuguese, Italian, German, and Spanish), dramatically expanding our market reach.

Key Learnings

This project taught me crucial lessons about web performance optimization:

Start with Data

Use tools like PageSpeed Insights to understand your baseline and track improvements

Think Incrementally

Break down large optimizations into manageable, measurable improvements

Measure Impact

Track both technical metrics and business outcomes to validate improvements

Technical Implementation

The optimization strategy focused on three key areas: performance improvements, multilingual support, and build process optimization.

Core Performance Solutions

  • Dynamic import middleware eliminated unnecessary bundle loading

  • Webpack bundle analysis revealed optimization opportunities

  • Improved static generation efficiency for template pages

Internationalization

  • Implemented Nuxt i18n module for six languages

  • Localized navigation and CTAs for each market

  • Maintained performance across all language versions

Platform-Specific Optimizations

Main Website (SSR)

For the server-side rendered main website, we could leverage additional optimization tools:

  • Utilized nuxt-booster package for performance gains

  • Implemented server-side caching strategies

Template Portal (Static)

The static site required a different approach due to pre-rendering requirements:

  • Custom middleware for dynamic content loading

  • Optimized API data handling for 10,000+ templates

Validation Process

We implemented a robust testing process to ensure performance improvements were maintained:

Lab Testing

Regular Lighthouse audits to track Core Web Vitals improvements

Real-world Metrics

PageSpeed Insights monitoring for field data validation

SEO Impact

Tracking ranking improvements across all supported languages

Looking Forward

This project not only improved our platform's performance but also established a foundation for future growth. The success of our optimization efforts proved that technical performance directly impacts business success, from improved search rankings to increased user engagement and higher conversion rates.

Key Takeaways

  • Performance optimization requires a systematic, data-driven approach

  • Different architectures (SSR vs Static) require tailored solutions

  • Investment in performance directly impacts business growth