
What should have been an IMG element became this - seapunk
https://twitter.com/csswizardry/status/1185604806901207045
======
danShumway
The hoops people are going through to justify this are crazy to me. The
comparison is not no-JS vs a business-capable website. They could serve a
static image tag that would load quickly, and then load the comments/content
around it. Progressive enhancement has been a well-known development pattern
on the web for a very, very long time.

The comparison here is, "serving your content, and then doing whatever the
heck you want", and "dynamically fetching all of your core content on the fly
after synchronously downloading and executing all of the auxiliary content
that >85% of your users do not care about."

I think Youtube is overengineered as well, but at least Youtube has the good
sense to prioritize loading the video _first_ , and the
recommendations/comments _second_.

It is surreal to jump from a thread with a Google dev telling me that user-
agent scraping is necessary because progressive feature detection would
require shipping unnecessary polyfills to modern browsers, to a conversation
with an Imgur dev telling me that because 5% of their users need a special
feature, everyone should wait twice as long to get core content served to
them.

I realize these aren't the same people, and the web development community is
diverse, but... I don't know how to reconcile those perspectives. We will jump
through so many crazy, horrifying engineering hoops to get bundle sizes down:
using statistics/user-behavior to calculate dynamic bundles on the fly, user-
agent sniffing, compiling Javascript frameworks, prefetching URLs, HTTP2. But
serving an img tag with our core HTML is a bridge too far?

~~~
folkhack
It's cargo cult development. I've seen it everywhere I've worked, and have
been a huge offender myself. It's the engineer interjecting themselves vs.
doing what's best for the end-user: KISS (keep it simple stupid).

As a webdev I actually target older methods in order to get my work done. Is
it as "sexy" as a ton of stuff you mentioned? Nope. But I can get a lot done
with 20-50 lines of jQuery (or maybe a bit more verbose w/vanilla JS) by
directly working with the DOM vs. roping in frameworks in every situation I
find myself in. I try to build those "business capable" websites you're
mentioning in the first paragraph.

The biggest thing that bothers me is most of us in the industry are
"abstraction obsessed" where we would rather have discussions on the complex
tools we use vs. how we solve the problem at hand. God help you if you're that
one older dev in the back of the room going, "yeah but can't we just throw
some vanilla JS/basic jQuery/simple DOM manipulation at that and be done with
this?"

~~~
hakfoo
A company I know has been replacing some pre-Cambrian "Individual PHP-built
HTML pages with the occasional JavaScript enhancement" pages with a React-
based app. There is a case for updating the site-- it predates responsive
design and several corporate rebrandings-- but I'm not sure new-era web tech
is actually doing them any good.

It moved a lot of complexities from the server side to the client side--
management of state and orchestration of data, turning a single request for a
finished page into a whole streak of API hits to populate out a template.

They went for an API-based approach with the thought they could expose it
directly for external power users, but the API ends up not even serving their
INTERNAL needs well (the information you want for this report is scattered
across 12 different tables, but combining them together violates the REST
spirit)

I'm not sure it will be faster or more stable than the old code even once they
finish optimization. The only user-facing benefit appears to be that they
replaced the 200-millisecond flash of white as it loads each page with a
5-second spinning beachball in the template as it collects the data a piece at
a time.

I strongly suspect a lot of the motivation was the devs wanting to put some
trendier technologies on their resumes.

~~~
charrondev
Too be honest that’s just poor development practice.

We run a React SPA, and our backend for initial page load & API is in PHP.

Frontend devs work with backend devs to ensure the critical path of the page
can we gathered in 1 request. This usually means having some expand query
params on the get request.

We also preload critical API responses in the initial page load to prevent
this initial loading indicator.

~~~
folkhack
^^ Also agree on this. I have seen the whole "it has to be RESTful" thing that
the parent comment was discussing as a way to justify huge amounts of HTTP
overhead too many times however.

------
greenleafjacob
Former Imgur engineer here who worked on the desktop site and helped on mobile
when I could. A lot of the code that is loaded supports features that are used
by a long tail of users [1]. However, they do serve the javascript with
appropriate cache-control headers and serve them from Fastly's CDN so
analyzing a cold load is a bit misleading to say the least. Moreover, as other
commentators have mentioned, they optimized more for the subsequent images
than the initial pageloads (they'd prefetch the next N images).

Keep in mind Imgur is not a large company despite their high traffic, even at
their peak of employees the engineering team was pretty small (probably about
12-15 people after series A), and the mobile web team in particular was a
handful of people, with a handful of people on iOS and Android, and a handful
of people on desktop/backend/API (where I worked).

That said, I think Alan does care about these things. I know at some point
they did support NoScript and did care about the experience with JavaScript
off (and had code to support uploading images and viewing images with no
JavaScript at all). But it's hard to have it as your top priority when Reddit
and Instagram are trying to eat your lunch.

I'm sympathetic with the page bloat problem and noscript and I do think more
effort should be spent on optimizing this stuff, especially because bandwidth
is much of their opex.

[1] Posting, voting, commenting, uploading, accounts, tagging, albums, search.
There is even a hidden-ish feature to "auto-browse" in a slideshow-like manner
which you can find if you crawl around the source code.

~~~
zzzcpan
> A lot of the code that is loaded supports features that are used by a long
> tail of users

Bounce rate 53% according to alexa. So, majority of imgur users don't
appreciate it, do hit cold load, etc. A user probably has to be dozens of
interactions deep for initial loading cost to not be so high, but more likely
there is no way to ever offset overhead of all that bloat for any user.

Personally, I use an extension to fix imgur brokenness and extract images from
imgur pages without loading anything else.

~~~
PretzelFisch
Or the signal indicates most visitors are a result of an accidental link
click.

------
deanCommie
I find it ludicrous that amongst the hundreds of comments between here and on
Twitter, people seem to completely ignore that this is a FREE WEBSITE. But one
that is likely incredibly expensive to operate.

How to reconcile this and attempt to make up the shortfall? You're looking at
it.

Imgur started as hardly more than an IMG element. It burned and burned and
burned money, and their users were happy.

Then it added ads, but it didn't matter because people direct linked from
reddit anyway, which was the vast majority of the traffic.

Then imgur realized they need to break their dependency on the reddit social
mass, and built their own to apparently great success.

Now people go to imgur for images directly, and stay.

So. All that "bloat" came around for a reason and it was to try to make the
company sustainable as a business.

Dammed if you do, and if you don't.

~~~
saagarjha
And in doing so, they made their website awful for the one thing that most
people were using it for.

~~~
nsgi
Doesn't matter, people still use it. It's not completely awful for what people
use it for as long as it stays up.

~~~
flukus
> So. All that "bloat" came around for a reason and it was to try to make the
> company sustainable as a business.

Until someone comes along with a simple basic service that just works, exactly
like how imgur replaced imageshack.

~~~
deanCommie
Imgur now is still multiple orders of magnitude better than what Imageshack
and Photobucket were when it disrupted them.

------
stupidcar
This is a big problem, but calling it over-engineering seems too generous. I'd
characterise it as _under-engineering_ : Developers unwilling or unable to
give proper consideration to non-functional requirements such as performance
and design an optimised solution, and instead just layering on more and more
dependencies.

There's a happy medium between serving a single <img> tag and this
monstrosity. It would be totally feasible to use PWA techniques and a
lightweight JS framework to build an image host that was performant and still
provided all the other features Imgur does.

But let's face facts: It's not going to happen, no matter how many angry
Twitter threads get posted to Hacker News. The web platform is completely
unsuited to mobile, and there are simply too many perverse incentives in
commercial web development to expect that most developers will expend the
effort to build an optimised PWA when they can slap something together with
React, knowing it'll work fine on the CEO's iPhone on office wifi.

The only real fix would be a complete reinvention of the web to fix the myriad
design flaws. That is what Google's AMP was supposed to be, but people seem to
hate it and see it is proprietary and evil. Maybe it is, but from a technical
perspective, it's likely the only kind of solution that has a chance of
working.

------
vfc1
I think the whole comparison of imgur with a blank page with an image is a bit
silly. It's not just the image, its a whole application with comments,image
galeries, video playing ability, and of course a ton of iframes with ads which
load a lot of content (more images etc.)

Try to do the same feature set without a Javascript framework and using only
plain Javascript or even plain HTML and CSS, and then come and tell us about
the results.

Also, a lot of the bloat is probably not under the developers control and is
added by non technical marketing departments, which want a tracking pixel for
this, a tracking pixel for that etc.

But yes its true its insane and its getting worse, and 4G and HTTP2 will not
be a solution for most of us anytime soon.

~~~
alkonaut
But I don't care about any of that. I don't even care if the rest of the app
is what keeps the lights on. Everyone* who visits imgur does so following an
image link, they want to view that single image, and will not click anywhere
else on the page. Optimizing for another use case seems crazy.

*There is set of users who browse imgur or otherwise use imgur as a kind of "web application", I'm disregarding that part of their userbase for the sake of this discussion. It would surprise me a lot to learn they are more than 1% of users .

~~~
vfc1
> But I don't care about any of that

OK, fair enough but then it's a different discussion and a different
conclusion.

We can't really blame Javascript frameworks for a particular business that has
decided to monetize its user base in a different way, by adding more features
that are not widely used by their userbase.

Imgur can't exist in a vacuum, it's a business there is a whole team behind
it.

Now we might question that whole business model as well and the whole internet
supported by ads thing, but that is a whole different barrel of fish that is
in my view not attributable to Javascript frameworks.

------
bayindirh
For me, this is just the revealing of the inevitable because of the mentality
of:

\- The network is reliable

\- The bandwidth is cheap

\- The hardware is also cheap

All three statements are wrong, because _everything is fast when the n is
small_. We're past that point. Network is not reliable, bandwidth and hardware
are not cheap. At least in terms of time, and my time is neither cheap nor
free.

Developers don't or can't optimize because it's either too much work, or it's
working reasonably fast. Reasonably fast is not fast enough. We're wasting too
much resources in cases like this.

<img> _old man yells at cloud_ </img>

</rant>.

------
pflenker
The author of the tweet missed the obvious reason for that performance, even
though he even mentioned that this is the mobile behavior:

They want you to use the app!

The button to open/install the app is clearly visible at an early stage. And
since imgur users are the product, and not the customer, you want them in the
app where you can retain them more easily (think notifications) and ad-target
them more precisely based on all the data you can collect directly on the
devices.

~~~
hu3
By that logic Reddit does the same: horrible website that pushes users into
installing the app.

Hasn't worked with a single person I know.

I tend to correlate bad website with possibly bad app and I suspect others do
too.

~~~
pflenker
I think reddit is very obvious about it. They only care enough about their
mobile website to add huge, impossible to miss „download our app“ callouts and
ignore the rest.

------
mattigames
This has little to nothing to do with overengineering, its because Imgur.com
revenue depends 100% in you clicking the small thumbnails on the side bar or
one of the ads placed there (and make sure that if you do click a thumbnail
the next image and its comments do load really fast to get you hooked to those
dopamine shots), because _that_ is where the money is, meaning when you waste
your time there because the longer you spend the more likely you are going to
click their ads (and download their app and sign up and everything else that
may help that goal)

~~~
manigandham
None of that requires 5Mb of cruft or an entire React app to load. It would
take a few lines of JS for some dynamic comments. This is the very definition
of overengineered.

Compare that to Stackoverflow which generates completely dynamic pages with
more interactivity in 50 ms. Also making the site faster would generate more
revenue as more users would actually finish loading page.

~~~
mattigames
"Some dinamic comments" is easy to see you are not understanding all it does
here, the comments are more than 100 per image, replies are hidden until
clicked, the points of each comment update in (almost) real time, the comments
are posted using Ajax to never lost the scroll position, same than all the
other interaction such as upvoting, downvoting and report, like everything is
over Ajax it needs to keep track of url history itself, all this needs to work
on IE10 and other shady browsers (due being one the most popular sites). They
don't have much control over some of the assets because they are from the
advertiser and have little say what's going on there if they want to win
money. Is one of the top 20 sites visited in the United States and I seriously
don't think being slightly faster would help much or maybe at all.

And most important than all that: All the assets are properly cached, so
despite bothering thousands of engineers for most people the load nuisances
only happen once or at most a few times.

~~~
manigandham
We're talking about just the frontend here. I can definitely redo it with
substantially less code and no frameworks, including automatic transpiling for
different browsers. No need for React + jQuery with megabytes of JS, but if
you must have a framework then use Preact or Svelte.

Ads are different but I work in adtech and site speed matters. Faster sites
make more money. Remember this is on a mobile page. People don't wait more
than 3 seconds for a site to load. You're not getting any ad impressions from
visitors who never show up or leave.

~~~
mattigames
Doesn't matter if you can redo with a couple of jQuery lines, their site has
more traffic than any other image hosting the world and they need some code
that if tomorrow all the engineers leave it still can be maintained, and React
plus jQuery is a extremely smart decision for that goal.

~~~
manigandham
Maintainability is a product of good engineering practices and documentation.
No framework magically solves for that.

~~~
mattigames
>good engineering practices a

One of the "good engineering practices" is to use a baseline code widely know
and that's what full frameworks like React and Angular buys you, of course you
still can create a mess with any of those 2 but is way harder to do that than
to do it with in-house custom framework, nothing makes an JS developer run
faster from a job position than being told they are using some custom
framework that has been growing organically for years, regardless of how good
your documentation is.

~~~
manigandham
> _" of course you still can create a mess "_

That's exactly what happened here, and what this entire post is discussing.
The frameworks aren't the problem, aren't really necessary, and there are
faster alternatives if they must be used (like Preact and Svelte).

~~~
mattigames
No is not what happened here, what happened here is that engineers voices get
amplified from their anger because they value megabytes because they are more
aware of their existence than the average joe; for average people nothing of
this matters as the assets are being cached, it doesn't matter even for the
developers of the site because is doing pretty well being one of the most
visited sites in the world.

~~~
manigandham
Again, this page for a mobile site took more than 40 seconds to load a single
image. The average user is not waiting, they've already left. You seem to be
missing that detail. Performance matters and has been proven by metrics and
research from every major internet company.

Site popularity has nothing to do with UX. Imgur is popular because of reddit,
and there's plenty of users who dislike Reddit's slow and heavy redesign too.

------
dspillett
_> What’s even more even more disgusting is that THIS IS THEIR M-DOT SITE.
This was a deliberate strategy for serving mobile devices._

More likely incompetence than malice, designing for mobile in terms of
screensize and UI but neglecting to consider network bandwidth and memory+CPU
resource. That and no doubt a fair chunk of that payload relates to
advertising in some way.

If it _is_ by design then I suspect it is intended as a way to funnel people
into installing their app, much like reddit's user-hostile mobile design (I
should thank them, they've saved some time in my day by song me bothering with
that site on mobile).

~~~
gameshot911
i.reddit.com is the only way I browse on mobile.

------
fortran77
Imgur is struggling and gasping for a business model. They do serve a useful
purpose, but there's no possible way for them to make money without wrapping
images and trying to engage users to stay longer (and eventually get served
with an ad).

------
tannhaeuser
I think we're at the point where these abominations should be served as
application/html rather than text/html. At the end of the day, users come for
content, so let them decide to block crap that serves no purpose and wants to
reimplement a browser in the browser. I've found that the value of content
correlates inversely with the amount of JavaScript on a page.

------
yayana
Is there a static Twitter thread cache somewhere? Loading this fails with
"something went wrong" and then "you are rate limited".

If Twitter's dark pattern to force login/app usage were just a little closer
to the headline, I would have thought the failure was the punchline of this
posting.

~~~
jml7c5
This happens _every single time_ I open a link to twitter if it's been >~1
hour since I last viewed a twitter page. Different devices, different
networks, etc. It's been this way for at least a year. All I can think of is I
don't have some tracking cookie they're using to guess that I'm not a bot.
Reloading the page (w/ F5) fixes it.

Presumably logging in or using their app would fix it, but I've got far too
much spite for that. Instead I just avoid the site where possible.

------
cmroanirgo
Google search results are equally abysmal. Most of the download has little to
do with the 10 URLs that we want.

~~~
netfl0
I remember when they introduced ads and it was jarring. After switching to DDG
about a year ago, it’s very frustrating to try to interpret google results of
I’m ever presented with them.

I have to do this mental dance: * are these ad links? * are these knowledge
graph links? * how many results did I get?

It is a bit tiring.

------
hombre_fatal
> This industry needs some sort of regulatory body.

Yikes.

If you can do it better and make money, then build it and compete with them.
What kind of bureaucratic dystopia would even "fix" this?

~~~
ben509
Yup, the market _is_ a regulatory body.

------
Sawamara
As someone have pointed out in the thread itself: this is not in any way
React's fault. If you want, you can add (p)react for a few kb to your page,
serve a max 20-25k js code with it and still do not match the served image's
size.

However, when websites decide to instead track the everliving hell out of
their users, this is what happens. Absolutely pathetic. Another similar
experience I have with mobile sites is Reddit, its intentionally throttling
the site and tries to turn you towards their app.

~~~
ajot
> Another similar experience I have with mobile sites is Reddit, its
> intentionally throttling the site and tries to turn you towards their app.

That's why I use the .compact version of reddit on mobile. It's as ugly and
clunky as it's snappy.

------
buboard
It's funny because their website is pretty basic in features. Also try
dragging multiple pictures to upload , there is no progress bar, no feedback
nothing. It seems to upload 1 or 2 of them and then stop. Anyway good thing
you can just copy the image URL and send that one instead

------
Asooka
The entire modern web feels like someone reading that joke interview with
Stroustrup and not realising it's a joke and you shouldn't actually keep
piling complexity and building an infinitely tall job security tower. Or put
another way - it's developers working in a way that optimises for profit and
job security (which we all want, duh), but the incentives higher up are so
aligned that good simple engineering is never the optimal strategy for maximum
profit and job-security. There's probably several books on project management
and sociology to be written from examining how the mis-engineering of the
modern web came to be.

------
lovetocode
This is a naive assessment. Imgur is running a business and with that comes
all the surrounding cruft Harry is complaining about. I hate including
marketing and tag management tools in my project at work but that is what the
business wants.

~~~
csswizardry
OP here. My beef wasn’t and isn’t with the ads or monetisation: it’s with the
engineering decision to bury the product’s _primary content_ in a 1.2MB JS
application. The image itself just needs to be an `IMG` element in a server
rendered page—ads, tracking, comments, upvotes, etc. can and should be all
loaded as secondary content.

My beef is with a ‘mobile-optimised’ image hosting platform taking over 40s to
display an image on mobile.

~~~
halfjoking
Imgur used to be just an img tag. They found out they couldn't make money that
way. Eventually the images became the 110th most important thing on the page.

That wasn't an engineering decision - it was a business decision made to force
people to switch to the app. Ever try browsing imgur on mobile web? You can't
- it keeps popping up the 'download the app' button. Infinite scrolling breaks
because of that popup (by design). If you don't want to support a business
that tries to force people to use their app by making the mobile web version
horrible you don't have to.

~~~
jml7c5
>If you don't want to support a business that tries to force people to use
their app by making the mobile web version horrible you don't have to.

There's no hypocrisy in using something while complaining that it's absolutely
terrible. (Particularly if there isn't a real alternative; "don't ever open
any link to any image hosted on imgur even though you'd prefer the person had
hosted it somewhere else" is not reasonable.)

------
boomlinde
This cycle seems consistent with past popular image hosting services. First,
attract users with a simple, no-nonsense service. Second, shove ads in there.
Third, try to build some sort of community. More ads. Lastly, fade into
obscurity.

------
cryptica
I've been saying this for years. Capital is distorting science and technology.
The React ecosystem succeeded mostly because it was backed by and associated
with Facebook. Most popular tools these days are popular because of some
social or business connection to a large pile of capital.

There are a lot of amazing tools which are not popular because they are not
connected to capital. But those tools are great precisely because they are not
connected to capital.

Too much capital invariably leads to overengineering.

For example, if you consider the PHP Hiphop compiler by Facebook. It tooks
years to create it. It's an over engineered solution that did not need to
exist. They could easily have rewritten their software in a different language
instead if they really cared about saving a bit of CPU. The speedup which
HipHop provided was a constant factor. In fact, they could probably have
achieved a higher speedup with a simple rewrite even in PHP without HipHop
(with just simple algorithm optimizations).

Corporations are extremely innefficient. Their main purpose is to create
useless jobs.

------
jancsika
How much of that bigness is devoted to exfiltrating data?

If it's non-zero then you must compare to an IMG element design that can also
efficiently exfiltrate the same amount of user data. Otherwise you're
comparing apples to oranges.

~~~
jancsika
Oh, and your design should also be equally extensible. If I want to add
ambient light readings to the data set it should be essentially free to ship
the change to the img element design across all browsers.

------
gsaga
If you right click on an image you get an option named "open image in new
tab". You can just share the direct link to the image.

~~~
miyuru
That does not work most of the time. Browsers send different http accept
header when image is clicked vs hotlinked on img tag. imgur looks at the
header and redirect the image to the image page when clicked on the direct
link.

~~~
gsaga
It is possible:

[https://imgur.com/gallery/8zv0AJ7](https://imgur.com/gallery/8zv0AJ7)

[https://i.imgur.com/vjdfNOe.jpg](https://i.imgur.com/vjdfNOe.jpg)

~~~
miyuru
that is possible too, even though they don't encourage it.

what I meant was when you click on the last link, sometimes it redirects to
[https://imgur.com/vjdfNOe](https://imgur.com/vjdfNOe) making the direct link
pointless.

------
nyolfen
imgur becoming somehow more bloated and less usable in every way over time is
perhaps rivaled only by skype's trajectory

------
LandR
If the dev doesn't use a hundred different javascript frameworks what on earth
are they going to put on their CV!

------
2sk21
Maybe there is a potential revenue model lurking here - pay extra to get the
lighter version of a page? (half joking)

~~~
rasz
You could offer hotlinking with a twist - instead of original file you get
modified one with Ad encoded into upper 20% portion of image.

~~~
slig
Bundle it with a URL shortener that sticks the usual Analytics tracking crap
(utm_source, etc) and a QR-Code and you're golden!

------
anon4242
And then when Leftpad-Azer removes his packages the next time the image won't
load at all...

------
345218435
alright, i‘ll make an exception and ask for constructive „criticism“:

what better alternatives are out there?

~~~
capableweb
Anywhere where you can directly link to a image without the hoster doing any
funky redirects.

Usually, the image hosts starts being like ^ while then slowly transitioning
to more and more user-hostile patterns.

Only way I found to avoid this is to setup my own Hetzner box (unlimited
traffic) running nginx to serve images. Use `scp` to upload them.

~~~
csande17
> Usually, the image hosts starts being like ^ while then slowly transitioning
> to more and more user-hostile patterns.

Hilariously, Imgur itself followed this trajectory: it started out as a super-
simple image hosting site whose creator was fed up with all the nonsense that
other image-hosting sites did[1]. Now, though, Imgur has become the website
everyone complains about!

[1]:
[https://web.archive.org/web/20090227183112/http://www.reddit...](https://web.archive.org/web/20090227183112/http://www.reddit.com/r/reddit.com/comments/7zlyd/my_gift_to_reddit_i_created_an_image_hosting/)

