On: 300ms Faster: Reducing Wikipedia's total blocking ...

[rickstanley]

CSS has come a long way, I would expect that these things would be ease to achieve with just CSS and HTML, for instance: media viewer -> dialog (I remember this being a HTML thing), collapsing sections -> details/summary (?)

But I guess it's not there yet.

[ajkjk → rickstanley]

There is always going to be a user interaction that is sufficiently complex as to require JS. Arbitrarily limiting to just CSS severely limits what you can do.

[onion2k → ajkjk]

It's not arbitrary though. It's a choice to save bandwidth shipping unnecessary javascript rather than making it easier to develop the website. At the scale of Wikipedia that isn't unreasonable.

[ajkjk → onion2k]

It's not unnecessary if the feature is something you want?

There's this pattern on HN: people value a feature as having 0 utility and then become annoyed that someone has paid time/performance/money for them. Well duh, if you discount the value of something to 0, it will always be a bad idea. But you're never going to understand why people are paying for it if you write off their values.

At my last job there were countless pieces of UX to make things smoother, more responsive, better controlled by keyboard or voice reader, etc.. that required JS. It was not possible to make our site as good as possible with CSS, and it certainly wasn't worth the tradeoffs of loading a big faster (not that it couldn't have had it's loading time improved--just, cutting JS was a nonstarter).

[onion2k → ajkjk]

It's not unnecessary if the feature is something you want?

The js is unnecessary if you can achieve the same result with plain css.

[ajkjk → onion2k]

And you often can't.

[spartanatreyu → ajkjk]

In my experience, most people just aren't aware of what CSS is capable of.

But to play devil's advocate: just because you can, doesn't mean you should.

[TheAngush → onion2k]

If you replace JavaScript with CSS you aren't saving bandwidth; you're trading it.

In many scenarios I'd argue CSS would require more bandwidth. It can get quite verbose.

[uoaei → ajkjk]

Fairly certain that's literally the point of simplifying interfaces. Do what you need with what you have. Don't try to shove a racehorse into a VW Beetle.

[blowski → uoaei]

As the old saying goes “simple as possible but no simpler”. There are likely some uses of JavaScript that make the UI simpler.

[pier25 → rickstanley]

> media viewer -> dialog

<dialog> has only been available in Safari for about a year.

https://caniuse.com/dialog

Wikpedia is one of the most popular sites on the internet. It needs to be as compatible as possible so that means using JS.

[manquer → pier25]

You should be able to detect user agent and determine capability and send the poly-fills for backward compatibility ?

[paulddraper → manquer]

And hurt your caching....

All to get rid of a tiny bit of JS.

[manquer → paulddraper]

All this to support older browsers and get rid of all JavaScript where you can .

Plenty of sites aspire to be JS free for a variety of reasons it is worthy goal

[ryan_lane → manquer]

Then you'd need to shard your cache on user agent, which would lead to considerably worse performance for everyone.

[manquer → ryan_lane]

Surely at the scale of Wikipedia that wouldn’t be a factor ?

considering the dominance of few browsers (chrome , safari on iOS) will most users notice any difference? The first one (with that UA) to the site with a new build will have they cache key warmed up ?

[ryan_lane → manquer]

User-agent is way more granular than chrome, safari, firefox, etc. It's not a great shard key.

[pier25 → manquer]

Sure, there are many different ways to tackle this.

[znpy → rickstanley]

My guess is that it’s going to be a tradeoff between functionality and compatibility.

Wikipedia is consulted every day by a lot of people, i guess that a large number of those people are running older browsers.

[starkparker → znpy]

Mediawiki itself is built to support 10-year old phones (which is why the Moto G makes an appearance in the post - it's the official low-end Android benchmark) and older desktop operating systems. https://www.mediawiki.org/wiki/Compatibility#Browsers

[tommy_axle → starkparker]

Makes sense since the Moto G is also what Lighthouse and a lot of tools driven by it use. So PageSpeed Insights (pagespeed.web.dev), the Lighthouse developer in Chrome tab and even external services like https://totalwebtool.com all generally evaluate mobile performance using it to simulate a slower experience.