Automatically detect images "above the fold" and avoid lazyloading them on every page

[Nazrinn]

What problem does this address?

Currently, you can exclude a certain amount of images from Optimole's lazyload feature per page (defaults to 3). However, the amount of images above the fold often varies per pages, and when this happens, it only betters the performances of the pages which has an amount of above the fold images match that number.

What is your proposed solution?

At the very least, avoid lazyloading images that are detected as hero images (seems like hero image detection is already a feature from version 3.9.0). At best, use a system similar to LiteSpeed cache's VPI feature, like so:

Will this feature require documentation? (Optional)

Yes, it requires documentation.

[selul]

Hi @Nazrinn,

Definitely, this is something very valuable to have. However, it's important to note that the implementation of this feature could be quite complex. This is because it would require us to load the page on the browser in order to build the list of images that are above the fold. Plus, we would need to account for this functionality across different screens.

@Codeinwp/optimole I'm including you in this discussion as your feedback would be greatly appreciated. From my perspective, the implementation could proceed as follows:

• We could create a service that remotely loads the page where the images are embedded, then builds a lazyload exclusion list based on the images above the fold. Naturally, this would need to be adapted for each device type (desktop/tablet/mobile), and we would need to update the local site with the dynamically detected list.
• Alternatively, we could handle this locally by injecting JavaScript into the site to detect the above-the-fold images and update the list via a REST API endpoint.

Do you foresee any other possible solutions or have any thoughts on these suggestions?

[Nazrinn]

It would also be nice if we could at least tweak this setting depending of the page. That would be way less complex to implement than actual VPI. I've often thought being able to set options per page for Optimole would be quite useful.

[selul]

@Nazrinn, that's a very good idea, I haven't thought about this. Would you see this applying the setting per device let's say, i.e. have a different value for mobile/desktop/tablet?

[Nazrinn]

Oh yeah that might work too, straight in the general settings. Obviously not perfect but that's already an upgrade from the current setting. I think aspect ratio might also matter here. A tablet with horizontal view will need less images than vertical view, but I'm not sure if it's worth considering.

In the options, it would be good to specify what is considered "mobile" and what is considered "desktop" too (i.e.: "Screens under 560px wide is a mobile device). Perhaps make that viewport number flexible too and let the user change it if thay need it?