Over the last two years, we’ve worked with BMJ to decouple the front end and back end of their publishing infrastructure. The journey has been extremely rewarding so far, enabling us to test different technical solutions and come up with creative ideas to improve website performance.
Our mission extended far beyond a redesign of the homepage; phase one was just the beginning. Together, we streamlined the flagship journal, bmj.com, and improved the overall content performance from 65 to 100 for a much better user experience.
Phase 1: Laying the Groundwork
Our first step was a bold one: moving away from Drupal 7 to embrace a decoupled architecture. This decision helped to make BMJ's content even more accessible and efficiently delivered to its global audience of researchers, authors, and doctors. We chose a tech stack including Node.js, Next.js, AWS Lambda functions, and Vercel to build a robust platform capable of managing BMJ's extensive content and traffic demands.
The introduction of Static Site Generation (SSG) marked a significant turning point. This approach improved site performance, especially on critical pages like bmj.com/coronavirus, making content more accessible and the user experience smoother.
Moreover, this project phase significantly streamlined the development workflow, allowing the BMJ team to swiftly update content.
Phase 2: Enhancing Non-Article Pages
With the groundwork laid, we turned our attention to enhancing the non-article pages across BMJ's suite of journals. This phase broadened our focus to include 64 additional journals, improving crucial information pages for authors, journal details, article collections, and each journal's homepage.
Adopting the successful strategies from our work on The BMJ, we utilised Next.js for the decoupled front end and WordPress as the headless CMS and editorial interface. This ensured a consistent and efficient approach across all non-article content pages.
However, challenges were inevitable. Migrating content from one WordPress instance to another presented a significant hurdle. We developed a highly programmable structure for the pages, allowing for customised content alignment and placement. This structure broke free from the limitations of traditional WordPress setups, enabling editors to easily organise content without needing deep technical knowledge.
Another challenge was optimising the collection pages, which strained Highwire's APIs. Our solution to this was to cache static information within our WordPress setup, reducing dependency on Highwire's infrastructure.
As we successfully migrated the non-content pages for over 65 journals, maintaining the integrity of the original journal articles, we used Cloudflare workers for dynamic content delivery. This strategy allowed for seamless content integration from both our system and Highwire's, facilitating an incremental and systematic migration.
Phase 3: Journal Migration and Optimisation
The next critical phase involved migrating article pages to the new system. Starting with a single journal, which initially had 35 articles and expanded to 65 by the time we were done, we embarked on phase 3.
A key achievement was launching the MVP for the BMJ Public Health journal. This milestone wasn't just about moving content; it involved a deep dive into optimising article pages themselves. Opting for an MVP approach allowed us to implement features validated through user testing and feedback, focusing on real user needs.
Performance optimisation was the main goal. We aimed to surpass the 6-7 seconds load times on Highwire. One of the main challenges here was transforming HTML data into a format compatible with the new design. We decided to use html-react-parser for efficient HTML transformation. We were able to turn incoming HTML content into React components and even replace components to map the content to the new design structure. As a technical solution, this turned out to be a great idea - we were now able to process and extract data in a single iteration, without needing to parse the data multiple times. The whole process now takes 0.5 seconds, meaning a much faster loading time.
This phase also integrated the content into BMJ's new Content Pipeline, an internal system developed for processing and storing journal articles.
Looking ahead, we're exploring content streaming methods to enhance user engagement further, using the Next.js App Router for its efficiency and minimal browser-side code requirements.
App Router: Why We Love It
App Router from Next.js has been a key part of our success, ensuring out of the box optimisation and reliable caching mechanism. Its convention-over-configuration approach has made the development process more straightforward, allowing us to focus on building features rather than configuring routes.
App Router uses React Server Components by default, this helps us keep the size of the code reaching the browser relatively low, improving the Time to Interactive (TTI) metric. Most of these pages are static, so the data caching systems used help us get a much faster response time.
We are planning to migrate the pages we've built with the Pages Router to App Router soon and to employ features like Image Optimization to help us deliver the best experience for the BMJ Journals’ users.
The Impact So Far
Our collaboration has already set new standards in speed and accessibility. Achieving page load times of under a second and perfect Lighthouse scores of 100% for desktop without additional scripts has been a game-changer. This performance improvement directly impacts how BMJ's content is consumed and discovered, promising a boost in traffic and visibility across search engines.
The SEO enhancements on the new pages have made BMJ's research more accessible and likely to be read by a wider audience. Our efforts are paving the way for BMJ to expand its reach and impact on global healthcare.
As we continue our journey, we remain focused on enhancing BMJ's digital presence. The migration and optimisation phase is just the beginning, with much more to come as we aim to make BMJ's content more dynamic, accessible, and impactful than ever before. Stay tuned for our next update, where we'll dive into achieving that 100 Lighthouse score.