Migrating a High-Traffic News Site from WordPress to Next.js: Performance and SEO
Win

The Challenge

A regional media outlet with 50,000 daily visitors was running a heavily customized WordPress installation that had been in production for over eight years. The site had accumulated a staggering amount of technical debt: 47 active plugins, over 200 custom PHP functions in the theme, a database of 18 GB, and a build process that relied on a cache-clearing plugin firing every 30 minutes just to keep the site from falling over.

The problems were mounting. Page load times averaged 8.4 seconds on mobile — catastrophic in a news environment where every second of delay loses readership. Core Web Vitals scores were abysmal: LCP at 6.2 seconds, CLS at 0.38, and FID at 320 milliseconds. Google's PageSpeed Insights gave them a mobile score of 12 out of 100. Traffic from Google Discover, once a major source of referrals, had dropped by 60% after a core algorithm update penalized poor-performing mobile experiences.

Their ad revenue model, heavily dependent on programmatic display advertising, was under direct threat. Ad viewability rates sat at just 38%, and their ad server frequently timed out during page loads, resulting in blank ad slots. The editorial team was frustrated too — the WordPress admin panel took 12 seconds to load the post editor, and publishing a breaking news story often required a 90-second cache purge delay before readers could see it.

Our Approach

We recommended a headless architecture: keep WordPress as the content management backend (where the editorial team was already productive) but replace the frontend with Next.js for server-side rendering and static generation. This approach would preserve the editors' existing workflow while eliminating the PHP rendering overhead that was crippling performance.

The migration strategy followed a phased approach. Phase 1 involved a comprehensive content and SEO audit to catalog every URL, redirect, metadata entry, and structured data element. We discovered 8,700 articles, 340 authors, 2,100 categories and tags, and 1,400 custom redirects — all of which needed to be preserved exactly.

Phase 2 was building the Next.js frontend parallel to the live WordPress site. We used Incremental Static Regeneration (ISR) for evergreen content and on-demand revalidation for breaking news. For images, we integrated a cloud-based image transformation service that automatically served WebP and AVIF formats at appropriate sizes based on the user's viewport.

The Solution

The technical architecture consisted of three layers: a WordPress backend with custom REST API extensions, a Next.js frontend deployed on Vercel's edge network, and a Redis cache layer for API responses and rendered pages.

We built a custom WordPress plugin that exposed a GraphQL endpoint optimized for the Next.js frontend, reducing payload sizes by 70% compared to the default REST API. The API responses were cached in Redis with a 60-second TTL for breaking news and 300-second TTL for evergreen content, ensuring that the editorial team's updates appeared on the frontend within seconds.

For ad performance, we implemented lazy-loading for below-the-fold ad slots using Intersection Observer, migrated to a header-bidding setup that ran asynchronously in a Web Worker, and added a 200ms delay to ad calls to ensure page content loaded first. This single change improved ad viewability from 38% to 72%.

The migration cutover happened over a weekend. We used a blue-green deployment strategy: the old WordPress site served traffic while we validated the Next.js frontend against production database traffic. When we flipped the DNS record on Sunday at 2:00 AM, the transition was seamless — zero downtime, zero broken links, and zero SEO loss.

Results

The performance improvements were immediate and dramatic:

• Page load time reduced by 73%, from 8.4 seconds to 2.3 seconds on mobile
• Core Web Vitals fully green: LCP 1.8s, CLS 0.05, FID 24ms
• Mobile PageSpeed score jumped from 12 to 94
• Ad viewability improved from 38% to 72%
• Ad revenue increased by 35% within 60 days of migration
• Bounce rate dropped from 67% to 42%
• Google Discover traffic recovered and surpassed previous levels by 140%
• Editorial publishing time reduced from 90 seconds to under 5 seconds

The editorial team reported a significant improvement in their workflow. The headless setup meant they could continue using the WordPress editor they knew, while the Next.js frontend automatically handled performance optimization without any manual intervention on their part.

"We knew we needed to move away from our legacy WordPress setup, but we were terrified of breaking something. SoniNow's phased approach gave us confidence at every step, and the results have been transformative — our readers get news faster, our ad revenue is up, and our editors can finally focus on journalism instead of fighting with the CMS." — CTO, Regional Media Outlet

---

Ready to transform your publishing platform? Whether you're running a news site, blog, or content-heavy enterprise, SoniNow's headless migration expertise can unlock dramatic performance gains and new revenue opportunities. Contact us to discuss your migration project.