Web performance is something I care deeply about both as a developer whose work affects millions of people around the world, and as a user who often accesses the web on slow & unreliable connections. I have regularly and loudly complained that the BBC News website is unnecessarily slow, so when I was given the opportunity to help rebuild one of the most visited pages of BBC News—the front page—I jumped at the chance.

That was April 2016. Now, a whole year later, we’re ready to begin a phased rollout of the new front page. Starting with a small percentage of users in the UK, we will gradually move everybody to the new front page over the course of several weeks. (Update: as of June 2017, the new front page is rolled out to all users).

Quick facts about the new front page

What’s next?

The version of the front page we’re rolling out is an MVP, a phase one. We will be changing it considerably over the next several months. Here’s an idea of what you can expect to see:

Performance improvements

While we have managed to improve the performance of the front page considerably, there is still a lot of work to do:

Design enhancements

In order to ship the new front page sooner, we made a lot of compromises with both the UX and editorial teams around the design of the page. Once we’re finished with the rollout, we will be improving the visual treatment of story cards (promos) to highlight correspondent stories and feature pieces. The current designs look something like this:

The plain promo design for the MVP launch
The plain promo design for the MVP launch

And below is one of the proposals for how we might display other types of promo:

An example of potential visual treatments for special types of promo
An example of potential visual treatments for special types of promo

React in the browser

We decided early on in the project that using React in the browser was overkill for a page that is predominantly static text and images. The performance impact of bundling so much JavaScript and executing it in the browser is also unacceptably high: Even making use of server-side rendering, emulated mobile devices spend nearly 4 times as long executing scripts and performing layouts & paints when React was run on the page.

A timeline of the server side rendered page without React in the browser
A timeline of the server side rendered page without React in the browser
A timeline showing the impact of running React in the browser
A timeline showing the impact of running React in the browser

Our current approach to running JavaScript in the browser is to build a good ol’ fashioned bundle, completely separate from the React components. However, we realise that this isn’t going to scale for very long, and that eventually we will have to find a way to run our React components in the browser without impacting the user experience. Solutions that we’re looking into include:

Acknowledgements

Firstly, to everybody involved: thank you. Rarely have I had the chance to work with so many talented, patient, dedicated, and caring people. From documentation tweaks to requirements gathering, from bug fixes to building entire components; regardless of the size of your contribution, we wouldn’t have reached this point without you. So again: thank you, and congratulations on reaching this milestone.

To the design team and editorial staff: thank you for helping us find a balance between perfection and a fast launch.

To the project managers, business analysts, and product owners: I don’t think you get enough credit. Thank you for working extraordinarily hard to smooth out all of the bumps in this project, and for providing the development team with a clear path.

And finally, to my team: You are amazing. I’m so proud of what we’ve built together. On a more personal level, you’ve made coming into work feel like coming home to a second family, and I’m eternally grateful for that. The donuts are on me 💜.


Footnotes

  1. Mobile device testing was performed using the “Mobile - Emerging Markets” setting on WebPagetest (Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency).
  2. BBC News does not load React in the browser, but some other page components (like the BBC-wide search bar in the top-right) do load React.

Have any questions or comments? Feel free to reach out on Twitter: @Joseph_Wynn

This post was published on 4 April, 2017 and last updated on 15 July, 2017. It was posted in [BBC News] and tagged with [bbc news, performance]