
The Website Obesity Crisis (2015) - MilnerRoute
http://idlewords.com/talks/website_obesity.htm
======
skylark
The "website obesity crisis" is related to the rise of single page
applications and the growing popularity of frameworks like React, Vue, and
Angular.

Having worked on many SPAs in my career, I've noticed a similar pattern which
has happened on essentially every project I've worked on. I call it the SPA
descent into madness.

Initially, a SPA is probably the fastest way to start prototyping a UI. You
don't even need a server - just throw some HTML, CSS, and JS onto the page,
add some mock data, ReactDOM.render, and you're off to the races. All of the
UI logic is handled by your frontend framework, and the backend exposes an API
the frontend interacts with. Peachy.

But every non-trivial project hits an inflection point where things start to
get tricky. In a classic server rendered website (e.g. Ruby on Rails, Django,
etc.) you can add as many features as you want because the size of the server
binary doesn't really matter. This isn't the case for SPAs - every feature and
every additional dependency bloats the size of the JavaScript bundle.

To combat this, developers do route-based code splitting, but oftentimes this
isn't sufficient - critical pages usually have the most features stuffed into
them, which means they can't be reduced in size enough. Server side rendering
can be effective, but now your data model needs to exist on both the client
and server, so hopefully you took this into consideration. If not, it's common
to run into situations where your application's model layer is partially
duplicated across your client and server.

Are all of these problems solvable? Sure. There are great, performant SPAs
with millions of lines of code. But let's be real - most organizations wont
solve these problems due to lack of engineering ability, time, or politics.
The path of least resistance with SPAs is to shoot yourself in the foot on
performance, so that's what tends to happen. It's the reason you see these
insane 3MB bundles on text based webpages. They started with good intentions,
but never got the love necessary to make a large SPAs work well.

All this to say: Make sure you're picking the right tool for the job. SPAs
have a low upfront cost, but can have unexpectedly high long term costs. A
sprinkle of JavaScript on top of a server rendered page, with a few tricky
components backed by a light framework like Inferno, Mithril, or HyperHTML, is
oftentimes all that's needed.

~~~
onion2k
The latest version of React[1] + React-DOM[2] is approximately 32Kb gzipped.
If SPAs are bloated it's not due to React.

[1]
[https://bundlephobia.com/result?p=react@16.5.0](https://bundlephobia.com/result?p=react@16.5.0)

[2] [https://bundlephobia.com/result?p=react-
dom@16.5.0](https://bundlephobia.com/result?p=react-dom@16.5.0)

~~~
skylark
You're absolutely right - SPA bloat isn't directly due to the weight of the
underlying frameworks.

I think what I was touching on more was the fact that SPAs generally encourage
engineering practices which lead to more complexity and page bloat, and that
many teams don't think about these maintenance difficulties when initially
picking their tech stack (as proven by the number of bloated, slow SPAs on the
internet.)

A well engineered SPA won't suffer from the issues I outlined in the original
post, but getting to that point has a non-trivial cost which has to be
considered. As usual, it's all about picking the right tool for the job -
teams need to make sure they're getting a net benefit from using this sort of
application architecture vs. a server oriented one.

------
4ws
The issue I have with commercial web design is the lack of restraint. Just
because you’re able to do something doesn’t mean you should. Rare is the
commercial web designer able to just leave the damn content alone. A good
website is unnoticeable to the user, allowing them to focus on the content.
Instead commercial web design has always managed to find creative ways to make
the user fight the website to access the content.

~~~
sdx23
So true. Even for wikipedia (which is not that bad at all) from a readability
viewpoint it still gets better using the mobile version. Compare e.g.
[https://en.m.wikipedia.org/wiki/Web_design](https://en.m.wikipedia.org/wiki/Web_design)
and
[https://en.wikipedia.org/wiki/Web_design](https://en.wikipedia.org/wiki/Web_design)

On the other hand, with the mobile version navigation links are not as easily
accessible.

~~~
yesenadam
I just discovered that a couple of days ago, clicking an m.wikipedia link from
HN on my desktop.. _Huh? Where am I? This looks so good, can 't be wikipedia..
ohhh its the mobile site?!_ It looks a million times better, hard to believe
the huge difference.

------
jazzyjackson
This article was a big impetus for me to learn web development: the shear
madness of waiting several seconds to read a 140 byte tweet!

The megabytes of ad and tracking javascript loaded for text articles of a few
kilobytes - working in advertising exposed me to the magnitude of internet
traffic that is dedicated to auctioning advertisements and tracking users
thereafter. The weight of mass surveillance is stifling our networks. I really
can't wait to move on from this era.

------
jokoon
That's why I don't like web technologies in general, HTML, javascript, the
DOM. They allow things like angular and all of those javascript bloated blobs.
It also allows to track you, and show ads than are on another server.

If you look back at why web techs thrived and prevailed, it was essentially an
adverse effect of microsoft business practices. HTML and js is a gate that
allows developers to build application that run on a linux server, and be used
on a windows client.

HTML was never designed for web applications. I don't understand why people
cannot stop using js and the DOM seen how slow it is on android. HTML is an
ambiguous language which is also why rendering it is slow.

I'm sure I'm missing a lot of job opportunities by avoiding web dev jobs, but
I don't care.

This website obesity is also linked to Wirth's law:

> Wirth's law, also known as Page's law, Gates' law and May's law, is a
> computing adage which states that software is getting slower more rapidly
> than hardware becomes faster.

------
navait
Things I'd like to ask the author:

The problem has only gotten worse in the last 3 years, from what I've seen.
Has the adtech industry gotten larger in the meantime? Has their surveillance
technologies delivered on their promises? Do you still think the adtech
industry will implode?

~~~
jazzyjackson
Not the author, but ad tech is making more money than ever, so I can only
surmise that they're pushing more traffic and tracking more users. That is,
after all, how they make money.

IMO as a lowly developer surrounded by data scientists, the mass intake of
user data (the less anonymous the better!) only served as a canvas to paint
data-massaged-stories onto to make presentations to clients of how effective
their advertising has been, and that they should definitely renew their
contract, because numbers don't lie!

Don't get me wrong, there are some really talented statisticians developing
new analysis techniques to track what a person does after being exposed to a
message -- but that knowledge is probably used more effectively by
intelligence agencies than the marketing managers trying to snag their next
big client.

My impression is that the more data they collect, the more it becomes clear
that advertising didn't make a meaningful difference in purchase habits.
Anything to the contrary is funny numbers made up by the people who sell
advertising.

I think the industry will implode someday, but its just a gut feeling. Nothing
scientific ;)

------
bcaa7f3a8bbc
For reference, this page on Hacker News has a size of 6.98 KiB.

~~~
AnsisMalins
The difference vs the rest of the web is so stark, I don't read the sites
linked by HN posts anymore. I just read the HN comments.

It's not just size, but also JS execution time, reinvention, poorly, in JS, of
features the browser has natively, and endless modals.

------
rado
Crazy. It doesn’t have to be like that. Lots of essential features can be done
in a small package:
[https://radogado.github.io/natuive/#](https://radogado.github.io/natuive/#)

~~~
sdx23
Beg your pardon: You say "essential features" and your page lists things like
"Animated anchor links".

In my humble opinion the problem is the common misconception of what is
"essential". Which in the end maybe only consists of the answer "the content".

~~~
rado
Slider (carousel), modal window, tabs, drop-down nav, tooltip etc.

------
baxtr
_I hate to do it, but I have to call out responsive design._

While I agree on the content of the entire article, the website itself is no
easy read on a mobile device.

~~~
saagarjha
Responsive design is great, but many people seem to forget that usually this
just comes “for free”, as long as you don’t put very strong constraints on how
your content should look.

~~~
kristopolous
If you're willing to deal with HTML's native document flow, which is quite
good for literature and scholarly material.

I kinda wish there was a robust second non-commercial web with a number of
technical restrictions designed to keep things from descending into crap. Not
give people enough rope to hang themselves with.

Tor's onion sites are the closest we've got, most have zero JavaScript, zero
tracking and zero ads. It provides an amazing vision into the web we lost.

~~~
jazzyjackson
Do you know about Gopher ?

It is quite refreshing, if a little unintuitive.

See here:
[http://gopher.floodgap.com/overbite/relevance.html](http://gopher.floodgap.com/overbite/relevance.html)

~~~
kristopolous
yeah sure of course ... has there been a renaissance of gopher? Last time I
checked (about 8 years ago or so) things were effectively last updated in the
late 90s.

IIRC the final users were mostly professional librarians. I believe gopher
support was removed from firefox about half a decade ago.

so according to
[https://en.wikipedia.org/wiki/Gopher_(protocol)#Server_censu...](https://en.wikipedia.org/wiki/Gopher_\(protocol\)#Server_census)
it looks like there's evidence of new servers and content ... albeit a small
velocity.

------
yesenadam
That was really great, thank you! And I loved the format; I'd not seen a talk
turned half so well into a webpage before.

~~~
ribasushi
Then you will probably enjoy these even more ( same author ):
[http://idlewords.com/talks/](http://idlewords.com/talks/)

Especially
[http://idlewords.com/talks/web_design_first_100_years.htm](http://idlewords.com/talks/web_design_first_100_years.htm)

I very strongly recommend listening to the actual talks afterwards as well -
pure gems.

~~~
yesenadam
I just saw this... Have already read 4 or 5 of his talks since my last
comment. :-) What a great writer. Funny too. Ok will do, thanks.

------
andrewmcwatters
I remember this web page. What's hilarious is that practically none of it uses
semantic markup and it's all rendered in a giant table, so you can't use
browser-native functionality like Safari Reader.

The page also uses so many images the page weight comes in over a meg.

It's all hypocrisy.

~~~
jonahx
The images are part of the _content_ here. The article attacks pointless
obesity -- not large web pages period. Indeed, here is the _first paragraph_ :

> Let me start by saying that beautiful websites come in all sizes and page
> weights. I love big websites packed with images. I love high-resolution
> video. I love sprawling Javascript experiments or well-designed web apps.

Also, the article never mentions the word "semantic" or the best practices
around markup.

There is no hypocrisy here.

~~~
andrewmcwatters
Well then the sprit of the whole thing is just worthless. Why focus just on
page weight? Why not also whether or not I should see tons of thumbnails I
don't care about (which _is_ pointless obesity), or attention to using the
technology correctly in the first place?

Taking a single concept by itself out of all of web development and advocating
for it is such a pointless game.

All the images are meme-tier garbage. It's such a distraction. It is
hypocrisy.

