
Conservative web development - ofrzeta
https://drewdevault.com/2018/09/04/Conservative-web-development.html
======
coding123
There are two different kinds of web development:

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?

~~~
zelon88
Your math sounds wrong, so I did it on paper and proved that it's wrong.

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.

~~~
fovc
User expectations are very different for when they are starting work vs when
they are in the middle of something. If it's really a SPA you can also
disguise the load times with optimistic updates and such

~~~
chooseaname
Don't people still have data caps?

------
rauhl
Y’know, folks complain (with some justification) that Bitcoin wastes a massive
amount of energy globally. But almost noöne uses Bitcoin, or mines it; I
wonder how much energy is wasted on transporting & executing useless
JavaScript. It’d be interesting to know how it compares.

~~~
monadgonad
Your spelling of “noöne” is commendable - I love the rare occasions when I see
things like coöperation these days - but “no one” is definitely two words.

~~~
ramses0
Is there a term for using an ö like this?

~~~
impirius
It's a diaeresis, used when a second consecutive vowel is pronounced in a
separate syllable. The New Yorker likes to use them.

------
danmg
│ Today I turned off my ad blocker, enabled JavaScript, opened my network
monitor, and

│ 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/...](https://damng.github.io/hackernews-rss-with-inlined-
content/output.rss) [2] [https://codezen.org/canto-
ng/](https://codezen.org/canto-ng/) [3] [https://github.com/damng/hackernews-
rss-with-inlined-content](https://github.com/damng/hackernews-rss-with-
inlined-content)

~~~
specialist
I just tried [http://nytimes.com](http://nytimes.com) with both Lynx and
Safari "in Lynx mode" (disabled JS, CSS, Images).

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.

~~~
danmg
yeah lynx needs a fork that uses dom-distiller to render things off screen,
and then just uses its own renderer to show the final content.

------
theandrewbailey
> The heaviest page, the marketing page, today weighs 110 KB with a cold
> cache, and 4.6 KB warm. (more comparisons between cold and warm loads)

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....](https://bitsup.blogspot.com/2016/05/cache-control-
immutable.html)

I suggest caching the main HTML, too. It would get the total warm load down to
less than 1 KB.

------
overcast
This is my most recent favorite.

[https://www.ubuntu.com/desktop](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.

~~~
PunchTornado
the 3 images have over 5MB. no optimization at all I assume.

~~~
oblio
I wish all common CMSes just did this automatically. Or do they do it,
already? (WordPress, Drupal, etc.)

~~~
CM30
They've all at least got convenient extensions you can install to auto
optimise images, like with EWWW Image Optimizer or Smush Image Optimiser for
WordPress.

------
hyperpape
Not a word about why any of this matters.

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.

~~~
trolleyhacker
It matters because you (generic you, not you specifically) don't pay my mobile
bill.

~~~
hyperpape
Then don't read their website.

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).

~~~
sixstringtheory
The average NYT subscriber probably doesn’t understand these intricacies
around how websites are built and delivered to their phones, or how network
effects and scaling affect the infrastructure needed to do so.

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).

~~~
hyperpape
People notice when things are slow and annoying. They close the window and
don't look at it.

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.

------
rbinv
> And if anyone at Google is reading, you should try recommending these
> strategies for speeding up pages instead of pushing self-serving faux
> standards like AMP.

They kind of do:
[https://developers.google.com/speed/docs/insights/rules](https://developers.google.com/speed/docs/insights/rules)

~~~
Sir_Cmpwn
They do, sure, but they don't put any teeth into it. AMP pages get special
treatment in search results. It's not about promoting fast pages, it's about
promoting pages which buy into Google's self-serving AMP nonsense.

------
lbriner
So everyone should optimize their web pages? That's not really news. The fact
it happens demonstrates the real problems: lack of understanding of the people
uploading the content, real financial needs from ad suppliers (Beggars can't
be choosers), legacy software that won't be rewritten any time soon and a load
of other issues.

I don't think anyone disagrees with the theory, it's the reality we have to
deal with.

------
redthrowaway
Unfortunately, the extent to which these sorts of guidelines will ever be
followed is at most the extent to which programmers feel like putting in extra
effort over and above that required to meet business requirements, and will
usually require programmers to push back against business requirements in
order to achieve any headway.

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.

------
dbelchamber
Amen. I would also say that Forbes is another excellent example of the
ludicrous level of calls and hostile features.

~~~
PunchTornado
why would I want to read a quote of the day before reading the article I'm
interested in?

~~~
oblio
They also ban ad blockers and have a hugely hostile GDPR banner. As in "GDPR-
hostile".

~~~
some_account
Forbes refuses to even load the front page if it is not allowed to store
cookies on your computer.

Cookies are for keeping logged in state. They are not needed to display html.

But I don't need Forbes so it's ok.

------
colemannugent
On a related note, does anyone have a good recommendation for a lightweight
analytics solution?

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.

~~~
aparks517
I did a Shown HN on Mirrorshades a while back:
[http://getmirrorshades.com](http://getmirrorshades.com)

It’s not self-hosted, but it’s fairly lightweight.

------
benlorenzetti
This is a problem of economics more than design failure. The current
legal/technical system that has developed between ISPs doesn't charge parties
fractionally very well.

------
che_shirecat
> And if anyone at Google is reading, you should try recommending these
> strategies for speeding up pages instead of pushing self-serving faux
> standards like AMP.

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.

------
mike22223333
How do they make the money to keep the site up than. Server cost is like 5% of
the expenses. Journalist salaries, writer salary all that full time salary,
where do you get that from. No other business model exists.

~~~
mike22223333
And if any exists, not enough people are ready to commit to it to make it a
worthwhile investment.

------
camgunz
The Internet made copyable content essentially worthless, and we don't have an
answer for it yet. If you really want to solve this problem (ultra-bloated web
sites because of ad frameworks and what-not), you have to solve that, and it's
pretty hard. Honestly, it's probably the case that the only way to really fix
it is to nationalize it and fund it with taxes. Not ideal (conflict of
interest, obviously), but it's probably better than not existing.

------
commandlinefan
I still contend that silver-bullet-chasing is at the heart of a lot of web
bloat. You have a "startup founder" (or fortune 500 middle-manager) who
believes that he has a world-changing (or next-quarter revenue generating)
idea, he just needs a couple of grubby programmers to type it into the
computer for him. Now, he knows that these grubby computer geeks are far, far,
beneath him, and that anything they know how to do must be trivially simple to
do, he just didn't take the right classes in college to know which buttons to
press to make the world-changing computer thing happen. So the programmers
tell him it's going to take a few months. "A few months!" He explodes. "I need
this by Thursday! I thought you worthless lot called yourself computer dwee-
er, programmers!" So he casts them out of his sight and starts googling "how
to program really fast". He comes across Angular. He doesn't know what
"Angular" means, but google says it programs really fast, and google is
smarters than those dorks who can't even make a website in two days. So he
says, "here, use Angular, it makes things go really fast. This is the silver
bullet we're searching for". Of course, Angular depends on a few MB of
libraries - mostly because when somebody was creating a table controller or
whatever the hell for Angular, he or somebody who had some sway over him told
_him_ that these other dependencies would let him program real fast. And so
on, down the line, until finally something bottoms out into some actual
javascript that actually does something. But because making web pages load
quickly and be pleasant to use and not choke the internet infrastructure is a
"nice to have" but getting this world-changing thing "to market" is a matter
of life and death, that nerdy sounding load-testing shit is pushed off until
the very end until there's no time to do it and who cares because you can't
stand the sight of those slovenly programmers any more anyway and if they knew
what they were doing, they'd have gotten it right in the first place.

------
meztec
In addition to the technical concerns is the overall experience that is being
designed that requires this type of implementation. This type of ad, popup,
subscribe, video, etc... is ubiquitous across news/blogs.

------
luord
I remember when this was what progressive web development (enhancement was the
term) was. I still don't quite understand how it changed into meaning web
workers and all the caching and background process stuff.

------
Animats
What's a good web design tool that doesn't put in all this crap? Blue Griffon?

~~~
severine
Perhaps Bluefish?

[http://bluefish.openoffice.nl/features.html](http://bluefish.openoffice.nl/features.html)

~~~
Animats
That's a text editor.

------
ptx
So how does the trick with the CSS-only expandable details view work?

~~~
vkjv
[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/de...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/details)

------
jstewartmobile
I could write many awful things about the NYT. Misunderstanding the basics of
web optimization would not be one of them.

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...

------
stupidcar
Cool. Could someone just explain how to build
[https://app.moqups.com/](https://app.moqups.com/) or
[https://designer.gravit.io/](https://designer.gravit.io/) using only HTML,
CSS and server-side rendering?

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.

~~~
badsectoracula
TBH as a user i do not see a reason for these two to be running inside a web
browser. They'd be faster, more light on system resources, more capable and
less locked to their developers' whims as standalone desktop applications
(Electron monstrosities excluded).

~~~
nine_k
Web: write once, run everywhere, the user is guaranteed to have the runtime
installed.

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.

------
mike22223333
Your bill to isp does not pay the bill for my time and make me a profit. I
need to make money, and if you have a problem with my business model, you can
move on.

