Hacker News Reader

Comment by sarego | Hacker News Reader

As someone who just recently worked on reducing page load times these were found to be the main issues

1- Loading large Images(below the fold/hidden) on first load 2- Marketing tags- innumerable and out of control 3- Executing non critical JS before page load 4- Loading noncritical CSS before page load

Overall we managed to get page load times down by 50% on average by taking care of these.

View on HN

Can someone who understands more about web tech than me please explain why images aren't loaded in progressive order? Assets should be downloaded in the order they appear on the page, so that an image at the bottom of the page never causes an image at the top to load more slowly. I assume there's a reason.

I understand the desire to parallelize resources, but if my download speed is maxed out, it's clear what should get priority. I'm also aware that lazy loading exists, but as a user I find this causes content to load too late. I do want the page to preload content, I just wish stuff in my viewport got priority.

At minimum, it seems to me there ought to be a way for developers to specify loading order.

This is what lazy loading does. It doesn’t actually load images that are “below the fold”. Or at least that’s what it should do. Images should only load once your start scrolling down.

Understandable but for most use-cases (if your images are hosted on a reliable CDN and are optimized) lazy load should work fine. Lazy load works based on the distance of the image from the viewport so it may not load too late.

Chromium based browsers now natively support lazy-loading.

That is actually the case today!

But it is an opt-in feature, which is not supported in older browsers.

In modern frontend development we are heavily optimizing images now. Lazy loading is one thing, the other is optimizing sizes (based on viewports) and optimizing formats (if possible).

This often means you generate (and cache) images on the fly or at build-time, including resizing, cropping, compressing and so on.

Is putting all assets into a single png/svg to reduce total requests a dead practice now?

I guess http/2 support on CDN made this a useless (and tedious) optimization

There was also the issue on an ancient version of IE that it could only load a few requests at the same time.

Is putting all assets into a single png/svg to reduce total requests a dead practice now?

As someone who browses the source of a lot of commercial web sites, I can say it's still dead common.

There's been a lot of static about new technologies coming that will make this unnecessary, but that don't help anyone today.

Should be done only if you have to load lots of small images. If you want to render above the fold fast reduceassets there and load them directly.

It is not supported by Safari, too.

Is progressive image loading still a common thing? I'd guess for a lot of connections it actually hurts more than it helps - until you get to that fat image-heavy site.

yes, there is already

simply add the property to your html images and the browser will automatically load them when in the viewport (i.e. just the ones you actually see)

further details: https://caniuse.com/#feat=loading-lazy-attr

https://html.spec.whatwg.org/multipage/urls-and-fetching.htm...

But then they always seem to not come in until I scroll to them, which is too late and just means I have to wait even more! What they ought to do is download as soon as the network is quiet.

I suppose simple order in the HTML document would be a heuristic that works almost always, but due to CSS the order is actually not guaranteed. You need to download images before doing the layout first too as you don’t know the sizes beforehand.

That's what the width and height attributes on the img tag are for. They're hints. Things can be redrawn later. Although I think I've been seeing a lot fewer images on the internet lately, but they must be hidden with css.

I know. And I wish my static site generator of choice (Hugo) added the tags automatically to the HTML.

Would it be possible to download just the headers of images first to get the metadata?

It's still a decent amount of overhead to even make the request for those bytes.

It's not just CSS screwing up the order! On my own (simple) sites, I can see all the images I put on a page getting downloaded in parallel—with the end result being that pages with more images at the bottom load more slowly even above the fold.

You can code split React components and create loading tiers.

Facebook claims they're doing this with the facebook.com redesign, for example: https://engineering.fb.com/web/facebook-redesign/

Order in HTML doesn't necessarily correlate to what a person can actually see (it's also possible to load images using CSS or even JS).

You could wait for layout and then load, but that would incur another big penalty (especially on JS-rendered pages).

I wish 50% would be enough but some local news pages take 15 seconds after the last modernisation. And that is with ad-blockers...

Add to that a ton of un-cached images will run up against the browser concurrent connection limit(non-HTTP2) and cause queuing.. Now you have latency back in the mix between batches :/

Reply on news.ycombinator.com