Hacker News Reader

Hacker News

Comment by highmastdon | Hacker News Reader

Parent Full thread

highmastdon

Don’t forget that also 1MB of JavaScript is much much more heavy on the client than 1MB image

View on HN

Indeed, but you also get more bang for your downloaded buck.

My toy project https://k8.fingswotidun.com/static/ide/?gist=ad96329670965dc...

Gives you an emulator, an 8-bit AVR Assembler, and an IDE for just over 500k transferred. Almost all of it JavaScript.

Using math.js is by far the heaviest part but at least your Asm already knows things like solarMass and planckConstant :-). CodeMirror comes in second heaviest but for user-experience-per-byte you're always going to be streets ahead of a gif.

True, but clients can opt to not load (or lazy-load) images without too much adverse effect. JS-heavy sites often completely break without JS.

> Indeed, but you also get more bang for your downloaded buck.

Yet this is most times used to load React to make a button clickable.

Yours is an exception to the rule - in 99% cases for 1MB of JS you get 1 MB of ads/tracking code.

At the risk of over-complicating things, perhaps there could be limits per resource type. 10Mb of images might be reasonable (e.g. for a photojournal), but only 128KB of JS, and 128KB for everything else. Something along those lines.

Yeah I was surprised they included pictures in the limit at all -- I mean, sometimes, you need those pictures, and for them to load slower is less important so long as you don't need them to navigate the page.

I’m not surprised. The whole point of it is that you can reasonably load it over 3g.

If you have a few megs of images that never show up because they take too long to load, there is no point.

You dont really need full size/resolution images on a web page.

Yeah true but even with small images, you can hit that cap quickly.

You do for full width retina images on 1440p+ monitors.

You people are why some sites have ugly blurry logos/images on my 4k screen

more the fault of the site devs for not using css media queries, or svg ;p

Does getting in the club assume you have a low resolution screen?

SVG only works in a few places.

If you were able to calculate the space in the document flow for those images, I'm fine with the lazy loading. I hate when the page text appears rendered long enough that I start reading, but then lazily loaded items cause the flow to rearrange the text so that I lose my place.

I imagine it should be pretty easy with javascript to set up dummy images, and replace them... probably also doable in pure css, just make them a block element or something, with a set size...

You don't have to imagine everything. Normally the lazy-loaded image should be seeded with transparent SVG that as the same dimension. It's a solved problem.

Wasn't this what progressive jpeg was invented for?

I miss lowsrc. It had a point.

Well if you need them you can't be a part of this 1MB club.

It's not a bad thing, it's just a thing.

You could use SVG images.

Check out this app: https://webide.se/?disable=fonts,discoveryBar

It's over one hundred thousand lines of JavaScript code minified and Gziped into a 300KB bundle which should fully load in about 300ms on a decent computer.

That took 4000ms on a phone.

What hardware/tools did you use to measure?

It was about the same for me, and I used a simple stopwatch. Stopped the watch as soon as I saw anything on the page. I am on a fairly fast network, too

For me it wasn't a second on a Honor 10

Which is still rather fast. Starting an IDE like Visual Studio on my desktop takes longer.

4+ seconds is hardly "rather fast", and being faster to start than Visual Studio is hardly glowing praise.

Reply on news.ycombinator.com