Hacker News Reader

Comment by kuschku | Hacker News Reader

Damn, those load times. This is on all my tests – fast internet or dialup, 2016 desktop or ancient android phone – significantly faster than the real HN.

Wow.

View on HN

This new site is around 1MB, regular HN is around 50KB. They're not even close. It's just that navigating to new pages is faster since it doesn't take a full page refresh.

Which makes for a better user experience. What’s your point?

Not really. Most of the point of HN is to navigate to it and then away from it (to other sites).

The slightly higher upfront cost is only incurred once.

Well, it's incurred each time you navigate away and then back to HN, which happens any time you click on a link on the front page, right?

Browser cache

@sillysaurus3 you can actually leverage browser caching as well.

Correct, but so is commenting, loading comments, going back to the home page, etc.

All these actions are a lot faster on that site than on real HN with Firefox Nightly on PC and mobile.

Clone: 22 requests | 1.1 MB transferred | Finish:2.86 s | DOMContentLoaded 636 ms | Load:2.87 ms

Real Hacker News: 6 requests | 11.5 KB transferred | Finish: 336 ms | DOMContentLoaded: 325 ms | Load: 343 ms

Hacker News is just a static cached webpage

That’s on first load – all future loads are significantly faster on this clone.

1.1Mb is 100 times larger than 11Kb.

That would be the case when the bandwidth was the limit, but it’s not.

The limit is in the immense latency for opening a new connection.

Opening a network socket with TLS can take over 4 seconds on mobile, which is why ideally you’d even use an open websocket for communication instead of new GET requests. Navigating to a page in this version causes one or two network requests, in the real HN it takes far more just to check if the images have changed, the CSS has changed, etc.

Using websocket looks like overengineering because HTTP/2.0 allows to use a single connection for multiple parallel requests.

Using React to build a simple (student level) site like HN is overengineering too in my opinion. If you don't want to reload the page when navigating you can just reload HTML content with jQuery or fetch() without using client side rendering, without draining device battery and without loading 1 Mb of Javascript that will take much more space in RAM.

SPA approach should be used for interactive applications able to work in offline mode, able to provide rich experience on mobile devices etc.

They've implemented this as a SPA so all the pages are downloading at once not just the home page. Probably could be optimized with some lazy loading. Still, vanilla HN obviously has no framework so no need to download React/Apollo, etc. I'm gonna go out on a limb and assume that they're using this as a learning tool and a teaching tool. Just like no one needs a framework to implement a TO DO list, but that's the go to example app.

What is the technical difference between Finish, DOMContentLoaded and Load?

It caches HN API in memory (probably why the demo site is out of sync with live HN)

https://github.com/clintonwoo/hackernews-react-graphql/blob/...

Opposite experience here. Near 4-5x slower than actual HN for me.

What browser / internet speed / other diagnostics info?

Yeesh, thanks for the downvotes on an actually measured result.

I'm trying this in Firefox nightly (stylo enabled, webrender not).

Even on an old phone over throttled internet, that page is faster than real HN for page transitions, but the same happens on 100Mbps WiFi with my Nexus 5X, or on LAN with my desktop.

In all cases, that site is significantly faster than real HN in loading and rendering (I can see the real HN's icon slowly load on every page refresh — that page doesn't do that).

If you get different results, you're probably using Chrome, which is over-aggressively caching.

On a slow laptop on a reasonably fast connection (university WLAN) using FF 57 Beta the clone is slower. It is slightly faster than real HN at showing the orange bar and the tan content box (which I find quite jarring), the text then pops in noticeably later. Some pages also appear to first show error pages that then get replaced with content. (This even happens on repeat visits to a page, where this seems to cheat and take the comments from cache instead of checking for new ones)

Not sure how to explain that difference.

significantly faster than the real HN.

Proof? :)

Reply on news.ycombinator.com