Exclude first # of images from lazy loading using a class

[DahmaniAdame]

Is your feature request related to a problem? Please describe.
When a slider is above the fold, it's best to exclude only the visible items instead of having to exclude all images by class.

Describe the solution you'd like
Exclude a specific number of items using a class, possible using a repeater instead of a logic*

We could form an example format the excluding to add one class per line plus the number for images separated by a coma.

Eg.:
class-name, 3

That we then process accordingly using:

add_filter( 'rocket_buffer', function ( $html ){
    return preg_replace( '/class="class-name/i', 'data-no-lazy="" class="class-name', $html, 3 );
}, 17 );

Code courtesy of @engahmeds3ed

Describe alternatives you've considered
N/A

Additional context
N/A

[DahmaniAdame]

Ticket - https://secure.helpscout.net/conversation/1444728024/244881

[mdrejhon]

Is this related to Google pagespeed LCP statistics? (#3626), maybe could be a related image performance setting for the same screen?

[DahmaniAdame]

@mdrejhon related in a way that it aims to improve LCP if there is a slider/carousel in use above the fold. But it's not related to #3626.

#3626 is about preloading the hero image (or the image linked to the LCP to be more specific), which is now part of PSI audit recommendations.

This one is more about allowing skipping lazy load on sliders/carousels when they are above the fold. Especially when there is no way to locate the first items using a unique class or attribute to locate the images' order on the slider (.slide-1, .slide-2 for example).

It's possible to do exclusions using the mentioned filter.

This feature request (#3644) is more for our product team to see if it's something that would benefit the majority of our users if added to the user interface :)

[ScottTravisHartley]

I also want to add that typically you only get the preload images warning if an image that is above the fold and loaded via JavaScript like being lazy loaded. This should fix a lot of site warnings about the image needing to be preloaded. Though, this won't fix all of them its still a simple and useful fix for most sites.

[mdrejhon]

Makes a lot of sense. That said, it does underlie the need for some additional image-performance features to be added to wp rocket because of Google making a big deal about LCP for upcoming SEO.

Having non-Javascript-powered loading of images for images above the fold does make lots of sense, so disabling lazyloading for the first 1 or 2 images does make a lot of sense.

For me personally, I only probably need one to be disabled; I would add user-friendly surgical lazyload-disables for

[X] Disable Lazy Loading for First Featured Image

So even though it's not a preload, it means the HTTP request will go out before lazyload javascript executes (and realizes the first image is always permanently visible) -- allowing it to load sooner after the HTML text is loaded -- like the big image at the top of news articles.

For some page this can potentially speed up LCP number by 1-2 seconds on slow-performing phones accessing an overseas site. (Mobile PageSpeed LCP is becoming very important for SEO soon, according to Google)

I also want to add that typically you only get the preload images warning if an image that is above the fold and loaded via JavaScript like being lazy loaded. This should fix a lot of site warnings about the image needing to be preloaded. Though, this won't fix all of them its still a simple and useful fix for most sites.

I once got a PageSpeed LCP preload warning for a large background image defined in an external CSS file (even CloudFlare merged or WP Rocket merged). Our website www.blurbusters.com and forums.blurbusters.com use a checkerboard image at the top that is defined by a CSS file, and PageSpeed complained about LCP on background images like these.

So apparently -- if the LCP hero image (whether featured or otherwise, lazyloadable or not) is a long processing chain or HTTP request chain away (main HTML file -> CSS file -> finally the image file) even without JS -- then PageSpeed seems to now warn to meta-preload it. At least it did for me.

So #3626 probably should be done at the same time as this item, because it's all "image optimization" and LCP related. We "LCP tweaking monkeys" would love all the LCP-relevant items in the same screen, ideally -- as we rush to beat the May 2021 Google SEO deadline.

I think I've succeeded by doing it manually (by hand) and halved my LCP numbers with strategic preloads! But these improvements would be a big lifesaver for other people -- who don't know how to do it manually -- and don't want to edit a stock template source code.

[NicoCaldo]

Is there a way via function.php to disable lazyload only on the featured image?

[remyperona]

@wp-media/productrocket Is this something we will want to do?

[GeekPress]

@Tabrisrp It will require some benchmarks with Native Lazyload as we are going to switch to it started to 3.10. We need to check how the browser loads the images not yet visible from a slider.

[blogtutor]

To add a little bit to the urgency and need for a resolution on this, Google will be rolling out the Page Experience ranking algorithm for Desktop starting in February, 2022:
https://developers.google.com/search/blog/2021/11/bringing-page-experience-to-desktop

We've found that on mobile it's usually pretty easy to get the first image in a blog post to appear below-the-fold (just add a sentence or two of text at the very start of the pots). On desktop, however, this isn't practical, since it would usually require several paragraphs of text.

Ideally, WP Rocket could simply not apply any lazy loading to any images that appear above-the-fold, whether it's the first image in the blog post or the header/logo image, or a profile picture at the top of the sidebar.

It also would be best if the script can just do this natively since mobile & desktop layouts vary. For example, an image at the top of the sidebar should not be lazy-loaded on desktop, but on mobile when the sidebar drops below the content, it should be lazy loaded.

Thanks!

[DahmaniAdame]

Related - https://secure.helpscout.net/conversation/1705638691/309795/

[camilamadronero-zz]

Related https://secure.helpscout.net/conversation/1782452404/325032/

[WordPresseur]

Related: https://secure.helpscout.net/conversation/1851117527/337913/

[girlie]

Related: https://secure.helpscout.net/conversation/1976315958/361477/

[piotrbak]

That's going to be handled automatically.