12 ms·
A faster BBC News front page
- ezequiel-garzon 10y agoReact 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.
- narrowtux 10y agoMaybe they just like to code with a component based framework, but don't actually need dynamic components. That means it would just be a different way to use templates on the server side.
- wldlyinaccurate 10y agoWe'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.
- deanclatworthy 10y agoGreat. 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 10y agoAgreed! 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 10y agoIt 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 :)
- kristianc 10y agoI 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
- antigirl 10y agoprobably the only site you can use on the internet then
- DamonHD 10y agoWell, other than the video segments which can take several interactions to enable and are even then not guaranteed to work..
- afandian 10y agoSerious? 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 10y agoWow, 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 10y agoThanks 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/b97fc7bb9f5e15f924acb7703220df42 https://gist.github.com/afandian/b97fc7bb9f5e15f924acb770322...
- chaz6 10y agoSupporting http/2 will improve performance too!
- wldlyinaccurate 10y agoH2 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 10y agoDoes Mr Butterworth help guide the H2 stuff?
- cnorthwood 10y agoBrandon's not really involved that high up the application stack.
- chaz6 10y agoThat's great to know :-)
- niklasrde 10y agoH2 is already happening: https://twitter.com/tdp_org/status/851470269508202497 https://twitter.com/tdp_org/status/851470269508202497
- DamonHD 10y agoI 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 10y agoCompression 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/#waterfall_view_step1 https://www.webpagetest.org/result/170424_79_P0Q/1/details/#... 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 10y agoAlways 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 10y agoThe 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_79_P0Q-r%3A1-c%3A0&thumbSize=200&ival=100&end=full https://www.webpagetest.org/video/compare.php?tests=170424_7... Chrome is faster but still over 3 seconds: https://www.webpagetest.org/video/compare.php?tests=170424_NT_W4S-r%3A1-c%3A0&thumbSize=200&ival=100&end=visual https://www.webpagetest.org/video/compare.php?tests=170424_N... 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?
- afandian 10y agoCan 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
- bbcbreaking 10y agoPlease, please this. I don't care if news is just breaking. Just show me news in the order of importance. Or at the very very least, fix it so if I close the annoying breaking news box it doesn't jump back to the top of the page. Infuriating.
- wldlyinaccurate 10y agoOn your last point — the new breaking news banner doesn't have the infuriating jump-to-top behaviour. At the moment the new banner is only on the new front page but I think we're going to backport it to other pages in the not-so-distant future.
- bbcbreaking 10y agoThis is at least an improvement. But can't the breaking news only appear if something breaks after I load the page, rather than on initial load? Even then... give me an option to set a cookie to never see it please.
- wldlyinaccurate 10y agoI'll raise this with our product team. I think it's totally reasonable to expect the banner not to appear as soon as you load the page — if there's a breaking news story, it will already be on the page, right? So there's no need to also pop up a banner with the same story. But —this is a big "but"— I wouldn't expect this to happen soon. Changes take a long time at the BBC :)
- lol768 10y ago> 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.
- whatismyip 10y agoHSTS is not something you can realistically implement until every path under the domain can be served via HTTPS. For the BBC this is problematic because there are hundreds of products and inter-dependencies under the bbc.co.uk/bbc.com endpoints. The amount of work required to do this is non-trivial, and not something that can be done in blanket - each product needs to test their product, its dependencies etc. There's also other issues like CDN endpoints (and the BBC uses several providers, including its own CDN), a relatively large and complex traffic management set up and the politics that comes with a relatively large organisation running a very big website.
- cnorthwood 10y agoHi, 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.
- rsynnott 10y agoI 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 10y agoAccording 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 10y ago2.23s here, including images - https://imgur.com/a/9Kpxp https://imgur.com/a/9Kpxp
- NoGravitas 10y agoIt's also hilarious to look at the page without javascript. At least there's something there?
- the6threplicant 10y agoIt'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.
- alex95 10y agoI used to use the BBC as my primary source of information when I wanted news that was not over-dramatised. It was great; no click-bait, not too biased news, and things I actually cared about. Recently though, the BBC have gone against everything that I appreciated before. It actually reminds me of Buzzfeed, which I have to say isn't a compliment. Clickbait, leading headlines, you name it... When did the world ever stop caring about real issues, and instead started caring about 'Top 10 Ways that you know you hate your job (The 4th might shock you!)'?
- alexchamberlain 10y agoOh no; the BBC is the site i use when I need something served over HTTP, not HTTPS.
- Others 10y agohttp://neverssl.com/ http://neverssl.com/
- wldlyinaccurate 10y agoJust 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.
- ascorbic 10y agoTry http://example.com/ http://example.com/
- learntofly 10y agoYes, testing captive portals where https would give a TLS error!
- learntofly 10y agoYes, testing captive portals where https would give a TLS error!
- ed_balls 10y agoThere 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 10y agoSorry 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.
- bhaavan 10y agoAm I supposed to trust any news from a domain that spells "wildly inaccurate"? Am I in how people react to "fake news" experiment?
- corobo 10y agoFrom 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
- JustSomeNobody 10y agohuh? That is the developer's personal blog, not the actual news site.
- rntksi 10y agoalways 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 10y agoNope, 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.
- LeoPanthera 10y agoI don't think I will ever stop reflexively typing "news.bbc"...
- rntksi 10y agoThere 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...
- zb 10y agoThis 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 10y agoYes! 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 10y agoPress 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.
- talldan 10y agoYeah, I get the same issue with another part of the page - the little 'bell' icon they use for notifications at the very top. It appears just as I'm about to click on the link for 'sport', and I end up in 'news' instead. Maybe I should just read more news.
- rm445 10y agoThose of us aiming for the news link get to click the little bell instead. It's an infuriating order of loading. Not much point complaining in this particular thread though. As the article says, 'We are essentially hamstrung by the “white BBC bar” at the top of the page.'
- JDiculous 10y agoJust use an ad blocker, the web is insufferable without it.
- tomelders 10y agoThe 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.
- Angostura 10y agoSwitch to Lynx.
- blowski 10y agoThe 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".
- ralfn 10y agoUntil 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 10y agothey 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
- muse1864 10y agoAcknowledgements... nice bit of ass kissing there! 12 months for a single page overhaul, that's pretty costly.
- robtaylor 10y ago'...due to the unique way the bbc is funded...' etc etc Normal life does not count in the BBC :)
- jonatron 10y agoI've seen worse in 'normal' companies, where managers get apathetic about fighting other layers of management so everything moves at a snail's pace.
- wldlyinaccurate 10y agoWhen 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.
- ThomaszKrueger 10y agoAnd 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 10y agoAs 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?
- f055 10y agoThe 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.
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- dallamaneni 10y agoGood to see it is a PWA now. :)
- luxpir 10y agoThe 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 :)
- Paul_S 10y agoIt'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?
- huangc10 10y agoLinkedIn should hire this guy
- learntofly 10y agoThanks 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 :)
- thedonkeycometh 10y agotldr; Removed React