How the BBC World Service migrated 31 million weekly readers to an isomorphic react app and improved page performance by up to 83%

Simorgh (The React SPA built by the BBC World Service)

  • Performance — The websites must be as performant as they can be. Many of our readers are on lower end smart/feature phones on networks with low bandwidth rates and high data costs, slow connections and patchy coverage.
  • Accessibility — The BBC aims to provide a fully accessible web platform, ensuring that anyone can access our websites using any assistive technology.
  • Support for multiple languages — BBC World Service currently supports 41 different languages, each language site has its own editorial team and from the outside this is seen as 41 separate websites.
  • Huge volumes of traffic — The World Service currently serves 31m weekly readers. Simorgh despite being behind many different caching/routing layers is rendering on average 1 million unique pages per day with an average of 11 million daily renders across the 41 languages.
  • First class AMP support — Offering AMP variants of all supported pages. This allows us to move away from the previously separate AMP rendering system that was built on an internal Ruby based framework for static rendering.

So where are we today?

  • Lighthouse performance score saw a 224% increase from 24 > 94
  • Lighthouse best practice score saw a 27% increase from 79 > 100
  • Total number of requests dropped by 85% to 17 down from 112
  • Blocking JS requests dropped by 100% from 9 to 0
  • JS requests dropped by 79%
  • Total page weight is now 60% smaller than before
  • JS size dropped by 61%
  • Dom Content Loaded is 85% faster at just 0.4s down from 2.6s
  • Visually complete time dropped by 62% down to just 1.8s vs the previous 4.7
Screenshot of the performance improvements seen by SpeedCurve test runs.
These performance metrics were captured using SpeedCurve comparing the same url on the old platform and the new.
Tested via SpeedCurve on a simulated 4g network in India.

Post migration improvements

How are we monitoring web performance?

Core Web-Vitals

Screenshot of our custom RUM solution reporting on Web Vitals
Screenshot of our custom RUM solution reporting on Web Vitals

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store