
Bloated - janvdberg
http://fabiensanglard.net/bloated/index.php
======
mhink
With regards to the "usually a news site" part, somebody put me onto CNN's
"lite" page the other day, and it's honestly a freaking joy to use.

[http://lite.cnn.com/en](http://lite.cnn.com/en)

On the other hand, I think there's definitely a case to be made for rich,
application-like presentation of content, when it _enhances the delivery of
information_. For instance:

[http://www.r2d3.us/visual-intro-to-machine-learning-
part-1/](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/)

The problem is that everyone dreams of making something cool like the latter,
when their actual content is much closer to the former.

~~~
romwell
>somebody put me onto CNN's "lite" page the other day, and it's honestly a
freaking joy to use.

That's neat, but I think having this with some lightweight, web-optimized
static images would make this better without being detrimental to lightness.

Sometimes a picture does say a thousand words. A photograph of a person being
interviewed is something that adds a lot to an article. Plus there's the whole
photojournalism aspect that's lost in only keeping text.

It's not the images, per se, that make heavy pages heavy, after all. It's tons
of JS that pulls in FSM knows what.

~~~
jodrellblank
_a photograph of a person being interviewed is something that adds a lot to an
article._

Does it? It seems that it ought to add nothing to the content - unless the
content specifically references their appearance.

As well as that, unless it's a person you can google independently (like a
head of state, or large company CEO) there's very little chance you can know
whether the image is actually the person being interviewed, and even less
chance you can tell whether it was /this/ interview. What you do know is that
the image will have been posed, chosen from a lot of candidate images, and
quite likely edited after that.

It might feel good to recognise and see a human face, and therefore "add a
lot" from the publisher side - exploiting that sense to make people click and
keep people there longer - but that's not quite the same.

~~~
narag
_Does it? It seems that it ought to add nothing to the content_

"Add"? It's a part of the content. It's been in paper for more than a century.

------
iforgotpassword
This feels like the trillionth time I read a rant like this, but that doesn't
make it less true or important.

I really wonder from time to time if it's just me, having become and old
grumpy "get off my lawn" grandpa unable to cope with the world keeping turning
and moving forward.

"You can't write everything from scratch every time"

"That's just how it's done today"

"Cmon, people aren't running IE5 on a pentium 2 anymore"

"SPAs are so much better UX. Everything should be an SPA!"

 _heavy breathing with red face_

It's funny how this guy is complaining about a 7 year old laptop; any non-
flagship mobile device from 4 years ago is almost unusable on the web.

~~~
zzzcpan
As long as advertising corporations keep control of your web browser, the
experience will always be optimized for ad tech and maybe some other megacorp
interests, but definitely not for you. That's the problem.

I imagine a web browser actually made for the user will try hard to extract
content from web pages by default, render them with decent consistent UX and
not blindly let third parties display and execute any crap they want. There is
no reason to render say articles with comments in thousand different ways for
thousand websites. And no reason it can't be blazing fast on RaspberryPi.

~~~
narag
Agreed, current add-ons are clearly not enough.

------
firefoxd
Kudos to the author. I think if every technical person with a blog takes the
time to reevaluate it will be a good start.

Over the years I've reworked my own blog to not use any third party
dependencies (bootstrap, jquery, etc.). And use very few images. My last thing
is to get rid of Google Analytics, which piwik (now matomo) has failed to
replace but hope is not lost. I also discovered that GA does not respect
DoNotTrack, so I modified it to not load in this case.

At the very least, all HNers with blogs should concider doing this.

~~~
majewsky
I don't have any analytics on my blog. Can you explain the benefit of GA over
Piwik? What genuinely useful insights does GA give you (specifically for a
personal blog) that Piwik does not? (I assume that the info from Piwik would
be similar to what you get from computing stats from the web server access
log.)

~~~
firefoxd
It's not the insights, I think piwik got that part right. The problem is when
traffic increased piwik and the server it was on could no longer support it.

~~~
chocolatkey
Agreed, piwik with lots of traffic is a major problem that can slow the server
to a halt (for those of us without a massive budget)

------
wink
The sad thing is that even if 100% of the people with personal websites would
do the same, it probably wouldn't change much. And yeah, I'm firmly in the
"this old computer should definitely render web pages if it's good enough to
run video games" camp and if the people working on current browsers argue that
it's complicated, with all the scrolling and JS and stuff.. Well good
riddance, web of 2018 - it was absolutely fine in 2008.

~~~
saagarjha
> The sad thing is that even if 100% of the people with personal websites
> would do the same, it probably wouldn't change much.

Why not? A significant portion of my web browsing is done on people's personal
websites, since they often have cool things to share. If I'm going to get
better performance on these websites, I might change my browsing preferences
to favor these even more heavily.

~~~
wink
of course I don't have any real data, but I'd bet a lot that most of the
internet's non-automated (i.e. human) web traffic is to big publications and
organizations. The "private web" is kind of dead. (Let's assume a generous 20%
usage, which is still kinda dead).

So _your_ web traffic might be to personal websites (mine is, too) - but we're
a minority I guess.

So while the goal is laudable, even a 100% change would probably be a result
of 20-30% of the web, I guess even less.

~~~
vram22
>So your web traffic might be to personal websites (mine is, too) - but we're
a minority I guess

But then that would be an improved situation for the two of you, right? (And
many others like you, including me.) So it would still make some difference to
those who care.

The overall load on the web would still be higher than it could be, though,
due to the bloat.

Small improvements should not necessarily be neglected or dismissed, though.
Otherwise it becomes like a symptom of the original problem being discussed.

~~~
wink
Sure, especially as it won't hurt. I think I've been doing pretty good with
the websites I control - but I don't have many visitors (which is fine).

Everything is 'every little bit helps' and it shouldn't make you listen to the
naysayers (e.g yours truly) - I'm just a little disappointed because I think
it will not make a big difference. At least my conscience is clear ;)

~~~
vram22
Got you now, makes sense.

------
butz
Great initiative. Site loads fast, text is readable, adblocker has nothing to
block - what more could you want from website? You might want to look into
optimizing SVG files, as Inkscape by default leaves a lot of unnecessary
metadata.

~~~
RazrFalcon
I came here to write the same. svgcleaner[1] will reduce it from 8.4KiB to
1.3KiB (compressed with zopfli). Which is 85% smaller.

And a manually crafted one is just 477B. And 261B compressed. Which is just 3%
of the original.

Now we can talk about bloatedness.

    
    
      <svg width="601" height="751" xmlns="http://www.w3.org/2000/svg">
        <rect width="600" height="750" rx="38" fill="white" stroke="black"/>
        <rect x="16" y="16" width="568" height="718" rx="24" fill="none" stroke="black" stroke-width="15"/>
        <text text-anchor="middle" font-family="Arial" font-size="150" font-weight="bold">
            <tspan x="300" y="200">FPS</tspan><tspan x="300" y="350">LIMIT</tspan><tspan x="300" y="660" font-size="350">15</tspan>
        </text>
      </svg>
    

[1]:
[https://github.com/RazrFalcon/svgcleaner](https://github.com/RazrFalcon/svgcleaner)

------
guessmyname
This is why is I keep using RSS even though many people say it's dead.

I even went ahead to create a curated feed [2] for Hacker News to pair with my
RSS reader [3].

I stopped doing casual web browsing years ago when many web owners started to
bloat their websites with an extravagant amount of ads, excessive JavaScript
code, and unnecessary "enhancements" _(like custom scrolling experiences and
the like)_. Nowadays, websites like Hacker News, the old Reddit interface,
Craiglist, and similar are the only ones that I find myself visiting, just
because they are among the few hundreds that still load with server-side
generated HTML and the UI is fairly minimal [3].

It doesn't helps much that the same front-end programmers that helped increase
the bloat in today's web are the same group of programmers building _"
modern"_ desktop software, looking at you Electron. They may call it
convenient and productive all they want, but to me —and many others— it just
means they are lazy and cheap. Not long ago I read an article from the author
of TablePlus [4] explaining how he decided to build his app using native
libraries even weighing the pros-and-cons of other GUI frameworks, including
Electron, coming to the conclusion that slowing development time was worthy if
the resulting product was performant.

Because at the end who is paying the bills?

• A customer that enjoys a fast and resource efficient desktop experience?

• Or the front-end programmer who's happy for using JavaScript to develop the
app?

Think about it.

PS: almost 100% [5] :-)

[1] [https://github.com/cixtor/rssfeed](https://github.com/cixtor/rssfeed)

[2] [https://reederapp.com/](https://reederapp.com/)

[3] [https://thenextweb.com/dd/2017/06/29/why-are-some-of-the-
ugl...](https://thenextweb.com/dd/2017/06/29/why-are-some-of-the-ugliest-
sites-on-the-web-also-the-most-popular/)

[4] [https://tableplus.io](https://tableplus.io)

[5]
[https://developers.google.com/speed/pagespeed/insights/?url=...](https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffabiensanglard.net%2Fbloated%2Findex.php)

~~~
cdcfa78156ae5
> coming to the conclusion that slowing development time was worthy if the
> resulting product was performant

What I don't get is where these claims of faster development time come from.
Toolkits like Qt make it way faster and easier to build UIs than trying to use
HTML/CSS garbage.

------
jokoon
I use a similar design for my website, it has been like this for like 10 years
now. I still tweak some php 5 code, and things just works on some free
hosting.

The problem with the web is how permissive it is, so it gets bloated, and
since online advertising, this trend is still going.

[https://en.wikipedia.org/wiki/Wirth%27s_law](https://en.wikipedia.org/wiki/Wirth%27s_law)

> is a computing adage which states that software is getting slower more
> rapidly than hardware becomes faster.

What bothers me is how the web is making it impossible to run on modest
smartphone, or how it's burning your battery into oblivion.

There might be solutions to this, like basically pre-parsing HTML and sending
the parse tree, or re-factoring HTML and css rules into something more lean,
or just rebuilding a new document format from scratch that is readable by
humans, like markdown as a syntax, and rendering it directly without HTML.

We're often reminded about Knuth's "95% of the time", but HTML is really a
crying example of a bad designed document format, which turned into a black
hole of computing complexity since JS has access to the DOM.

Frankly web development disgusts me, and I avoid it as a career path as much
as I can. We rely on web browsers and search engines way too much.

------
giovannibajo1
I think the race to make the web an application platform is responsible for
this. Web features are growing every day trying to match native apps, and the
media guys leverage them to make us sad.

We really need to split the web stack in two somehow, differentiate
consumption sites with some basic interaction from full blown applications,
handle them completely separately down to the operating system integration
level. Right now a web application like Facebook runs in a tab (?) or worse is
shipped with a whole browser instance (eg Slack). That’s something wrong here.

A Google-AMP like version of the web for things that are not GMail or Facebook
(99% of the web, especially in the long tail) is probably good enough.

~~~
kllrnohj
Well, it's also that the "web app" push only ever concerns itself with
_features_ never with _performance_.

You'll frequently see things like "native apps can do X, so the browser
should, too" where X is camera, opengl, files, etc...

Not necessarily wrong, but you basically never see anyone pushing the
boundaries of performance. I can run games at native resolution in excess of
100fps all day long, but I can't scroll a fucking web page at 60fps? And the
round-trip communication with a webworker, the only mechanism whatsoever to
leverage the other 75-95% of the system's CPU, is measured in 100s of
microseconds to _milliseconds_?

Being an app platform isn't just features, it's also getting the fundamentals
to perform well. And the web just... doesn't.

------
Scaevolus
WebP only works on ~73% of browsers
([https://caniuse.com/#feat=webp](https://caniuse.com/#feat=webp), no
Firefox/Safari/Edge support), so it's a little early to switch all your images
to it. MozJPEG is a good JPEG compressor.

~~~
oliv__
You can use the HTML5 <picture> element to add a fallback jpeg for all
browsers that don't currently support Webp

~~~
mh-cx
Even better: you can let your image server check the accepted formats in the
request header and send webp content transparently instead of jpg. Then you
don't have to change your markup at all.

Browser's don't really care about file extensions.

[https://github.com/uhop/grunt-tight-
sprite/wiki/Recipe:-serv...](https://github.com/uhop/grunt-tight-
sprite/wiki/Recipe:-serve-WebP-with-nginx-conditionally)

~~~
oliv__
Oh. Thanks! I didn't know that was possible

------
ux-app
The new Reddit site is a major offender. After about 5 pages worth of
scrolling FF becomes janky (takes Chrome about 10 pages, but i'm off Chrome
now). Once the jank sets in closing the tab leads to a UI lockup as FF
presumably tries to unload all the garbage in memory.

At least they still have old.reddit to fall back to.

~~~
firefoxd
I guess the new design is curing the addiction to reddit.

------
romwell
I am dreaming of a solution to bloat where _all_ mainstream browsers would be
throttling per-tab CPU/memory/bandwith usage to Pentium III-on-DSL-circa-2001
levels by default.

(The "full speed" option should be there to keep power user from switching,
but it should not be obvious to, say, 50% of users).

This should be pushed as a _feature_ : now your browser helps make your
computer work faster; any slowness in page loading is to be blamed on the
websites.

This will not affects sites like Hackernews, but will bring a lot of websites
to a standstill - and will force them to slim down.

~~~
cesarb
A perhaps more workable solution would be to have per-tab indicators of total
bytes downloaded, peak memory used, and total CPU time used (the first one
already exists as part of the developer tools, but it's hidden by default).
People on fast computers and fast networks do not feel the weight of bloated
pages; making it visible to everyone provides an incentive to reduce it.

~~~
caf
Perhaps summarised as "the percentage of your battery this tab has consumed".

~~~
ericst
I really think that you are onto something there. Or maybe a bloat index
calculating the ratio between user content and downloaded content. Like 1kB of
text but with 2 MB of JavaScript/CSS etc would give you an index of 2000
whereas if you only had 23 kB of JavaScript/CSS etc, it would 23.

------
ArtWomb
Kudos, Fabien! Your site has been endlessly informative on my own graphics
programming journey. I think you can include a donate button and maybe raise
some funds toward a new laptop or nvidia turing gpu ;)

One site I use multiple times a day that I think has decent information
architecture is FinViz: The Stock Screener. High resolution quotes, charts and
heatmaps. Updated on intervals of a few seconds. With lots of aggregated news
and blog links.

This cryptocurrency performance page is a great example. cryptowat.ch and many
other tools run high cpu loads. With an emphasis on saturating the information
space with real time depth of book, exchange arbitrage, analytics, etc. When
all you really desire is a quick snapshot of relative price action.

[https://finviz.com/crypto_performance.ashx](https://finviz.com/crypto_performance.ashx)

------
kehrlann
Lighthouse (now the Chrome dev tools "audits" tab) makes it really easy to
trim down your site to the bare minimum. I've using on my personal blog, it's
actually quite fun to work within constraints :)

------
golergka
Disable Javascript by default. That's it. Single one-button plugin made my web
experience incredibly better, and almost all of the news and blog sites became
much cleaner and more responsive.

------
dysoco
I agree with his ideas but I still think I'd rather have his old page back
[1].

I think my main issue is the monospaced font which is good for code but it's
not very pleasant in the eyes when we're talking about a blog post or any
paragraphs.

[1]
[http://fabiensanglard.net/Compile_Like_Its_1992/index.php](http://fabiensanglard.net/Compile_Like_Its_1992/index.php)

------
wldlyinaccurate
I used to work for the companies that build these bloated websites. I spent a
year rebuilding the BBC News front page to make it not-awful[1] but it felt
like I was fighting against the rising tide.

I've since moved on and now work at SpeedCurve. It's pretty motivating to see
so many of our customers making their websites faster and generally better for
the people who use them. It's also pretty depressing to know that the web
overall is spiralling down the drain and getting heavier slower every year[2].
What a shit show.

[1] [https://wildlyinaccurate.com/introducing-a-faster-bbc-
news-f...](https://wildlyinaccurate.com/introducing-a-faster-bbc-news-front-
page/)

[2] [https://speedcurve.com/blog/web-performance-page-
bloat/](https://speedcurve.com/blog/web-performance-page-bloat/)

------
matt4077
If people actually cared, websites would be lighter. But they don't.

Yes, this community here does care, much like the experienced woodworker who
nods approvingly when he sees <some old-fashioned, difficult, and slightly
more elegant way to do something... I really have no idea about woodworking>.

Even in cases where people might agree that lighter pages are preferable, it's
just not a priority.

I know that might appear wrongheaded. But I assure you there are dozens of
things you do every day that would make a subject matter expert's hairs fall
out: that's not how you're supposed to brush your teeth ... you have to wait
for the engine to cool before measuring oil ...

...and, closer to home: websites should be accessible to people with impaired
vision, among other things. This rant, however, scores rather low. It might
seem trivial, but not adding an alt description to explain the image joke can
make people feel excluded.

~~~
jodrellblank
_But I assure you there are dozens of things you do every day that would make
a subject matter expert 's hairs fall out: that's not how you're supposed to
brush your teeth ... you have to wait for the engine to cool before measuring
oil ..._

I don't even have 10,000 visitors each day watching me measure the oil in my
car or brush my teeth. Neither are they /all/ paying extra in electricity and
battery life and wasted time watching me do it badly.

What in my everyday life do I do so badly that is also an externalised cost on
thousands to millions of other people, which I profit a lot more by doing
badly?

~~~
matt4077
Yeah... that's kind of my point: your indignation just seems a little
excessive, considering data charges do not in reality range in the top 100
problems people have.

If you really can't fathom why this doesn't get a Special Prosecutor: Remember
that every year, tens of thousands die in the US alone because their doctor's
handwriting was so bad they got the wrong medicine! Ask your pharmacist what
they think of people diddling their life away minifying CSS while this
atrocity continues unabated!

------
jasonhanley
Dare I say there's a mini-movement starting? :D
[https://www.jasonhanley.com/blog/2018/09/making-websites-
eff...](https://www.jasonhanley.com/blog/2018/09/making-websites-efficient-
again/)

Here's hoping...

------
zylepe
If Google factored page weight into ranking and it would start to move things
in the right direction.

------
keyle
I'm going to take this opportunity to talk again about the new Gmail and how
horribly bloated it is... Scrolling skips frames all the time. And now you're
forced in the new version, you can't 'go back' anymore...

------
namanyayg
Does adblock + custom element filtering not help against such sites? If every
additional feature that takes up more computing resources provides a slightly
higher chance to retain the average user and thus make more advertising
revenue, I don't see why large sites would _not_ riddle their sites with such
features.

Of course, it's sad that happens; but I think adblock sufficiently solves
this.

As a side-note, I recently installed DNS66 on my android device and the
internet is _much_ faster. Using the mainstream web without adblock seems to
be difficult these days.

------
yeezul
I for one absolutely agree with you that the web has gotten too bloated,
especially news websites, and I salute your initiative for "debloating" your
blog. This is a path that more of us should follow.

I think Google's AMP project is a step in the right direction, but it seems to
me that it's not adopted enough.

~~~
lvoudour
Curious as to why you think AMP is a step to the right direction.

~~~
giovannibajo1
Because the pages load fast and are not bloated, which is the point of this
article.

Unfortunately Google has bound it to other questionable practices like hosting
on their domain, but it’s still a step on the right direction. We need
something like that plus a way to cache it on the edge servers in a portable
fashion so that any CDN like Cloudflare could pick them up.

~~~
yorwba
AMP is not bound to hosting on Google, Bing now has an AMP cache as well:
[https://blogs.bing.com/Webmaster-
Blog/September-2018/Introdu...](https://blogs.bing.com/Webmaster-
Blog/September-2018/Introducing-Bing-AMP-viewer-and-Bing-AMP-cache)

And since you mention Cloudflare, I searched a bit and found
[https://www.amp.cloudflare.com/](https://www.amp.cloudflare.com/)

There are problems with AMP, but Google exclusivity is not one of those
problems.

------
failrate
@fabien thank you so much for this. I was half-expecting one of your usual
dissection of the architecture, but I dont want anythibg coming between you
and the release of your Doom book, which I plan on buying at least 2 copies.

------
ThomaszKrueger
In my experience outline.com does a bang up job of getting all that clutter
out. I am not in any way affiliated with them and don't even know how they
monetize but I hope they stick around for as long as possible.

------
agumonkey
Kudos

ps: adding to the heartbreaking side of the web, when you use google cache in
text-only, you see how often there was nothing to read (almost)

------
acobster
I love the initiative and the execution. Nice job! I feel like I'm becoming a
bigger fan of brutalist web design all the time. :)

------
mxuribe
I applaud you for doing this for your blog; everyone should at least do their
best to slenderize their web properties. Kudos to you!

------
tilo
What about the web browser itself?

AFAIK chrome and other modern browsers use resource-consuming features like
preconnect.

