Quick test results / question
mrxkon opened this issue · 6 comments
Not sure if this is the correct place to begin this discussion, please do tell me and I can move the content to the appropriate place :).
I've just installed the plugin on 4 different websites. 3 live and 1 local for further checking out as I was a bit confused.
Now I know that the lazy definition says that it will defer loading an image until it reaches a distance from the viewport and that's defined by the browser.
It seems though that even though the plugin itself is working correctly ( tested with Gutenberg galleries/single images and the_content in general on some extra themes ). The loading="lazy" was correctly placed, but none of my browsers actually made a difference 😅.
Essentially all images were loading just like there was no tag at all eagerly and as soon as the page loads.
Not really sure if that's the expected behavior "at the moment" from browsers like I said the plugin correctly added the attribute, but practically it did not affect the latest Chrome ( Version 79.0.3945.130 (Official Build) (64-bit) ) whatsoever.
Am I missing something here regarding the browser support, or should we just focus testing only if the attr is placed properly everywhere?
Sorry if I missed any hints and looking for the wrong result here :) .
As an update and I'll close this soon, just leaving it here in case it might help, it seems that the "viewport" that Chrome registers is actually kinda huge, so you need seriously a lot of images to test this.
As an example, one of my galleries has 30 images of 700px height each in vertical order (1 image per row), and is still be loaded instantly. That's pretty much 21k pixels which doesn't make much sense to me personally at the moment, I can't possibly say that "this is lazy loading" but it's well out of our reach as that's what Chrome decided ( at least on my tests ).
Again the plugin on my end works as expected and does what it's supposed to do :) Now it's up to chrome to actually calculate the actual end of a viewport for this to be beneficial.
Assuming you tested on Chrome Desktop; might be worth testing on Chrome mobile as well, could be that on mobile the thresholds are different and that it acts more in line with your expectations there?
I will definitely run more tests in any case for the plugin itself so I'll definitely cross-check everything via mobile also and yes that makes a good point, maybe Desktops are "expected" to have way bigger thresholds since practically they should be on better connections also.
The thresholds set in Chromium currently range from 3000 to 8000 pixels depending on the type of connection you're on: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad
They are indeed huge, especially compared to what lazyload plugins use, which is more around 300 pixels
It is a challenge with lazy-loading solutions to find a good balance between lazy-loading an image late enough so that it doesn't get loaded unnecessarily and loading it early enough so that it's fully loaded once the user gets to it - because this feature is rather new, the implementation of Chromium for now is rather conservative. Based on more research, and potentially the spec evolving in the future, I am sure there will be improvements in these thresholds and how they are calculated, but for now that's where it is.
The great thing is that this would be a progressive enhancement: As soon as loading="lazy" is there, it would always pick up the latest improvements.
Closing this as it was more of a discussion/question type of ticket :) thanks all!