
Twitter web app now runs ES6+, reducing polyfill bundle size by 83% - tosh
https://twitter.com/wongmjane/status/1291388433747685376
======
nikitaga
> (gzipped size went from 16.6 KB down to 2.7 KB!!)

A couple orders of magnitude are missing from these sizes if my browser dev
console is any indication. What are they even talking about.

~~~
chrismorgan
The polyfills, not their own code. Effectively all they did was update their
browser support baseline, dropping support for very old browsers, with the
result that about 14KB of code that made it work on those old browsers can now
disappear, because more recent browsers don’t need it.

~~~
nikitaga
Ah, so they saved 14KB off their ~1MB javascripts by dropping old browsers.
Must be a slow news day on HN I guess.

~~~
baron816
Maybe the news should be “dropping support for a bunch of browsers is only
going to save you a few insignificant kB”.

------
wackget
Twitter is garbage as far as I'm concerned.

I use Firefox with uBlock (standard lists) and uMatrix (all Twitter-related
requests permitted) and it's still buggy as hell.

If I try to paste anything into the "compose tweet" dialog it just completely
crashes with a very helpful "something went wrong" message.

If I try to cut and re-arrange parts of my tweet, it duplicates all the text
and puts it out of order.

The tweet box is not even a <textarea>, it's a <div> stuffed full of <span>
elements.

Additionally, the tweet box <div> is nested __over 40 layers deep __in a
massive pile of divs.

As always, they're trying to be way too clever for their own good.

I'm not at all surprised they need polyfills for that trash.

~~~
gruez
>The tweet box is not even a <textarea>, it's a <div> stuffed full of <span>
elements.

ah yes, because webdevs _love_ reimplementing widgets from scratch. that's no
a problem in and of itself, but they also implement it half-assed, so you end
up with gems like what OP described, or links being implemented as <a
href="#"> with an onclick.

~~~
Haydos585x2
I think you'd find most front-end developers don't love reimplementing widgets
from scratch but instead are required to because designers, product owners and
customers expect this sort of experience. I just don't think Twitter would
remain competitive if it had the interface of Hacker News.

~~~
theandrewbailey
Tell that to Craigslist.

~~~
itake
Craigslist has lost a ton of market share to literally every other company. I
haven’t used it in years cuz there are just better products.

------
lathiat
“A polyfill is code that implements a feature on web browsers that do not
support the feature. Most often, it refers to a JavaScript library that
implements an HTML5 web standard, either an established standard on older
browsers, or a proposed standard on existing browsers.”

------
wilsonrocks
I'd love to see some stats on page load times etc.

There's a lot of repetitive debate on HN about JS web apps slowing things down
and I'd like to know if the effects would be as bad if you could use the
latest browser tools unpolyfilled.

~~~
mrsharpoblunto
I added support for ES2017 bundles for compatible browsers for Instagram.com a
couple of years ago - we saw a 5.7% reduction in the size of our core consumer
JavaScript bundles when we removed all ES2017 transpiling plugins from our
build. In testing we found that the end-to-end load times for the feed page
improved by 3% for users who were served the ES2017 bundle compared with those
who were not (more info here [https://instagram-engineering.com/making-
instagram-com-faste...](https://instagram-engineering.com/making-instagram-
com-faster-code-size-and-execution-optimizations-part-4-57668be796a8))

~~~
mattmanser
3% is in the margin of error, surely, so basically no gain? Just a waste of
dev time?

Feels like you should make that the start of the blog post and cut it down
massively, so people know it's not worth bothering with?

~~~
mrsharpoblunto
Why do you think its in the margin of error? I never mentioned the error bars
on the statistic - We did an extensive AB test and it was a 3% stat-sig
improvement

~~~
mattmanser
A 3% improvement on a 3 second page load means it loads in 2.91 seconds. So
even if it were statistically significant, it's not practically significant?

Unless your initial page load is taking like 10 seconds, a human wouldn't even
notice. And if it is taking 10 seconds, well, then you've got better things to
fix.

That's not an actual improvement. That's just noise.

~~~
shajznnckfke
I worked at a big web site and we could demonstrate lots of incremental
revenue (many millions of dollars) from a change like this. Even though it
doesn’t seem noticeable to an individual, it adds up. If you draw a graph with
page load time on one axis, and usage on the other, it’s a smooth curve, not a
step function. Out of all your customers, some fraction of them are going to
get distracted and disengage after 3 seconds but not after 2.9 seconds.

Imagine you lower the grip on everyone’s tires by 3%. Most people wouldn’t
notice, but for a few people it will prevent them from being T-boned when they
wait too long to brake for a red light. That improvement would be measurable
if your data was good enough. I’m not saying optimizing your website is
important like preventing car crashes, but it’s an illustration of how a small
change can lead to a measurable improvement.

------
kangax
We tried doing this at Facebook few years ago but decided not to bother due to
an insignificant effect on user metrics like TTI (time to interaction), FCP
(first content paint), etc.

14KB is nothing when you're shipping 1MB+ of JS and all the other assets.

~~~
tuananh
1MB+ gzipped JS? That's a lot

------
renewiltord
That's awesome! Man, things on the front-end side are shaping up pretty nicely
these days.

Also Twitter is such an incredible product. I love it. It's one of the few
curate-by-default (along with Instagram, another masterpiece) feeds one can
have. If your feed sucks, only you are to blame. Beautiful.

------
username3
“twitter.com no longer supports Internet Explorer 11”

[https://twitter.com/i/release_notes](https://twitter.com/i/release_notes)

~~~
kaycebasques
Quick check-in: who here is still supporting IE? Please provide as much detail
about your website (industry, audience, usage) as possible.

~~~
shakna
I still occasionally maintain a website for a school, with stats that'll
horrify you.

Around 78% of browsers hitting the site are running IE8, and these will be
parents making use of the portal to do stuff like check calendar dates, book
appointments to see teachers, and check student grades.

We tried extremely hard to move the community onwards, including outreach to
upgrade computers for families and so on. But in the end, they just don't want
to move on from Windows XP because everything else is too confusing. Even if
you make it look the same.

As for how often they're using the site... It's somewhere around 1/3rd of the
parents hit it at least once a day using an outdated browser.

... Whilst their kids are using school-provided Thinkpads all running on
Windows 10, or recent-ish school-provided iPads. (The school does all the
maintenance on them as well).

~~~
Spivak
I used to work in school IT.

If Google and Mozilla aren't going to step up their "managed browser" game
then we're going to continue seeing MS and Apple dominate education. It's not
like school IT depts like running IE, but it's basically the only browser you
can lock down.

"But you shouldn't lock down kids' browsers, and let them have blah blah..."

Okay look, I don't actually give two shits if little Marcus wants to browse
Pornhub on his school laptop, we're honestly not paid enough to care. But we
do have administration breathing down our necks, school policies to enforce,
and angry detached parents to appease.

~~~
extra88
You absolutely can manage Firefox, you can even keep doing it using GPOs.

[https://support.mozilla.org/en-US/products/firefox-
enterpris...](https://support.mozilla.org/en-US/products/firefox-
enterprise/policies-customization-enterprise/policies-overview-enterprise)

------
dzhiurgis
Anyone elses scrolling still messed up with ad blocker?

And hope this change makes it easier to block trends from explore tab. I love
topics, but I don’t wanna see all the celebrity and politics crap every day...

~~~
faangFar
Twitter is unusable if you want to avoid Politics. I unfriended almost
everyone but all it takes is a single Like from anyone and it's Politics
galore.

~~~
augustus0
I really wish they'd add "harmony mode" or something that would get you away
from the shrill toxicity of standard Twitter. People can't help themselves but
click "like" on the most extreme statements possible, so users are
incentivized to make the most extreme statements to maximize likes.

The only success I've had is by starting a private list of knowingly healthy
users that's aggressively curated to make it stay that way, and never looking
at the home timeline.

~~~
dzhiurgis
They need synonyms for mute words

------
foxfired
After looking at my networks tab[1], I had misunderstood this. It's only the
size of the polyfill that has been reduced. The page is still downloading
800KB of javascript.

[1]:[https://imgur.com/a/01LfeiW](https://imgur.com/a/01LfeiW)

------
joegibbs
83% sounds really impressive but it’s only 13kb, which would make practically
no difference to the end user at all unless you’re on dial-up.

~~~
kumarvvr
There is a significant benefit if you consider the billions of views their
pages get every month. A lot of bandwidth saved. Lot of energy saved.

Every reduction is good in my view.

------
alexcroox
Joys of being able to drop IE11

------
nikivi
Hope it happens for all sites going forward. Alongside everyone supporting
prefers-color-scheme for dark modes.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

------
apazzolini
Has anyone else noticed that as of a few days ago, middle-clicking a tweet
that's embedded in another tweet (like a retweet with comment) causes the new
tab to steal focus? It's worse than scroll jacking IMO.

------
rasz
Wouldnt you load appropriate polyfill bundle based on Browser UA string
anyway?

------
wongmjane
By gzipped size I’m referring to the polyfill bundle itself

update: thanks for disambiguating the title, OP!

~~~
vijaybritto
Do you have any information on how they achieved this?

~~~
wongmjane
They now have two production build variations (I’m guessing two Webpack
config):

modern: ES6+, less polyfill

legacy: ES5, more polyfill

The appropriate variation is served by detecting browser’s version from the
User-Agent string

~~~
axlee
Note: since v8.0, Angular comes with built-in differential loading and will do
all the heavy lifting to achieve exactly that.

[https://angular.io/guide/deployment#differential-
loading](https://angular.io/guide/deployment#differential-loading)

------
m3kw9
These size decreases would practically matter in the 14.4k baud modem days.

~~~
wonderlg
I’m sure you love the modern web and its 2MB average page load, but most
people don’t.

This is code, so after it’s downloaded it needs to be parsed and executed…
needlessly.

What are you complaining about exactly?

------
passive
Now when are they going to stop it auto-refreshing on desktop Chrome, making
it functionally useless?

------
stabbles
Is there actually a completely static version of Twitter as well? A 0.0 KB JS
version?

~~~
progval
Twitter works with JS disabled, but there's a nag screen on every page load.

Alternatively, for reading only, there is
[https://nitter.net/](https://nitter.net/)

------
dmitriid
Glad to see at least something happening on the web side of Twitter. Because
frankly their website is a hot mess of invalid, incorrect or messed up UX
states and interactions.

Hopefully that will be the next step after reducing the bundle size.

