Development of an accelerated BBC News homepage
Web performance is what worries me, as a developer whose work affects millions of people around the world, as well as a user who often accesses the web using a slow and unreliable connection. I often and loudly complained that the BBC News site was unjustifiably slow , so when I had the opportunity to help rebuild one of the most visited pages on BBC News, I jumped at the chance.
It was April 2016. Now, a year later, we are ready to begin a phased transition to a new main page. Starting with a small percentage of users from the UK, we will gradually transfer everyone to a new main page in a few weeks. If you are impatient to see it before the transition is completed, it is available at www.bbc.co.uk/news/0
The current version of the main page is task number one, part one. We will substantially change it in the next few months. Here are some ideas that you can expect to see:
Despite the fact that we have already significantly improved its performance, there is still a lot of work to be done:
')
To launch the main page faster, we made many compromises with the UX and editorial teams about the page design. After we are done with the introduction, we will improve the visual part of the story block (promo) to highlight the stories of correspondents and selected particles. The current design looks like this:
Below is one of the suggestions how we can show other types of promo:
At an early stage, we decided that React in the browser would be superfluous for a page on which mostly static texts and images. The effect on the productivity of combining such a quantity of Javascipt and performing it in the browser is also prohibitively high. Even using server-side rendering, emulated mobile devices spent on running scripts and drawing almost 4 times more time when React was launched on the page.
No React on page
Effect of React in the browser
In our current approach, we build Javascript in the old-fashioned way, separately from the React components. However, we noticed that it could not scale for a long time, so in the end we will have to find a way to use React components in the browser without affecting performance. Solutions we are looking at include:
Translation source
It was April 2016. Now, a year later, we are ready to begin a phased transition to a new main page. Starting with a small percentage of users from the UK, we will gradually transfer everyone to a new main page in a few weeks. If you are impatient to see it before the transition is completed, it is available at www.bbc.co.uk/news/0
Quick facts about the new home page
- It is easier and faster than the previous one:
- The site is accessible via HTTPS and in the near future we plan to redirect all unprotected traffic to it.
- The page is based on React components that are styled with our CSS Grandstand framework.
- Each component is a horizontal “slice” of a page that collects its data. This makes it easy for us to use "slices" on any page.
- All React components are rendered using our React-component-as-an-API-endpoint service and are connected to the page-assembly-as-a-service page .
- React is used only on the server. We do not load it on the browser side.
- The development team consists of five developers and one tester, but we also work with more than 60 developers and testers from all over the BBC.
What's next?
The current version of the main page is task number one, part one. We will substantially change it in the next few months. Here are some ideas that you can expect to see:
Performance improvement
Despite the fact that we have already significantly improved its performance, there is still a lot of work to be done:
')
- The first significant rendering is still long. We can improve it by loading basic CSS earlier.
- We still send too many bytes to the user. Most of this is inline styles that are only used in IE8 (Update: We have already sent a pull request to remove a third of these styles).
- Recalculation of styles and layouts takes too long on low-power devices. This still requires study.
- We are fundamentally connected by the “white BBC panel” located at the top of the page. This panel contains components from other parts of the BBC: search, notification and BBC ID. All of these components load their blocking CSS and Javascript in front of the main page resources. Although this is unlikely to change in the near future, we hope to work with teams that develop these components to reduce their impact on performance.
Design Enhancement
To launch the main page faster, we made many compromises with the UX and editorial teams about the page design. After we are done with the introduction, we will improve the visual part of the story block (promo) to highlight the stories of correspondents and selected particles. The current design looks like this:
Below is one of the suggestions how we can show other types of promo:
React in the browser
At an early stage, we decided that React in the browser would be superfluous for a page on which mostly static texts and images. The effect on the productivity of combining such a quantity of Javascipt and performing it in the browser is also prohibitively high. Even using server-side rendering, emulated mobile devices spent on running scripts and drawing almost 4 times more time when React was launched on the page.
No React on page
Effect of React in the browser
In our current approach, we build Javascript in the old-fashioned way, separately from the React components. However, we noticed that it could not scale for a long time, so in the end we will have to find a way to use React components in the browser without affecting performance. Solutions we are looking at include:
- Use Preact instead of React.
- Converting our components into stateless functional components where possible in order to reduce their size.
- Use smart code sharing to be able to load secondary code on request.
Translation source
Source: https://habr.com/ru/post/327274/
All Articles