Conservative web development
drewdevault.com
drewdevault.com
a) Apps where the user is expected to stay a while
b) Sites where the user is there, maybe once ever (most likely also scared off by the ads)
For Apps, I would always prefer a pre-load of JS that was built with React and downloads about 2-4 MB. If there is an update I will be forced to download it again.
On the UPSHOT, almost everything I do in that app is now a 3-8KB request. This means transitioning pages, changing states of things, all happen in about 50ms including whatever visual changes are required on the screen.
Compare that to full-screen refresh apps and I am usually waiting 200-400ms. It just feels too damn slow.
Why am I even typing this? This is the freaking whole point of an SPA. Are we not all caught up on this yet?
I think there's a place for sites where the user is expected to stay a while, and where functionality doesn't warrant several megabytes of resources.
Thinking that there's anything but can lead to a wasteful landscape for the web.
Pinging google.com from my current connection (NYC) results in an average 26ms latency. Facebook is 25ms. That's just baseline connection latency for a user in a place with a solid connection, and you're unlikely to do better.
Realistically, most apps that aren't Google scale are lucky to get 300ms average latency. The way you improve responsiveness is by eliminating round-trips, not assuming that client-side frameworks will save you.
Which is why the comment is advocating for locally-cached resources.
"The way you improve responsiveness is by eliminating round-trips..."
Hence "preload" above.
I am hosting a quite popular site built with perl and php over 20+ years and with at least 2 round-trips to the DB per request. 150ms latency triggers a warning in monitoring, 200 is considered "critical". The site sits on the west coast, the monitor in Chicago. The site serves at least 10 concurrent clients at any time (read: 5am) up to a few thousand.
And I am painfully aware that the bottleneck is the code, not the network.
But also, let's be real for a moment: define "latency". Is 150ms your (client-measured) connection time? Your render time? Your usable-page time? Again, most webapps are lucky to get HTML back to the user in under 300ms, and if your 150ms metric is "time to server-side render", then you very likely aren't.
I stand by my original comment (it's better to avoid loads than to assume you're fast), but good on you for getting those latencies down.
The average bandwidth for a mobile device in the USA is about 3.25 mb/s (26mbps). So to load your "2-4mb" Javascript library you're looking at 400ms to connect + 1000ms to download resources. That's 1400ms.
Now for the rest of the math I benchmarked my own website. My homepage is ~300kb and loaded in 461ms. The fastest you're going to get ANYTHING back from my server is about ~170ms.
Lets start with your App. 1,400ms and the app is loaded. Load another page and it takes 200ms to load another 5kb of content. Load one more page and it's another 200ms for 5kb of content. I've been waiting on your website for a total 1,800ms and viewed three "pages" of content.
Lets move on to my website. ~450ms and the site is loaded. Load another page and it takes another ~450ms to load another 300kb. Load another page and that's another ~450ms to load another 300kb. I've been waiting on my website for a total of 1,350ms and viewed three actual pages of content, but the user only had to download 900kb instead of 4mb.
So I think you proved the OP's point.
At any rate, the NYT page that Drew DeVault is complaining about isn't an SPA, and its problems don't stem from loading a JS library whose point is to make future requests faster. Its excessive JavaScript use is driven almost entirely by including advertising/marketing-driven code, and I would argue that JS is being a bit scapegoated here: it's a symptom, not the problem. I bet we could deliver a lean, mean, highly-optimized version of that web site that duplicated the exact same ads, down to the same obtrusive banner behavior. Would we like the site more then? Would any of us really respond, "Wow, it's so much better now that I can be frustrated by this terrible design in a tenth the load time!"?
I believe the point of the post wasn't to demonize Javascript, but to point out that there are a lot of low-hanging fruit in the world of web design and that it takes very little effort for developers to simply look at their design in terms of respecting users bandwidth and only using what you need to get your message across.
NYT sent this guy 2.8mb of data from 5 different domains to communicate 9037 bytes of requested content. That should resonate with anyone using multiple Javascript libraries, especially the ones who are offended.
Great, you've shaved off 150-350ms of refresh load time. So why does your website take 10-15 seconds to load on my phone when I'm walking about the supermarket?
Get out of the lab. Start testing with real users in real contexts. You'll quickly learn that many of your assumptions about what users want disappear.
Same goes with a lot of sites that seem to be built as web apps despite not needing to be apps in any shape or form.
I understand that economically the savings in development time usually outweighs the bandwidth costs, but I would be interested in any analysis on how wasteful this is overall.
Large-ish arrays of similar JSON objects compress very well with gzip, and ultimately parse more quickly than JS-based protobuf or msgpack, at least in our testing.
https://httparchive.org/faq#how-do-i-use-bigquery-to-write-c...
[0] https://www.npmjs.com/package/crawler [1] https://rethinkdb.com
Keeping it as two words would be like writing Rechtsschutzversicherungsgesellschaften as rechts shutz versicherungs gesellschaften, which would obviously be terrible
> The use of [diaeresis], however, is considered to be largely archaic.
My experience has it pretty much only moderately commonly used now in “naïve”, and by people that read and enjoy The New Yorker (though possibly only to be different and not for any good reason).
https://news.slashdot.org/story/18/08/26/162242/bitcoin-mini...
│ clicked the first link on Hacker News - a New York Times article. It started by
│ downloading a megabyte of data as it rendered the page over the course of eight full
│ seconds. The page opens with an advertisement 281 pixels tall, placed before even the
│ title of the article. As I scrolled down, more and more requests were made,
| downloading a total of 2.8 MB of data with 748 HTTP
| requests.
That's why I do that in the background with a python script and inline the contents of the hn articles into an RSS feed [1] that I read on a terminal based client [2]. Source [3].
[1] https://damng.github.io/hackernews-rss-with-inlined-content/... [2] https://codezen.org/canto-ng/ [3] https://github.com/damng/hackernews-rss-with-inlined-content
Reminded me how much I miss gopher.
Lynx's rendering was unusable, because their front page has all the nav, colophon, etc. cruft ahead of the content (in the DOM).
Safari's rendering was almost usable. It still shows fancy typeface for the headmast, etc. Huh. Then I tried to disable custom fonts. I was amused to learn they're rendered with SVG, with no alt-text.
I set HTTP cache-control immutable on my blog's image/JS/CSS URLs this weekend. Cache-Control: immutable tells the browser that this URL will never change, so don't check to see if it has. It should cut down on the warm loads more. If it does change, the timestamp in the URL path will change, so browsers will check the new URL.
https://bitsup.blogspot.com/2016/05/cache-control-immutable....
I suggest caching the main HTML, too. It would get the total warm load down to less than 1 KB.
https://www.ubuntu.com/desktop
Total download size is 6.87MB and over 6s to render it, for a page with some nonsense overview text, and four pictures. Completely ludicrous.
suggests that the images aren't that bad, only one image is unoptimised, and you'd only shave off a meg from the final size.
Example: https://fontawesome.com/icons/accessible-icon?style=brands
12.75 seconds to load 8.22 MB of data about... a single icon.
I don't like the NYTimes website, but I like their reporting. If a ton of JavaScript is the price, I'll grudgingly take it. If there's a better way to pay, I'll gladly take that. But this article doesn't provide one, making it nothing more than navel-gazing.
I'm entirely serious. If there's enough people like you, there's a good chance that it'll be noticed.
I tend to think that websites are under-optimizing for responsiveness, though I confess that I don't have evidence for that claim. However, I also think that the kind of puritanism on display in this article requires an amount of work that would be a waste (again, no evidence).
They also probably don’t care because they just signed onto the latest “unlimited” data plan with their service provider.
So there probably aren’t enough people who understand the problem to make NYT notice (or care) due to boycotting.
Regarding your last point: a waste for whom? AFAICT the only people benefitting from sticky/engaging services, highly instrumented frontends and downright dark patterns are the people extracting wealth, either directly from subscriptions (not so bad) or, in a much grander sense IMO, data brokers (bad, real bad).
You might be right that not enough people will change their behavior to make a difference. And if so, tough luck. You and I aren't entitled to a news outlet that meets our latency requirements. We are entitled to complain on HN, but no one will really listen.
Of course you also benefit via reading the news, having reporting on official corruption, and all that jazz. Contrary to your snark about wealth extraction, media outlets are typically losing money and cutting back on reporting. The NYTimes is in a better position than most, but in general, the problem is too little money, not too much.
It would also be nice if we could have browsers restrict page size. That is, "hey, server, I'll only accept your page if it's less than X size." That'd be nice because then developers could get some actual feedback.
They kind of do: https://developers.google.com/speed/docs/insights/rules
I don't think anyone disagrees with the theory, it's the reality we have to deal with.
Those little social buttons that track every user and nobody ever clicks? You're going to have to spend as much time making the case to your boss why they're a bad idea as you would simply implementing them. Ditto ad spam, interstitials, sticky banners, and the like. And if the UX is bad but conversions increase, good luck.
These sorts of guidelines are great for small sites you control yourself. The chances of being able to follow them, even if you give a shit, on a corporate site where conversions put food on the table, is essentially nil.
Cookies are for keeping logged in state. They are not needed to display html.
But I don't need Forbes so it's ok.
I've looked at Piwik/Matomo and it looks pretty good. I've also been looking at NGINX Amplify, but that is more web server metrics rather than "analytics" and it's SaaS of course.
You'd think that there would be tons of NGINX plugins for stuff like this, but I haven't found any good self-hosted ones. I really would like to avoid running heavy JS on pages that are <10KB.
It’s not self-hosted, but it’s fairly lightweight.
That's hardly fair, Google has been advocating the same web optimization techniques that were listed as part of their Google Lighthouse initiative. I know it's fun and trendy to hate FANG, but you could have got the same recommendations if you opened up Chrome dev console and went to the Audits tab.
Otherwise I'll just dismiss this as the same cloud-oriented geriatric yelling that Hacker News has been upvoting for the last 15 years, to absolutely no purpose or result.
This is damn hard to beat, even with other reasonably written multiplatform toolkits like Java FX or Qt.
Also, a web page is its own environment, not intended to blend in. With "native" apps, there's always a bunch of "...but not native enough" complaints. (My idea is that some apps should explicitly aim to look alien and their own, without making attempts to fit in, like e.g. Photoshop or Blender do.)
With Java FX, you have to have the user install a recent JRE. With Java 9, though, I suppose you can make one fat binary with only the relevant parts of JRE and you code strung together, and the rest removed. (This has security implications, though.)
Qt means C++ which is a pain for many reasons, or e.g. Python which is a pain to distribute, though this can be alleviated (pack everything into a single fat binary). You still have to have a build per platform.
I just suppose that Web tech expertise is easier to come by, and a Web product faster to produce, at least initially. This trumps great many reasons from the business perspective.
Well played!
That website is an assault by design. And it looks like a lot of people don't really notice, or even mind, being assaulted by it.
First world problems...