-
Alistair Shepherd
I use a technique where I change lazy to eager in certs in conditions, the the menu trigger being hovered. It's a little unwieldy but easier to control and set up than a custom JS solution.
Haven't tested it very extensively mind.
-
Barry Pollard
Not sure about Firefox and Safari but for Chrome they are loaded:
web.dev/browser-level-…IMHO JS-based lazy loading is an unnecessary JS overhead and if adding for just this use case you should test if it’s a net win overall. I suspect not.
-
Nicolas Hoizey
Nice idea! 🤔
But even with ˋlazy`, I wonder if it loads earlier than necessary.
-
Anthony Ricaud
There are many definitions for « hidden » : out of viewport, display: none, opacity: 0, etc. Don’t think there’s one answer for all those cases.
-
Nicolas Hoizey
I still think it’s not clear when in-viewport-but-hidden-lazy-images are loaded.
CSS needs to be ready, but some JS useful for above the fold rendering or behaviors might still be waiting to load/execute. Or are lazy images delayed after that anyway?
-
Nicolas Hoizey
I agree, and I still think some use cases require JS.
For example, I don’t want to load 20 photos in a carousel if users probably will see only 4 or 5 of them. Only JS can do that.
-
Barry Pollard
Seems like an easy enough thing to test though. And therefore get an answer for each browser.
-
Barry Pollard
I think there’s a question as to whether a 20-image carousel is a good thing. Especially if most people only see 4-5!
This is also one of the examples (but only 4) advised to lower the priority:
web.dev/priority-hints…But sure, there’s no absolutes and maybe JS is better here.
-
Nicolas Hoizey
I agree, a 20-image carousel is probably a bad idea most of the time.
But I often have to optimize performance on an existing site, as it is feature wise. 🤷♂️
So lazy and fetchpriority are great improvements, but I still need JS sometimes unfortunately.
-
Anthony Ricaud
Carousels and native lazy loading work well together. I implemented it on
i-make.com/fr/catalogue/p….
-
Nicolas Hoizey
What triggered this discussion is that I'm currently working on improving performance of a site with 59 images hidden in a "mega" menu.
They were initially loaded first (in HTML order), before images visible in the viewport, including LCP. 😅
-
Barry Pollard
Well 59 hidden images in HTML above the main content is an the extreme end. So maybe best not answered with a generic question without those details! 😉
-
Barry Pollard
Fetch priority helps, but many preload important content in this case for other browsers.
Still not convinced JS lazy loading is good option here. Will it draw the images quick enough once menu open?
But, as I say there are no absolutes, so test.
-
Alistair Shepherd
I was under the impression that with JS enabled, loading lazy and display:none an image wouldn't load at all, per spec
I don't know if that *is* the case but I believe it should be
-
Barry Pollard
Well you nerd-sniped me and it appears the above FAQ is incorrect!
Hiding image with CSS does stop loading="lazy" images from being loaded in Chrome and Safari, but not Firefox (where your carousel also over loads).
Note opacity:0 images are not "hidden" so don't count.
-
Nicolas Hoizey
You're right! 😔
-
Nicolas Hoizey
But do you have product pages with more items in the carousel?
-
Nicolas Hoizey
"Will it draw the images quick enough once menu open?"
→ I load these images after the `load` event, so later than with native lazy loading (I guess), but before the user tries to open the menu.
Does it make sense?
-
Nicolas Hoizey
It looks like it would load anyway:
web.dev/browser-level-…
-
Barry Pollard
It does. But again you need to weigh up that complexity versus the value.
But it appears, native lazy loading may work for you anyway - so advise you test that:
twitter.com/tunetheweb/sta…
-
Anthony Ricaud
-
Anthony Ricaud
Given Firefox's current market share, I'd be inclined to keep the simple `loading=lazy` implementation and file a bug with them to fix it.
-
Nicolas Hoizey
But it doesn't work in Firefox, so I'm not really inclinded to do it.
-
Anthony Ricaud
Have you considered marking the images as `loading=lazy` in the HTML and on the load event, removing the loading attribute in JS?
Seems more robust than a lazy loading JS version that breaks if JS disabled or JS asset does not load.
-
Barry Pollard
-
Alistair Shepherd
It uses the same rules as IntersectionObserver, which does not return isIntersecting as true for something that's display none.
html.spec.whatwg.org/multipage/urls…It's definitely worked like that for Chrome and FF in the past when I've tested it, but haven't tested recently
-
Nicolas Hoizey
Ok, thanks.
By the way, I wonder why there is up to 5x in srcset, and with the exact same image for 1x, 2x, etc. Did I miss something? 🤔
-
Alistair Shepherd
That quote in
web.dev does confuse me though, it definitely suggests otherwise. Unfortunately I can't test it at the moment
-
Nicolas Hoizey
During some tests with `loading="lazy"` on images hidden in the menu, they where loaded anyway, just a little later (in Chrome), so I thought it was not the best solution.
But I think I have to dig deeper, it looks like they should not load, at least in Chrome.
-
Barry Pollard
Your choice. Personally I'd go with @anthony_ricaud's take 🤷:
twitter.com/anthony_ricaud…The page still works in Firefox, it's just not as performant. Same as other browsers that don't support loading="lazy" at all.
-
Nicolas Hoizey
Well, it looks like you were right after all:
-
Barry Pollard
That's what you said you wanted two tweets up?
Here's the test I used btw:
resource-loading-examples.glitch.me/lazy-loading.h… Only two of the "Illustration" images should be loaded: one without loading="lazy" and one with and "opacity:0". The rest should not be loaded.
-
Nicolas Hoizey
I said that I wanted them to load even later… 😁
But from our discussion, I understand that they shouldn't load at all, with only native lazy loading.
I'm a bit lost. I'll make some tests next week.
Thanks for the documentation update. 🙏
-
Nicolas Hoizey
It looks like only 2 load in Firefox also.
Time to sleep! 😴🛏️
-
Barry Pollard
Hmmm you're right. Must have done it wrong when I tested that.
-
Nicolas Hoizey
🤣
This is so frustrating!
I'll try native lazy loading in the menu and test with several browsers.
But next week.
-
Barry Pollard
OK Firefox doesn't load if you use inline styles, but does load it if you use a class from an external CSS, or the hidden attribute (which effectively is the same as using a class). Added a 6th test. So it's a bit of a gamble in FF.
-
Barry Pollard
And an update and a restart of Firefox fixed it for me! Well that saved me filling a bug.
So all good in Firefox 105.0.3. Not sure what I was on before as I don't use Firefox that often.
-
Nicolas Hoizey
It’s so frustrating when you do the right thing, and people break it after, intentionally or not. 😕
-
Anthony Ricaud
Well, I didn't finish that work in time so it was never in the project.
-
Nicolas Hoizey
Ok !
Jon Sneyers