
A faster BBC News front page - cpeterso
https://wildlyinaccurate.com/introducing-a-faster-bbc-news-front-page/
======
afandian
Can you ditch the 'breaking news' whilst you're at it too please? It's never
really 'breaking' and is usually the headline of the landing page anyway.
Usability wise, it's as bad as a pop-up ad. Like this, for example:

[https://pbs.twimg.com/media/Cu_KsFAWgAADCJR.png](https://pbs.twimg.com/media/Cu_KsFAWgAADCJR.png)

~~~
wldlyinaccurate
The breaking news banner is a source of much internal conflict, at least
within the engineering teams. I think most people agree that it's too big, and
most people also agree that it's over-used. Unfortunately it's _one of those
things_ that editorial will not back down on — they _must_ be able to push
their breaking news to people, and it _must_ be prominent (and therefore quite
intrusive).

There is a small improvement to the banner on the new front page (/news/0),
which is that it's about 4 pixels shorter, and it's now grey instead of black
which I think is _much_ less abrasive.

~~~
noir_lord
I just block it with Ublock Origin.

It's intensely irritating, since it's never breaking and these days with the
way the world is it is also worrying.

For me Breaking News should be things like terroist attacks, massive flooding
not "Back Off Contestant Falls Over".

~~~
SippinLean
I just realized that wasn't an ad; I've never read the text because the
placement/intrusiveness triggered my ad blindness, I've blocked it with ublock
as well.

~~~
noir_lord
Aye, I use Ublock Origin to block more than just ads.

It's also handy for the comment sections on newspapers, sections of news sites
you are never gonna click/read (in my case sport) and comments on youtube.

~~~
smichel17
I block the suggested videos sidebar on youtube, too.

------
f055
The OP explicitly mentions a "Mobile - Emerging Markets" speed test, which is
a nice benchmark. I sometimes try to browse the web on EDGE or weak 3G, and
99% of sites do not load in reasonable time, or at all. The old-wide-web of
56k modems would be perfect for it, but websites and javascripts got really
obese nowadays:

* 14KB site [https://www.webpagetest.org/result/170424_EP_VE7/](https://www.webpagetest.org/result/170424_EP_VE7/)

* 443KB bbc [https://www.webpagetest.org/result/170424_RQ_VK2/](https://www.webpagetest.org/result/170424_RQ_VK2/)

* 3652KB the verge, of course [https://www.webpagetest.org/result/170424_44_WCC/](https://www.webpagetest.org/result/170424_44_WCC/)

But I applaud BBC's effort, I hope to see lighter and faster web even though
we move to Fiber and 4G.

------
zb
This does feel a lot faster, but hasn't fixed my pet peeve (on bbc.com):
clicking on a link to a news article and getting taken to the wrong one
because the ads loaded and everything moved just as I clicked. This often
happens to me 3 or 4 times in a row. Space needs to be blocked out for ads as
soon as the page renders.

~~~
JonoBB
Yes! For me its the lazy loading of the images (not necessarily ads). Just as
you are about to click on a link, the whole page jumps down and you end up
clicking the wrong link. And then you click the back button, and the same
thing happens again. So, you end up just having to wait 5-10 seconds for all
the images to load just to ensure that you don't mis-click on the next
article.

~~~
Andrenid
Press ESC, it stops the page loading and everything freezes as-is. It's how I
get around this exact problem on lots of sites due to my slow net.

------
lol768
> It is available over HTTPS, and we have plans to redirect insecure traffic
> to HTTPS in the not-so-distant future.
    
    
        ~ curl -I https://www.bbc.co.uk/news/0
      HTTP/1.1 301 Moved Permanently
      Content-Type: text/html
      Date: Mon, 24 Apr 2017 09:33:49 GMT
      Location: http://www.bbc.co.uk/news/0
      Connection: Keep-Alive
      Content-Length: 0
    

What annoys me most about this is that there is a valid GlobalSign SSL
certificate there and the server can clearly handle TLS handshakes. It's just
deliberately being used to make the user's experience less secure.

I realise this is being worked on and somewhat tangenital to this post, but
the BBC's rollout of HTTPS has been shockingly poor and incredibly slow
comapred to other news organisations. What's the point of serving
account.bbc.co.uk securely if all links to sign in can be MitM'd? The parts
that can be accessed with HTTPS don't seem to use HSTS either.

~~~
cnorthwood
Hi, BBC employee here (although not in News). Basically, we're working on it.
The main issue is that by making a page HTTPS only, that all content also
needs to be HTTPS too. We're working with our CDN providers to enable that
(not only for new content, but for our archive too), and we also have to
support a much longer tail of browsers and SSL configurations than other sites
(China being an important market for us, and anecdotally I've heard we still
get >1% IE7 from China, presumably from pirated XP machines) which makes it
more complicated. It's not really an excuse, but there are people working very
hard at enabling TLS without breaking the site for others. Other parts of the
BBC website are available over HTTPS, hence the redirects that are in place.
Similarly, we can't use HSTS as that applies to the whole domain.

~~~
lol768
> Similarly, we can't use HSTS as that applies to the whole domain

Is this a problem for e.g. account.bbc.com though? I can't see how that can
impact bbc.com/bbc.co.uk if the header is set on the subdomain only.

I remember it used to be that e.g. news was accessed via news.bbc.co.uk but
this seems to have been changed more recently to be accessible at /news. As
you note, this makes HSTS a no-go because of all the other products on the
same domain need to support HTTPS. This makes me wonder why this change was
made in the first place. It would also seemingly mean that (without e.g.
[https://w3c.github.io/webappsec-suborigins/](https://w3c.github.io/webappsec-
suborigins/)) an XSS in one product means an XSS everywhere.

I'm sympathetic re. the SSL configurations you need to deal with and it's
reassuring that this is being worked on.

~~~
cnorthwood
Ah true, I'm not close enough with the detail of some of the subdomains to
know what's going on there.

A few years ago a decision was made that the BBC site should be all under
www.bbc.co.uk, I believe this was mostly for marketing purposes, but also to
simplify our internal routing for the site. news.bbc.co.uk was previously
separate as News had it's own infrastructure separate from other parts of the
BBC, but that's been rationalised now (leaking subdomains for technical
reasons was something we frown upon).

------
rsynnott
I mean, okay, it's faster than it was a year ago, but it's still considerably
slower than it was a decade or so ago, before there was a plague of javascript
o'er the land.

I miss when the major constraint on page load time was the server-side
rendering time...

~~~
JonAtkinson
According to my Safari console, it's loading the page on average in 50ms, with
some samples as low as 20ms. That's considerably less than the blink of an eye
(at 100ms).

I doubt that a decade-old CPU/OS and a decade old browser were rendering any
page (even without JS) at that kind of speed.

~~~
michaelt
2.23s here, including images -
[https://imgur.com/a/9Kpxp](https://imgur.com/a/9Kpxp)

------
ed_balls
There is one thing that annoys me about
[http://www.bbc.co.uk/news](http://www.bbc.co.uk/news) I use VPN node in
Finland. When I visit the news site the page loads very quickly, I start
reading and after 3 seconds you figure out that I'm not in UK (based on IP I
guess) and you reload to the international page with different articles.

~~~
wldlyinaccurate
Sorry about this... The BBC has some _extremely_ strict rules around not
showing advertising to UK users (who already pay a license fee to the BBC). We
attempt to prevent this by redirecting people to the "correct" edition based
on their location.

Unfortunately, for legacy reasons, the geolocation lookup and subsequent
redirect happen in the browser. It might be possible for us to issue the
redirect from the edge soon, since most non-UK users now come via Fastly which
does some geolocation.

In the mean time, you can prevent the redirect by ensuring you go to bbc.com
or bbc.co.uk, depending on whether you are in the UK or not.

------
deanclatworthy
Great. I religiously visit BBC news throughout the day. This definitely loads
quicker than before.

That said, there is performance and then there is perceived performance. Why
introduce an arbitrary fade-in animation on the images (aka a delay)? Just
show them as soon as they are available from the lazy-loader. This makes it
feel slower for me.

~~~
wldlyinaccurate
Agreed! Glad you mentioned the image fade-in. I was actually speaking to our
UX team about it the other day, and I think we might get rid of it \o/

~~~
Angostura
It was the one thing I noticed actually. The loading speed seemed about the
same to me (its always loaded quickly here) but I found the fade-in really
quite distracting. If you could pass on my downvote :)

------
ThomaszKrueger
And this has a sort-of easter egg: if you open developer tools in Chrome when
at the page, they invite you to apply for developer jobs:

Hi there! Do you want to help build a fast and accessible web experience used
by over 300 million people around the world each month? We're hiring people
for all sorts of roles. Head on over to
[http://careerssearch.bbc.co.uk/](http://careerssearch.bbc.co.uk/) (search for
"News") to find out more!

~~~
cJ0th
As a long time Internet user I could actually imagine myself becoming
passionate about "Make The Internet Fast Again". I wonder how one would start
a career in that direction. It's a bit of a dilemma: In order to build fast
modern websites you probably need to know how to build horrible modern
websites. And I can't really motivate myself to imitate horrendous websites
just for kicks. In fact, I stopped creating websites when jQuery wasn't enough
anymore. In other words, more than ten years ago... It's not that I shun more
recent technologies, I am willing to learn. I just don't want to create
Frankensteinish websites first.

Any tips for a more direct path towards website optimization jobs?

------
kristianc
I find that BBC News is one of the best sites on the entire web for browsing
with NoScript.

EDIT: This is what I get: [http://imgur.com/a/Cg9sD](http://imgur.com/a/Cg9sD)

~~~
afandian
Serious? This is how the current homepage renders for me.
[http://imgur.com/a/8pDS0](http://imgur.com/a/8pDS0)

And the new one is even worse (though it's a work-in-progress)

[http://imgur.com/a/IPr3U](http://imgur.com/a/IPr3U)

~~~
wldlyinaccurate
Wow, this is awful. Would you mind telling me what combination of
settings/add-ons you have so that we can reproduce this?

Our "no JS" fallback styles are not done in a very nice way at the moment:
they rely on the browser reading noscript tags. We never did any testing with
NoScript or similar add-ons, and I remember hearing somewhere that those sort
of add-ons don't always evaluate noscript tags.

~~~
afandian
Thanks for your reply!

\- Chrome Version 57.0.2987.133 (64-bit)

\- No-Script Live 0.2.4 [http://mybrowseraddon.com/noscript-
lite.html](http://mybrowseraddon.com/noscript-lite.html)

\- Privacy Badger 2017.4.19.1

FWIW Privacy Badger isn't blocking anything, I think this is all from script
blocking. I notice that low-res images get sent by default, which suggests
that the design conflates 'no script' with 'mobile'? That's not true at least
in my case.

Here's my browser log.
[https://gist.github.com/afandian/b97fc7bb9f5e15f924acb770322...](https://gist.github.com/afandian/b97fc7bb9f5e15f924acb7703220df42)

~~~
wldlyinaccurate
Thanks! We'll take a look at this ASAP. In the mean time, I guess all I can do
is apologise for the broken experience...

We use a technique called _cutting the mustard_ to determine whether a browser
is modern (read: >=IE9). This allows us to write one set of CSS that should
work in pretty much any web browser (we call this the "core" experience), and
another set that uses modern-ish CSS (the "enhanced" experience). One of the
major drawbacks to this technique is that the technique relies on JS — it is
literally just _modernBrowser = ( 'addEventListener' in window &&
'querySelector' in document && 'localStorage' in window)_.

So when you browse the BBC News website with JS disabled, you are getting a
page that has been styled to work on a Nokia E65, BlackBerry OS4, IE8, and
everything in between. Unfortunately right now we don't have a way to give you
the enhanced version of the page without JS. In the future it might be
possible for us cut the mustard at the server (or the CDN edge) based on User-
Agent but that isn't something I can see happening in the foreseeable.

~~~
afandian
It's great that you're trying so hard to accomodate such a broad landscape; of
course there will be trade-offs. Being a weird intentional corner-case you get
what you ask for, I suppose!

Thanks for engaging with questions.

------
the6threplicant
It's a great site but internationally the ads ruin the experience. You think
you've clicked on a link but the site still hasn't loaded all of its ads and
you have clicked on the wrong link.

Also waiting 30 seconds for a video ad to see 10 seconds of content is kinda
stupid.

------
chaz6
Supporting http/2 will improve performance too!

~~~
wldlyinaccurate
H2 support is happening at a much higher level (like, the BBC-wide
infrastructure team level) but I think it's coming pretty soon. We did some
testing and saw a positive impact on all front-end metrics: first paint,
interactive, DOM complete, document onload.

~~~
DamonHD
Does Mr Butterworth help guide the H2 stuff?

~~~
cnorthwood
Brandon's not really involved that high up the application stack.

------
alexchamberlain
Oh no; the BBC is the site i use when I need something served over HTTP, not
HTTPS.

~~~
wldlyinaccurate
Just to clarify: We aren't redirecting HTTP -> HTTPS and don't have any plans
to do so, at least in the short-term. All we're doing is enabling HTTPS for
bbc.{com,co.uk}/news because at the moment we issue a 301 for HTTPS -> HTTP.

------
luxpir
The Guardian did a lot of work on pagespeed, made a lot of it public - I
wonder if much of this was referenced. Especially given the planned 'masonry'
effect shown midway down the page.

Good to see major public resources taking the lead (gov.uk being another) on
reducing cruft. Most likely out of necessity, but it wouldn't hurt to start a
trend :)

------
ralfn
Until the internet marketing team loads it up with scripts that inject 12
different versions of jQuery to do some a/b testing.

I wish engineers would actually be able to take responsibility for the whole,
and dismiss marketing tags based on technical grounds.

~~~
butler14
they can and often do -- code your own bespoke lightweight A/B testing
software

that'll be the easy bit, of course, the hard bit will be influencing people to
part with the £silly amount of money it'd likely cost vs. off the shelf
alternatives

------
learntofly
Thanks for sharing.

I'm assuming you are happy to receive feedback?

Does the cookie statement have to be so large? On first load it takes up ~ 3/4
of my usable screen space on an iPhone 5S in safari? It also feels unusual to
be at the top of the page as opposed to hovering over some space at the bottom
of the page.

Also on iOS lots of unnecessary line spacing (to the right of images) occurs
when listing headlines.. image heigh, font size and line spacing could be
worked to look better.

Congratulation on achieving the performance gains however :)

------
ezequiel-garzon
_React is only used on the server. We do not load it in the browser._

My apologies in advance for my ignorance, as I have so far read about React,
but not actually used it. Isn't the main advantage of React the virtual DOM it
sets up and its reconciliation algorithm with the DOM? How can this be applied
without using on the client side? Wouldn't all the responsive aspects be lost,
requiring a round trip to the server for each event?

Thanks in advance.

~~~
wldlyinaccurate
We've found that React is actually really great for building complex UIs out
of small reusable components. I often struggle to put into words just how much
better it is than, say, using Mustache templates or PHP/ERB/etc. I think it
mostly comes down to how React makes component composition super-easy, and
support for higher-order components makes component reuse a breeze.

------
DamonHD
I would also like the site NOT to be sending me a tonne of nugatory whitespace
in the HTML, and to enable gzip/deflate as a minmum to reduce bandwidth...

~~~
acdha
Compression shows every sign of being enabled so there's little downside to
any whitespace in the HTML:

[https://redbot.org/?uri=http%3A%2F%2Fwww.bbc.com%2F](https://redbot.org/?uri=http%3A%2F%2Fwww.bbc.com%2F)

[https://www.webpagetest.org/result/170424_79_P0Q/1/details/#...](https://www.webpagetest.org/result/170424_79_P0Q/1/details/#waterfall_view_step1)

If you're not seeing transfer encoding, is it possible that you're behind some
sort of proxy – network or local antivirus – which is stripping it?

~~~
DamonHD
Always direct.

Today is the first time I've seen gzip actually happen though! If only all my
other problems were so easily solved by whining!

But still: sending, compressing, uncompressing stuff that definitely adds no
value and would be trivial to statically omit almost all of is still a
downside...

~~~
acdha
The question you should be asking is why it's there: is saving an extra
nanosecond or two of easily-cached compression time really worth having to
rearchitect a backend templating or content assembly system?

It's not a bad thing to do but I'd be surprised if they didn't have higher
priorities for their engineering staff. If you look at the trace I linked
before, note that even if you could eliminate all of the time to generate the
page the most you could save is less than 100ms on page which uses multiple
seconds of CPU time to render. Look at the video – the page doesn't even
render for almost 5 seconds in a low-end browser:

[https://www.webpagetest.org/video/compare.php?tests=170424_7...](https://www.webpagetest.org/video/compare.php?tests=170424_79_P0Q-r%3A1-c%3A0&thumbSize=200&ival=100&end=full)

Chrome is faster but still over 3 seconds:

[https://www.webpagetest.org/video/compare.php?tests=170424_N...](https://www.webpagetest.org/video/compare.php?tests=170424_NT_W4S-r%3A1-c%3A0&thumbSize=200&ival=100&end=visual)

If you were in charge of that project, would you commit your limited developer
time to something cannot possibly produce a human perceptible benefit or
instead have them work on removing a borderline-uncomfortable delay?

~~~
DamonHD
Most of the work would be essentially quick and one-off: no one blinks at
minifying JS or CSS and I bet that 50% of this would be entirely the same and
at low dev cost.

I entirely see your point, but disagree that it's not worth doing any of it,
given an almost certain quick small win + saving CPU time and bandwidth and a
bit of planet while we're at it!

~~~
acdha
> Most of the work would be essentially quick and one-off:

Again, think about the complexity of what's generating that content. Do you
really think they have a single index.html template floating around rather
than the system described pulling blocks of content in from various sources,
all of which need to be updated in various places? You could build a system to
collapse whitespace runs after the content is generated but now you need to
develop that and test it to make sure it doesn't trigger on something where
the whitespace actually matters … and suddenly you're taking time away from
changes which actually benefit people.

> given an almost certain quick small win + saving CPU time and bandwidth and
> a bit of planet while we're at it!

How much CPU time do you think you're talking about, anyway? Here's what doing
this in a naive manner which will break things looks like:

    
    
        cadams@jupiter:~ $ gzip -9 < bbc.html | wc -c
           32259
        cadams@jupiter:~ $ curl -s http://www.bbc.com | perl -pe 's/\s+/ /gs' | gzip -9 | wc -c
       30859
    

So we're talking an extremely small amount of CPU time and one packet saved.
That's might seem useful until you look at this in context of a page which
loads a couple MB of content and uses multiple seconds of CPU time:

[https://www.webpagetest.org/result/170424_NT_W4S/](https://www.webpagetest.org/result/170424_NT_W4S/)

Image compression, enabling gzip on the remaining resources which lack it,
etc. are all going to save more data on individual files and have the nice
property of not breaking anything else.

~~~
DamonHD
I'm not saying don't do the other things too, but a ~5% saving (maybe more at
a more typical gzip TX setting) for no semantic change at all saves some
outgoing BBC resource but is more significant for the RX side in CPU, etc.

Anyhow we can agree to disagree but many of my clients over the years have
been very happy with 5% resource savings, although 5x is nicer when
available... B^>

(And yes I'm fudging CPU and bandwidth, but with a compressor involved and the
CPU often being a bottleneck on lower-end devices for example, I think that
simplification can be justified.)

------
rntksi
always love how you optimise the news front page. are you guys still running
the Perl backend and "Html Put" :) @joseph_wynn ? a former BBC News CSD here.

~~~
cnorthwood
Nope, the Perl backend went away a long time ago! (at the point of switching
from news.bbc.co.uk -> www.bbc.co.uk/news). The site is dynamically generated
at origin now.

~~~
rntksi
There used to be this resident Perl-guru in an obscure area, back when we were
sitting over in TVC (FM&T J area), who would debug stuffs for us when things
were not working right. Can't remember his name though (Scott? Paul?). I
wonder where he went...

------
dallamaneni
Good to see it is a PWA now. :)

------
huangc10
LinkedIn should hire this guy

------
muse1864
Acknowledgements... nice bit of ass kissing there! 12 months for a single page
overhaul, that's pretty costly.

~~~
wldlyinaccurate
When you put it like that, yep, pretty costly! But a large chunk of this
project has been building up the frameworks, infrastructure, tooling, and
processes that enable us to migrate from our legacy PHP 5.3 apps running in 2
physical data centres to ~the cloud~.

Also, did you read the part about _we have collaborated with over 60 other
developers and testers from all around the BBC to build this page_? That's
actually the best part — News websites are pretty simple; you just display
headlines, summaries, and images in various formats. So part of this project
was building the lego blocks that we're going to use to rebuild not just the
rest of the BBC News site, but also parts of BBC Sport and potentially other
BBC products too! So yeah, costly for one page. Hopefully very cost-efficient
in the long-term.

------
Paul_S
It's nice someone cares about performance in modern websites. Shame about the
BBC being no better than any other clickbait website as far as news goes.
Truly, my licence fee well spent.

I never understood that. Surely, since you're already paid for you could just
report the news and not bother with clickbait since you're not getting paid
for the clicks?

------
tomelders
The BBC news page should be a HN/reddit style list, with some enhancements to
identify specific story types.

Every news outlet's landing page is a UX disaster, that only meets the needs
of the organisations ego, and not the needs of an actual user.

~~~
blowski
The first rule of UX is "you are not your user", and you are breaking it (I'm
guessing the BBC has done significantly more user research than you). I think
your comment is basically "I want a website to look like this, therefore all
users must want a website to look like this".

------
bhaavan
Am I supposed to trust any news from a domain that spells "wildly inaccurate"?
Am I in how people react to "fake news" experiment?

~~~
corobo
From the site

> A collection of guides & opinions about programming and the state of the
> web, from a developer at BBC News.

It's a username. Your equivalent would be bhaavan,com

