Firefox Lazy-Loading Images

[NinJake]

https://www.bleepingcomputer.com/news/software/mozilla-firefox-to-support-chromes-image-lazy-loading-feature/

 

To those of you interested in the workings of Firefox... Available in the Firefox 75 Nightly build you can now test the "lazy-loading" feature. Instead of loading all images on a web-page at once, it will only load images as they become visible on your display. Personally, I'll end up waiting for it to come out in a normal release but for those who can't wait you can give it a test now!

 

Chrome users have already had this feature in their browser, so while it's not a "bleeding-edge" feature that's exclusive to Firefox... optimization is good.

[Bombastinator]

22 minutes ago, NinJake said:

https://www.bleepingcomputer.com/news/software/mozilla-firefox-to-support-chromes-image-lazy-loading-feature/

 

To those of you interested in the workings of Firefox... Available in the Firefox 75 Nightly build you can now test the "lazy-loading" feature. Instead of loading all images on a web-page at once, it will only load images as they become visible on your display. Personally, I'll end up waiting for it to come out in a normal release but for those who can't wait you can give it a test now!

 

Chrome users have already had this feature in their browser, so while it's not a "bleeding-edge" feature that's exclusive to Firefox... optimization is good.

The one that is worrying me at the moment is my firefox is claiming it’s going to stop supporting YouTube if I don’t update it but I DID update it and it’s still claiming it will do it.

[NinJake]

1 hour ago, Bombastinator said:

The one that is worrying me at the moment is my firefox is claiming it’s going to stop supporting YouTube if I don’t update it but I DID update it and it’s still claiming it will do it.

Not too sure where you're getting that from. What OS are you using, and what version of Firefox is installed? Any add-ons or extensions?

[Bombastinator]

44 minutes ago, NinJake said:

Not too sure where you're getting that from. What OS are you using, and what version of Firefox is installed? Any add-ons or extensions?

IOS 13.3.1, iphone7plus, firefox 22 (17157).  It claimed I had to update everything so I did.

[NinJake]

9 minutes ago, Bombastinator said:

IOS 13.3.1, iphone7plus, firefox 22 (17157)

Hmm, well I've got android and there are 2 versions of firefox available. There's the standard firefox and then there's "firefox focus". My normal firefox is version 68.5.0 so I'm not too sure how you have such an old version unless the Apple store is lagging behind for some reason?

[2FA]

6 minutes ago, NinJake said:

Hmm, well I've got android and there are 2 versions of firefox available. There's the standard firefox and then there's "firefox focus". My normal firefox is version 68.5.0 so I'm not too sure how you have such an old version unless the Apple store is lagging behind for some reason?

They just have a different versioning number on the iOS build, it's not out-of-date.

 

2 hours ago, Bombastinator said:

The one that is worrying me at the moment is my firefox is claiming it’s going to stop supporting YouTube if I don’t update it but I DID update it and it’s still claiming it will do it.

You have it backwards, Firefox isn't going to stop supporting Youtube, Youtube is claiming it's going to stop supporting Firefox. I wonder if it has to do with the fact that you're using the old Youtube UI.

[Kisai]

6 hours ago, NinJake said:

https://www.bleepingcomputer.com/news/software/mozilla-firefox-to-support-chromes-image-lazy-loading-feature/

 

To those of you interested in the workings of Firefox... Available in the Firefox 75 Nightly build you can now test the "lazy-loading" feature. Instead of loading all images on a web-page at once, it will only load images as they become visible on your display. Personally, I'll end up waiting for it to come out in a normal release but for those who can't wait you can give it a test now!

 

Chrome users have already had this feature in their browser, so while it's not a "bleeding-edge" feature that's exclusive to Firefox... optimization is good.

This feature is useful on sites using crappy frameworks that have this feature but are misused (eg Korean and Japanese "webtoon" format, Twitter and Facebook infinite scrolling feeds, and so forth)

 

However it doesn't really improve any other site setup, including those annoying-as-hell one-slide-per-page clickbait sites.

[LAwLz]

10 hours ago, Bombastinator said:

IOS 13.3.1, iphone7plus, firefox 22 (17157).  It claimed I had to update everything so I did.

<image>

That's not a Firefox message. That's Youtube.com telling you that Youtube will stop supporting your setup.

It probably has to do with the fact that you're using the desktop version of Youtube on a mobile browser.

[RejZoR]

Firefox has an addon that does this if you want to use it in Stable version of Firefox (it also does some clever preloading to speed things up):

https://addons.mozilla.org/en-US/firefox/addon/faster-pageload/

[Bombastinator]

1 hour ago, LAwLz said:

That's not a Firefox message. That's Youtube.com telling you that Youtube will stop supporting your setup.

It probably has to do with the fact that you're using the desktop version of Youtube on a mobile browser.

I am aware that it is a google message.  What is odd to me is that the claim that updating the browser will work does not seem to actually help.  I updated the browser but the warning remains.

[LAwLz]

1 hour ago, Bombastinator said:

I am aware that it is a google message.  What is odd to me is that the claim that updating the browser will work does not seem to actually help.  I updated the browser but the warning remains.

It's probably just a generic message, and they want you to download Chrome.

[Guest]

17 hours ago, NinJake said:

https://www.bleepingcomputer.com/news/software/mozilla-firefox-to-support-chromes-image-lazy-loading-feature/

 

To those of you interested in the workings of Firefox... Available in the Firefox 75 Nightly build you can now test the "lazy-loading" feature. Instead of loading all images on a web-page at once, it will only load images as they become visible on your display. Personally, I'll end up waiting for it to come out in a normal release but for those who can't wait you can give it a test now!

 

Chrome users have already had this feature in their browser, so while it's not a "bleeding-edge" feature that's exclusive to Firefox... optimization is good.

Interesting that is is being made part of the browser. I do it server side when I build a site, or use a framework that does it server side. If it going to be a standard feature of browsers in the future it may not be worth me adding the overhead.

[NinJake]

2 hours ago, LAwLz said:

It's probably just a generic message, and they want you to download Chrome.

It seems to be related to "desktop view" and firefox. When I switch to the desktop view in firefox it says "This version of YouTube is going away soon. Switch to the new YouTube" -- Yet when I use chrome and switch to desktop mode (either via chrome settings or the youtube page settings), it's fine.

 

Either way, I wouldn't put it past Google to do anything other than attempt to lock you into their ecosystem.

[Doobeedoo]

Yeah we uavd this feature on other browsers. 

Hey, there's Edge now heh. 

[PLME888]

On 2/13/2020 at 10:16 PM, Bombastinator said:

IOS 13.3.1, iphone7plus, firefox 22 (17157).  It claimed I had to update everything so I did.

why not use the Youtube App from the App Store?

[Bombastinator]

27 minutes ago, PLME888 said:

why not use the Youtube App from the App Store?

Because the “skip ad” button still works and I don’t have to go fumbling for the slider to watch yet another 5 minute long ad that’s actually longer than the video I’m trying to watch.  Also it’s what the browser goes to.  The YouTube app is on my phone.  Why should I quit out of a page I’m looking at with an embedded video and go hunting around for an app just so I can see a video?

[Colonel_Gerdauf]

Is this lazy loading strictly in the scope of the view-port and visible portions of the page? Because if it is, it would be something that I personally might find annoying depending on how this would be implemented. Don't worry, people, the amount of times most of you run into situations I am referring to is near zero anyways; I am just very picky on aesthetic functionality.

If I had a say in this, I would have wanted the lazy loading mechanism to start fully loading the images from an area 50% (of the display size) below the view-port, and have the images idle in a semi-rendered state otherwise. But again, this is one guy versus millions; if I want a tweak of something that wasn't even going to affect 99.999987% of people period, Firefox will not give a damn.

[LAwLz]

7 hours ago, Colonel_Gerdauf said:

Is this lazy loading strictly in the scope of the view-port and visible portions of the page? Because if it is, it would be something that I personally might find annoying depending on how this would be implemented. Don't worry, people, the amount of times most of you run into situations I am referring to is near zero anyways; I am just very picky on aesthetic functionality.

If I had a say in this, I would have wanted the lazy loading mechanism to start fully loading the images from an area 50% (of the display size) below the view-port, and have the images idle in a semi-rendered state otherwise. But again, this is one guy versus millions; if I want a tweak of something that wasn't even going to affect 99.999987% of people period, Firefox will not give a damn.

I am not sure what situation you're referring to, but this feature is something the web developers has to configure on their site.

It works by adding the loading='lazy' option to an image tag.

 

This is how you specify that an image should be loaded regularly, in HTML:

<img src=https://LinkToImage.com/AnImage.jpg>

 

This is how you use the "loading lazy" feature that Chrome and now Firefox supports.

<img loading='lazy' src=https://LinkToImage.com/AnImage.jpg>

 

 

Web developers are already doing this exact feature, but instead of native support in browsers they have traditionally done it through JavaScript. Now (soon) that it's a native feature of the browsers, developers can eliminate some JavaScript on their sites while still maintaining the same functions, which should help with speed.

 

 

So how this feature will work will vary from site to site depending on how the developers implement it.

[Colonel_Gerdauf]

7 hours ago, LAwLz said:

I am not sure what situation you're referring to, but this feature is something the web developers has to configure on their site.

It works by adding the loading='lazy' option to an image tag.

 

This is how you specify that an image should be loaded regularly, in HTML:

<img src=https://LinkToImage.com/AnImage.jpg>

 

This is how you use the "loading lazy" feature that Chrome and now Firefox supports.

<img loading='lazy' src=https://LinkToImage.com/AnImage.jpg>

 

 

Web developers are already doing this exact feature, but instead of native support in browsers they have traditionally done it through JavaScript. Now (soon) that it's a native feature of the browsers, developers can eliminate some JavaScript on their sites while still maintaining the same functions, which should help with speed.

 

 

So how this feature will work will vary from site to site depending on how the developers implement it.

 

What I meant, is that if the lazy loading is bound just below the visible portions, when you scroll up or down, you will still see the images not completely rendered for a moment or two. For a normal joe, this is not a big deal, as given their browsing habits, there is zero need to see the image fully rendered off the bat upon on visible view-port. The thing is though, that is important for me in particular.

 

Let me give an example; suppose you have a screen of 1920x1080. You are accessing a web-page of images (for argument's sake, DeviantArt), that with the browser zoom set, has the height of 51'200px. What I want as a  minimum of implementation is that 540px above and/or below the screen of the page is where the images get fully rendered, and beyond that is where the images rest in a semi-rendered state.

 

PAGE_TOP

 

23'460px - images in idle

---

 

540px - images get fully rendered here

---

 

1080px view-port

24'000px-25'080px visible portion of webpage

 

---

540px - images get fully rendered here

 

---

25'580px - images in idle

 

PAGE_BOTTOM (512'00px)

[TechyBen]

20 hours ago, Colonel_Gerdauf said:

 

What I meant, is that if the lazy loading is bound just below the visible portions, when you scroll up or down, you will still see the images not completely rendered for a moment or two. For a normal joe, this is not a big deal, as given their browsing habits, there is zero need to see the image fully rendered off the bat upon on visible view-port. The thing is though, that is important for me in particular.

 

Let me give an example; suppose you have a screen of 1920x1080. You are accessing a web-page of images (for argument's sake, DeviantArt), that with the browser zoom set, has the height of 51'200px. What I want as a  minimum of implementation is that 540px above and/or below the screen of the page is where the images get fully rendered, and beyond that is where the images rest in a semi-rendered state.

 

PAGE_TOP

 

23'460px - images in idle

---

 

540px - images get fully rendered here

---

 

1080px view-port

24'000px-25'080px visible portion of webpage

 

---

540px - images get fully rendered here

 

---

25'580px - images in idle

 

PAGE_BOTTOM (512'00px)

I think you could force this in the browser, with a little "hack". Pretend the view window is 50% bigger, then all the images would get cached/loaded before you scroll to them, and the site would feel less laggy... Or stretch out the window to that size. XD