3 ms·

> There is a (high) probability users will close the tab after waiting for over a minute for MBs of JS to download and parse. I'm not sure what leads you to be

by fivea 5y ago

> There is a (high) probability users will close the tab after waiting for over a minute for MBs of JS to download and parse. I'm not sure what leads you to believe that a SPA requires "MBs of JS" to work. I've worked on a popular SPA deployed to multiple regions and with tons of localization data, and the total payload stayed well below 1MB. Plenty of dynamic HTML content, specially images, require far more than that. In fact, this very discussion on HN, a very spartan dynamic HTML page, currently requires over 250kB as it dumps all the threads regardless of whether you read them or not. As a contrast, Reddit's frontpage takes 750kB.

_xnmw 5y ago
Wow, the fact that you compare Reddit to HN, and you consider the Reddit SPA to be "better" means you have a fundamentally different notion of better. For me, Old Reddit and Hacker News load fast, feel snappy and native, and work better in every way, while the new Reddit SPA is sluggish, full of random network errors and bugs that I encounter regularly just clicking around, and takes up a ton of memory/CPU just to browse a discussion site. And Reddit's frontpage size is 1.3 MB according to one check I did which checks the size of all network calls after loading, etc. and that's WITHOUT all the lazy-loaded content below the fold.
- justsomehnguy 5y ago
  > And Reddit's frontpage size is 1.3 MB Ugh, the two chat scripts are 944KB + 1.30 *MB* alone [0] Full page load (without touching anything at all) is 12.87MB (6.58 on wire) with 273 requests. [0] https://imgur.com/a/bHf9CQb https://imgur.com/a/bHf9CQb
southerntofu 5y ago
> Plenty of dynamic HTML content, specially images, require far more than that. (...) this very discussion on HN, a very spartan dynamic HTML page, currently requires over 250kB There's the difference: HTML-first approach will be able to draw everything using very little resources by the time i've loaded a few hundred kilobytes. With JS bundles i first have to wait for the scripts to load, then the dance of unreliable network-roundtrips starts and can fail in mysterious ways unknown the the browser UI. Images will not prevent the browser from drawing the window, and they can be lazy-loaded if you consider that's better UX (of course the browser can decide to override that setting to respect user preferences). Time to full render is orders of magnitude better on simple HTML/CSS (what browsers were designed to render) than with a crap bundle that's going to trigger network connections and DOM changes (so full page redraws) in mysterious ways. Also, i love when my refresh and back button in the browser UI do what they're supposed to do. I'm not saying it's impossible with an SPA, that's just something most SPAs i stumble upon are completely incapable to respect. I encourage you to run the experiment. Take out an old Pentium 4 with 2G RAM, setup Firefox and in the developer bar (f12) turn on network's throttling. It will not be a realistic simulation as you would need packet loss (which other tools can simulate) but it will certainly help you measure performance and make informed decisions.
acdha 5y ago
> I'm not sure what leads you to believe that a SPA requires "MBs of JS" to work. > In fact, this very discussion on HN, a very spartan dynamic HTML page, currently requires over 250kB as it dumps all the threads regardless of whether you read them or not. As a contrast, Reddit's frontpage takes 750kB. You can use tools like your browser’s developer tools or webpage test to accurately measure this. It seems like that would be a useful skill to develop for accurately reasoning about SPAs and understanding why your beliefs don’t match real users’ experiences. For example, Reddit.com is actually 10MB of transfer, not 750KB, and it takes 5 seconds to process 6.7MB of JavaScript (47 requests to transfer 1.8MB of compressed JavaScript) which delays the start of rendering until 2 seconds in and requires almost 10 seconds to render the top of the page. https://webpagetest.org/result/220104_AiDcHT_cf05f20e55718cfc7b1f01b02c770cf1/1/details/ https://webpagetest.org/result/220104_AiDcHT_cf05f20e55718cf... In contrast, the HN page requires a TOTAL of 62KB to render in less than a second: https://webpagetest.org/result/220104_AiDcAH_1c302fd66a183aa5e6ae081df361f345/ https://webpagetest.org/result/220104_AiDcAH_1c302fd66a183aa... That’s an enormous difference which is extremely noticeable if you don’t have a fast computer and network connection, and that’s before you get to the serious bugs Reddit has because their SPA doesn’t handle errors or session timeouts well (I see this on a near-daily basis). I have a recent iPhone and the new Reddit SPA lags notably behind the old version, which renders twice as fast and is more reliable because it uses a tenth of the code: https://webpagetest.org/result/220104_BiDcDZ_9bdbf4482d8458432b60f280cf5d56c6/ https://webpagetest.org/result/220104_BiDcDZ_9bdbf4482d84584...

by fivea 5y ago

_xnmw 5y ago

Wow, the fact that you compare Reddit to HN, and you consider the Reddit SPA to be "better" means you have a fundamentally different notion of better. For me, Old Reddit and Hacker News load fast, feel snappy and native, and work better in every way, while the new Reddit SPA is sluggish, full of random network errors and bugs that I encounter regularly just clicking around, and takes up a ton of memory/CPU just to browse a discussion site. And Reddit's frontpage size is 1.3 MB according to one check I did which checks the size of all network calls after loading, etc. and that's WITHOUT all the lazy-loaded content below the fold.

justsomehnguy 5y ago
> And Reddit's frontpage size is 1.3 MB Ugh, the two chat scripts are 944KB + 1.30 *MB* alone [0] Full page load (without touching anything at all) is 12.87MB (6.58 on wire) with 273 requests. [0] https://imgur.com/a/bHf9CQb https://imgur.com/a/bHf9CQb

southerntofu 5y ago

> Plenty of dynamic HTML content, specially images, require far more than that. (...) this very discussion on HN, a very spartan dynamic HTML page, currently requires over 250kB There's the difference: HTML-first approach will be able to draw everything using very little resources by the time i've loaded a few hundred kilobytes. With JS bundles i first have to wait for the scripts to load, then the dance of unreliable network-roundtrips starts and can fail in mysterious ways unknown the the browser UI. Images will not prevent the browser from drawing the window, and they can be lazy-loaded if you consider that's better UX (of course the browser can decide to override that setting to respect user preferences). Time to full render is orders of magnitude better on simple HTML/CSS (what browsers were designed to render) than with a crap bundle that's going to trigger network connections and DOM changes (so full page redraws) in mysterious ways. Also, i love when my refresh and back button in the browser UI do what they're supposed to do. I'm not saying it's impossible with an SPA, that's just something most SPAs i stumble upon are completely incapable to respect. I encourage you to run the experiment. Take out an old Pentium 4 with 2G RAM, setup Firefox and in the developer bar (f12) turn on network's throttling. It will not be a realistic simulation as you would need packet loss (which other tools can simulate) but it will certainly help you measure performance and make informed decisions.

acdha 5y ago

> I'm not sure what leads you to believe that a SPA requires "MBs of JS" to work. > In fact, this very discussion on HN, a very spartan dynamic HTML page, currently requires over 250kB as it dumps all the threads regardless of whether you read them or not. As a contrast, Reddit's frontpage takes 750kB. You can use tools like your browser’s developer tools or webpage test to accurately measure this. It seems like that would be a useful skill to develop for accurately reasoning about SPAs and understanding why your beliefs don’t match real users’ experiences. For example, Reddit.com is actually 10MB of transfer, not 750KB, and it takes 5 seconds to process 6.7MB of JavaScript (47 requests to transfer 1.8MB of compressed JavaScript) which delays the start of rendering until 2 seconds in and requires almost 10 seconds to render the top of the page. https://webpagetest.org/result/220104_AiDcHT_cf05f20e55718cfc7b1f01b02c770cf1/1/details/ https://webpagetest.org/result/220104_AiDcHT_cf05f20e55718cf... In contrast, the HN page requires a TOTAL of 62KB to render in less than a second: https://webpagetest.org/result/220104_AiDcAH_1c302fd66a183aa5e6ae081df361f345/ https://webpagetest.org/result/220104_AiDcAH_1c302fd66a183aa... That’s an enormous difference which is extremely noticeable if you don’t have a fast computer and network connection, and that’s before you get to the serious bugs Reddit has because their SPA doesn’t handle errors or session timeouts well (I see this on a near-daily basis). I have a recent iPhone and the new Reddit SPA lags notably behind the old version, which renders twice as fast and is more reliable because it uses a tenth of the code: https://webpagetest.org/result/220104_BiDcDZ_9bdbf4482d8458432b60f280cf5d56c6/ https://webpagetest.org/result/220104_BiDcDZ_9bdbf4482d84584...