4 ms·

> WebKit added support for lazy-loading images with the loading attribute on the <img> element, providing web developers with an easy way to instruct the browse

by donatj 5y ago

> WebKit added support for lazy-loading images with the loading attribute on the <img> element, providing web developers with an easy way to instruct the browser to defer loading certain images until the user scrolls near them Maybe there's hope that I can then just turn this off on a browser level? I've got gigabit internet at home, and your images popping in on scroll makes it feel like I'm on dial up. Lazy loading images is at best user hostile bandwidth saving, and it's not even that much in this day and age.

deleted 5y ago
[deleted]
ezfe 5y ago
If it's implemented properly, and your internet is actually that fast, you won't actually see them loading.
dmw_ng 5y ago
> Lazy loading images is at best user hostile bandwidth saving It can easily be the vast majority of bandwidth spend even on a lightweight site. Add video widgets and bring that closer to 99%. Lazy loading is frequently a "can afford an extra 5 full time engineers" optimization
- donatj 5y ago
  > Lazy loading is frequently a "can afford an extra 5 full time engineers" optimization I find this figure suspect. I work on a site with millions of users whose core service is essentially displaying a stream of images to end users, and our spend on CDN bandwidth is barely into five figures
  - HWR_14 5y ago
    I suspect he was talking about the cost, not the benefit
  - dmw_ng 5y ago
    I picked 5 at random, but I guess it really depends on where you are. Assuming 5 was the real number, that's only $28k/month bandwidth spend given the average SWE salary in the UK (£38,561 going by google), including 33% for tax and non-salary costs. That's about 327 TB worth of undiscounted AWS bandwidth, or roughly a site averaging 993 Mbit/s. A small video site might start at 3 Gbit/s, a medium sized one closer to 30. These estimates really are quite conservative depending on the context
1123581321 5y ago
Chrome has the same feature and lets you disable it. That's probably the best compromise. You have amazing Internet. For the typical user, heavy image loading slows them down, and they're also less comfortable diving into browser settings.
johncolanduoni 5y ago
If you don’t have gigabit internet (i.e. most people), then it’s not so user hostile.
- donatj 5y ago
  In my experience it's more user hostile the worse your connection, because they have to sit and watch the images load for an even longer amount of time than I do, whereas it could have kept loading for them ahead of time. Where without lazy loading they could normally get up and get a cup of coffee and come back, you are now actively wasting their time as they scroll.
  - askonomm 5y ago
    If the person is viewing a gallery website, perhaps, but most websites are centered around textual content, which would be available much faster with lazy loading of images, thus the user on poor connection would actually get the _useful_ part of a website much faster.
  - eternityforest 5y ago
    When you only have 2GB a month of mobile data, anything that saves a megabyte is worth it, even stuff like Google's data saver they used to have.
- redwall_hp 5y ago
  Honestly, it's more so. Greedy loading means that on a slower connection images will load before you scroll to them. If you're lazy loading, the request doesn't kick in until later, so you'll be waiting for images to load. It's good for mobile devices, since you can save on usage caps (which should be illegal, but that's a digression).
- alwillis 5y ago
  People forget that latency impacts web performance and not just bandwidth. Also lazy loading enables the bandwidth that is available to be used on critical path items and not on images further down the page, especially if they’re non-origin images that require the overhead of another TLS handshake + connection, etc. You don’t get the benefit of HTTP/2 prioritization with non-origin connections.
koolaidman 5y ago
Whenever I open an article I just hold the spacebar until the full article and all images have loaded, then scroll back up
alwillis 5y ago
Lazy loading images is at best user hostile bandwidth saving The primary use case is to not load images you may not ever see because you may not scroll that far down the page and they don't appear in the viewport. Like any feature, it has to be used correctly by the developer… obviously hero images and other images important to the initial user experience shouldn't be lazy loaded.
- account42 5y ago
  > The primary use case is to not load images you may not ever see because you may not scroll that far down the page and they don't appear in the viewport. That is the "bandwith saving" part. It's user hostile because it is another non-JS privacy leak and because it means that you can no longer open a website to read later when you might not have internet access. > obviously hero images and other images important to the initial user experience Hero images are typically the most pointless and irrelevant to the user experience. If you want to save bandwidth then push back against this fad.
afavour 5y ago
The idea is that the browser, which is aware of your bandwidth, will disable this for you. But for a user on a limited bandwidth connection it’ll implement it. In other words the lazy attribute is a suggestion, not an instruction. The experience you describe is with JavaScript lazy loaders which don’t have this awareness.
- chasil 5y ago
  Android makes it easy to have many browsers with different configurations for specific uses. I have Bromite configured with DoH that almost blinds my ISP as well as Tor Browser. Privacy Browser disables JavaScript by default, with an easy toggle to enable it, which is invaluable for taming many sites with obtrusive scripting. I use Firefox Focus with the bundled libgecko for general browsing. If I tried this on a Microsoft platform, I would constantly be advised not to do this. I wish there was a good WebKit browser for Android, just for diversity.
  - jeroenhd 5y ago
    I agree, I'm quite surprised there's no Webkit browser on Android just yet. Though, based on my experience with Webkit on Linux, the Android version of Webkit would probably be leagues behind Safari. A real mobile Webkit would make testing for iOS a hell of a lot easier. I'm not planning for buying a mac just to run a browser, we're not living in 2010 anymore. Even Microsoft bothers to provide free VMs for developers to run their browser tests in.
frontier 5y ago
Unfortunately if you want to rank these days you have to implement these kind of things, or Google marks you site down as having poor performance. At least with a standard <img> attribute there is now a chance for a simple browser setting to turn the behaviour on/off/auto depending on connection type/etc.. unlike all of the various javascript solutions.
kingcharles 5y ago
I don't use it just for my users, I use it for my sites which are extremely image heavy and I don't want to load dozens of images that the user might never scroll to.
tomxor 5y ago
> I've got gigabit internet at home [...] Lazy loading images is at best user hostile bandwidth saving You might want to consider how lucky you are for a second.
youngtaff 5y ago
> Lazy loading images is at best user hostile bandwidth saving, and it's not even that much in this day and age. Poorly implemented lazy loading of images is probably the culprit here

by donatj 5y ago

deleted 5y ago

[deleted]

ezfe 5y ago

If it's implemented properly, and your internet is actually that fast, you won't actually see them loading.

dmw_ng 5y ago

> Lazy loading images is at best user hostile bandwidth saving It can easily be the vast majority of bandwidth spend even on a lightweight site. Add video widgets and bring that closer to 99%. Lazy loading is frequently a "can afford an extra 5 full time engineers" optimization

donatj 5y ago
> Lazy loading is frequently a "can afford an extra 5 full time engineers" optimization I find this figure suspect. I work on a site with millions of users whose core service is essentially displaying a stream of images to end users, and our spend on CDN bandwidth is barely into five figures
- HWR_14 5y ago
  I suspect he was talking about the cost, not the benefit
- dmw_ng 5y ago
  I picked 5 at random, but I guess it really depends on where you are. Assuming 5 was the real number, that's only $28k/month bandwidth spend given the average SWE salary in the UK (£38,561 going by google), including 33% for tax and non-salary costs. That's about 327 TB worth of undiscounted AWS bandwidth, or roughly a site averaging 993 Mbit/s. A small video site might start at 3 Gbit/s, a medium sized one closer to 30. These estimates really are quite conservative depending on the context

1123581321 5y ago

Chrome has the same feature and lets you disable it. That's probably the best compromise. You have amazing Internet. For the typical user, heavy image loading slows them down, and they're also less comfortable diving into browser settings.

johncolanduoni 5y ago

If you don’t have gigabit internet (i.e. most people), then it’s not so user hostile.

donatj 5y ago
In my experience it's more user hostile the worse your connection, because they have to sit and watch the images load for an even longer amount of time than I do, whereas it could have kept loading for them ahead of time. Where without lazy loading they could normally get up and get a cup of coffee and come back, you are now actively wasting their time as they scroll.
- askonomm 5y ago
  If the person is viewing a gallery website, perhaps, but most websites are centered around textual content, which would be available much faster with lazy loading of images, thus the user on poor connection would actually get the _useful_ part of a website much faster.
- eternityforest 5y ago
  When you only have 2GB a month of mobile data, anything that saves a megabyte is worth it, even stuff like Google's data saver they used to have.
redwall_hp 5y ago
Honestly, it's more so. Greedy loading means that on a slower connection images will load before you scroll to them. If you're lazy loading, the request doesn't kick in until later, so you'll be waiting for images to load. It's good for mobile devices, since you can save on usage caps (which should be illegal, but that's a digression).
alwillis 5y ago
People forget that latency impacts web performance and not just bandwidth. Also lazy loading enables the bandwidth that is available to be used on critical path items and not on images further down the page, especially if they’re non-origin images that require the overhead of another TLS handshake + connection, etc. You don’t get the benefit of HTTP/2 prioritization with non-origin connections.

koolaidman 5y ago

Whenever I open an article I just hold the spacebar until the full article and all images have loaded, then scroll back up

alwillis 5y ago

Lazy loading images is at best user hostile bandwidth saving The primary use case is to not load images you may not ever see because you may not scroll that far down the page and they don't appear in the viewport. Like any feature, it has to be used correctly by the developer… obviously hero images and other images important to the initial user experience shouldn't be lazy loaded.

account42 5y ago
> The primary use case is to not load images you may not ever see because you may not scroll that far down the page and they don't appear in the viewport. That is the "bandwith saving" part. It's user hostile because it is another non-JS privacy leak and because it means that you can no longer open a website to read later when you might not have internet access. > obviously hero images and other images important to the initial user experience Hero images are typically the most pointless and irrelevant to the user experience. If you want to save bandwidth then push back against this fad.

afavour 5y ago

The idea is that the browser, which is aware of your bandwidth, will disable this for you. But for a user on a limited bandwidth connection it’ll implement it. In other words the lazy attribute is a suggestion, not an instruction. The experience you describe is with JavaScript lazy loaders which don’t have this awareness.

chasil 5y ago
Android makes it easy to have many browsers with different configurations for specific uses. I have Bromite configured with DoH that almost blinds my ISP as well as Tor Browser. Privacy Browser disables JavaScript by default, with an easy toggle to enable it, which is invaluable for taming many sites with obtrusive scripting. I use Firefox Focus with the bundled libgecko for general browsing. If I tried this on a Microsoft platform, I would constantly be advised not to do this. I wish there was a good WebKit browser for Android, just for diversity.
- jeroenhd 5y ago
  I agree, I'm quite surprised there's no Webkit browser on Android just yet. Though, based on my experience with Webkit on Linux, the Android version of Webkit would probably be leagues behind Safari. A real mobile Webkit would make testing for iOS a hell of a lot easier. I'm not planning for buying a mac just to run a browser, we're not living in 2010 anymore. Even Microsoft bothers to provide free VMs for developers to run their browser tests in.

frontier 5y ago

Unfortunately if you want to rank these days you have to implement these kind of things, or Google marks you site down as having poor performance. At least with a standard <img> attribute there is now a chance for a simple browser setting to turn the behaviour on/off/auto depending on connection type/etc.. unlike all of the various javascript solutions.

kingcharles 5y ago

I don't use it just for my users, I use it for my sites which are extremely image heavy and I don't want to load dozens of images that the user might never scroll to.

tomxor 5y ago

> I've got gigabit internet at home [...] Lazy loading images is at best user hostile bandwidth saving You might want to consider how lucky you are for a second.

youngtaff 5y ago

> Lazy loading images is at best user hostile bandwidth saving, and it's not even that much in this day and age. Poorly implemented lazy loading of images is probably the culprit here