Enlarge excerpt from the filmstrip
- The first render happens after 8 seconds. The article text is fully loaded and the user can start to read.
- Ten seconds later, the category is inserted between header and article title, causing a reflow.
- Two seconds later, the category transforms into a drop-down menu.
- A gray-white screen is seen for 8 seconds. I did not observe this on my smartphone. I guess this is just a test artifact I’m going to ignore.
- An advertisement banner is inserted between the header and the category navigation, causing a reflow.
- Roughly at the same time, a section menu is added to the header into a placeholder space, not causing a reflow.
- Five to six seconds later, a dropdown menu for exploring other BBC sites is loaded. It replaces a menu button which was just a simple link to the footer of the page.
- On my real mobile Chrome, a full-page ad pops up after the page completely loaded.
Evaluation: Lazy-loading overkill
The BBC News site is clearly optimized for the first render time. It lazy-loads images, navigation widgets and ads. Some of the lazy-loading is implemented in an unobtrusive way, other causes reflow and user interruption.
The site started with good intentions but unfortunately ended up with bad results. The overall performance and usability suffers from the lazy-loading more than it benefits. Especially the three lazy-loaded navigations are confusing and impair the performance. Two ads are loaded in an annoying way.
I’m recommending these action points:
- Remove visual clutter. Focus on the core content and core navigation techniques.
- Minimize lazy-loading. Use lazy-loading techniques that do not cause reflows and do not interrupt user interaction.
- Merge two redundant navigation widgets into one. The category navigation contains the section navigation.
- Leave cross-site navigation as it is: a simple link to the existing footer.
- Avoid flashy ads. Use placeholder space for the main banners. Avoid pop-up banners or use less intrusive interstitials.
I’d love to hear your feedback! Send an email to email@example.com or message me on Twitter: @molily.