LCP & Lazy Loading

Additional information regarding the performance setup:
elementor pro + wp rocket + perfmatters + asset cleanup pro + sucuri cdn (most important plugin regarding this topic)

Hi @mexxez
You’re using WP Rocket’s Lazy Loader, which is why our filters have no impact on those images. Disable it, and just use the EWWW IO lazy loader, and that filter should work just fine.

Also, in 6.3, we just added the ability to configure the “above the fold” images in your wp-config.php:
define( ‘EIO_LAZY_FOLD’, 1 );

Thank your for your response. I have deactivated lazy loading in WP Rocket as well.

The following snippet is now working:

add_filter( 'eio_lazy_fold', function( $count ) {
  return 2;
});

But, the new snippet does not work:
define( ‘EIO_LAZY_FOLD’, 1 );
define( ‘EIO_LAZY_FOLD’, 2 ); (It does not work as well. I have to try it again though.)

Combining the three snippets may even decrease performance especially Total Blocking Time and Time to Interactive.

At least on my page excluding the above the fold images does unfortunately not improve performance though. Is it possible to preload the images above the fold? Or is there another option in order to improve LCP by improve image load?

When you define something, make sure it’s only once, or you’ll get PHP errors.
Otherwise, the two methods (filter vs. define) should be doing the exact same thing. BUT, if you leave both of them in your code, the filter will normally override the define.

And indeed, NOT lazy loading an image could certainly increase your TBT and TTI values. So it’s important to consider a couple competing aspects:
1. Does it make your page faster to NOT lazy load the above-the-fold image(s)? Probably not…
2. If it’s slower, is the improvement to user experience worth the speed decrease? Or in other words, does the LCP improvement outweigh the TBT/TTI degradation?

Google thinks LCP is more important, but it’s something that needs to be checked on a case by case basis, rather than blindly telling everyone to exclude above-the-fold images from lazy load.
Notably, doing that also disables auto-scaling for those images, which might cause you to load an image much larger than necessary. Of course, that can be sometimes be fixed manually, but all that to say, proceed with caution ??

Many thanks for your response!

Well, I guess you got the point. Currently, I have been tweaking my website for core web vitals. The only issue regarding core web vitals was LCP. Search Console gave me some “hints”. But as you stated, even on my relatively tiny domain core web vitals do not paint the full picture. Thus, tweaking the domain for core web vitals is a thing I have to do more for Google SEO and SEA purposes than actual UX / CX.

Regarding define: In my setup it was not working even when the filter snippet above was deactivated. There might be a conflict with another snippet, plugin or some caching issue.

I will proceed further with the normal lazy load within above the fold images as the overall performance has been clearly the best. As written above excluding above the fold images did not let me gain any LCP improvements so far. Thus, I will target other things in order to improve LCP.

Do let me know what how you far with the lazy loading, but keep in mind, getting a fantastic LCP score on the test is somewhat irrelevant in the grand scheme of things.

As noted by Google’s engineers, it’s one of literally hundreds of ranking signals that Google uses. Content is still king, no matter what the CWV stats tell you. And the actual LCP timings from real visitors will carry more weight than the simulated LCP measured by the speed test–because it’s in their best interests to keep real people happy, rather than their bots (bots don’t generate ad revenue, real people do).