Case Study

Refactoring Brownbook

Background

Brownbook.net is a global online business directory boasting over 44 million business listings across 200+ countries. Launched in the late 2000s, its original platform was a legacy PHP website. Over time, this aging PHP site began struggling under the weight of Brownbook’s massive dataset and traffic.

Users experienced slow page loads averaging ~5 seconds per page, leading to a Google PageSpeed Insights score around 65 (which falls in the “Needs Improvement” range). In an era where users expect snappy, app-like web experiences, such performance issues were untenable.

Brownbook’s team recognized that the sluggish experience was likely causing user frustration, higher bounce rates, and hurting their search engine rankings. In late 2019, Brownbook’s leadership decided it was time for a radical upgrade of their technology stack to meet modern performance standards.

Challenges

Migrating Brownbook.net was not a trivial undertaking. The team faced several key challenges:

Legacy Performance and UX

The legacy PHP site rendered pages slowly – ~5s load times for content to appear. This led to a subpar PageSpeed score (~65), well below the recommended “good” threshold of 90+. Such slow loads negatively impact user experience and engagement.

Huge Dataset (44+ million records)

Serving a directory of this size meant any search or listing page could potentially query tens of millions of records. Database queries were heavy and unoptimized, causing high server response times and scalability issues.

Outdated Architecture

The monolithic PHP codebase had accumulated technical debt, making it hard to improve or optimize. It required modern performance techniques like client-side code splitting, efficient bundling, and CDN edge caching.

SEO and Core Web Vitals

Because of slow speeds and no server-side rendering, search engine crawlers got only basic content, and users experienced poor Core Web Vitals. This likely hurt Brownbook’s SEO performance significantly.

Solution

Complete Replatform to Next.js

Brownbook.net was completely rebuilt as a full-stack application using Next.js with the latest App Router architecture. The migration involved moving to a Node.js/React codebase deployed on Vercel’s serverless platform.

• Next.js App Router
• Server-Side Rendering
• Parallel Routes
• Database Optimization
• Image Optimization
• CDN Integration

Key Technical Strategies

Server-Side Rendering & Static Generation: The new Brownbook leverages Next.js’s ability to pre-render pages on the server. Critical content is fetched and rendered to HTML on the server for the initial page load, drastically reducing time-to-content.

Parallel Routes & React 18 Concurrency: Next.js’s App Router introduced support for parallel routes, allowing multiple sections of the UI to load simultaneously. Search results and sidebar content can fetch data in parallel, with independent loading states.

Backend Optimization at Scale: Handling 44.6 million records required significant backend re-engineering. We introduced database optimizations, caching layers, and implemented Elasticsearch for efficient search across the massive dataset.

Asset Optimization: All images are served via Next.js’s next/image component, automatically generating appropriately sized, compressed images in modern formats (WebP/AVIF) with lazy loading.

Results

The impact of the Next.js migration was dramatic. Brownbook.net now scores 100/100 on Google Lighthouse for performance, indicating all Core Web Vitals are well within “good” ranges.

Performance Metrics Comparison

The Largest Contentful Paint time went from around 4-5 seconds (poor) to just around 1 second, easily within Google’s “good” threshold (≤2.5s). Users can now see main content almost immediately.

Business Impact

These performance gains have translated into tangible business benefits:

• Improved User Engagement: Faster sites typically see reduced bounce rates and increased user activity
• Enhanced SEO Performance: Google’s ranking algorithms favor sites with strong page experience signals
• Future-Proof Architecture: The modern React codebase enables rapid feature development and scaling

This migration to Next.js has been a game-changer for Brownbook. Our pages that used to take five seconds to load now appear almost instantly. Hitting a 100 PageSpeed score was something I wouldn’t have believed possible before. The user feedback has been tremendous – they love the new speed. Not only is the site faster, it’s also more stable and scalable. This upgrade modernized our whole platform and sets us up for future growth.

Conclusion

The Brownbook.net case study exemplifies how a well-executed migration from a legacy stack to a modern framework can yield transformative improvements. By embracing Next.js’s full-stack capabilities, Brownbook overcame its performance woes despite the huge scale of its data.

The combination of server-side rendering, parallel routes, and rigorous backend tuning proved to be a winning formula – delivering sub-second loads and a perfect 100/100 performance score on Lighthouse.

Key Takeaways

• Prioritize Core Web Vitals for modern web performance
• Leverage hybrid rendering capabilities of modern frameworks
• Don’t neglect backend optimization for large datasets
• Modern architecture enables both current performance and future scalability

With a solid foundation in Next.js, Brownbook can continue to innovate in the local business directory space, confident that its platform is fast, user-friendly, and scalable for years to come.