[Resolved] Largest Contentful Paint image was not lazily loaded

[Charbel]

Hello @David,

Hope you are doing well.

I am seeing Google PSI is raising a new Diagnostics recommendation about Largest Contentful Paint image was not lazily loaded for Desktop.
Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fmonitor-azure-ad-guest-users-with-azure-sentinel%2F&tab=desktop

I have Lazy Load enabled for all my images using Ezoic Site Speed.

I came across one of your support topic here: https://generatepress.com/forums/topic/pagespeed-penalizing-image-31-3-kb-not-lazily-loading/

Do I need to exclude the Featured Image from Lazy Loading by adding a PHP code and then exclude the class on Ezoic Side?

As a side note, the following code that you shared with me is removed since long time:

/** https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/page/2/#post-1819584
add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large'); 
        echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
        echo '<style>.page-hero { background-image: url('.$featured_img_url .');}</style>';
    }		
},0); **/

P.S. I have also PerfMatters plugin installed.

Many Thanks @David

[David]

Hi there,

that Diagnostic ( which was added in Lighthouse 8.4 – which google PSI now uses ) is simply flagging the LCP element has the loading="lazy" attribute, which was added by WP 5.x to take advantage of native lazy loading that is supported in chrome.

As you’re using a lazy loader script you can disable the WP lazy loading using this snippet:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

I don’t expect it will make any difference to performance but it may remove that Diagnostic flag.

[Charbel]

Thank you so much @David for your quick response!

Ah, so this is recently has been added.
Yes, I am using a Lazy Loader so we don’t need this feature from WP.

I disabled WP lazy loading using the snippet you shared above and it removed the Diagnostic flag in PSI 🙂

We need to keep Google PSI happy 🙂

Many Thanks!

[David]

They added it way back in 5.5…. it was a nice to add but sloppily implemented 🙂

Glad to be of help.

[Charbel]

Hello @David,

Hope you are doing well.

I need to exclude the following class from Lazy Loading on the home page. class="attachment-full size-full wp-post-image"

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcharbelnemnom.com%2F

Google PSI is complaining about the Largest Contentful Paint image was lazily loaded. However, I don’t have this issue on regular posts except for the home page.

As mentioned before in this topic, I have Lazy Load enabled for all my images using Ezoic Site Speed.

I have also this filter added that you shared with me:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Thank You @David!

[David]

Those CSS Classes are quite common, so if you use any of them its most probably going to affect other images on your site. And there is no way of passing a specific CSS class ( such as skip-lazy ) to the images in WP Show Posts.

You may want to talk to the Lazy loading plugin author, they might have an alternative method of excluding an image.

[Charbel]

Thank you @David,

I came across a similar topic here: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/

If I understood well, it’s not possible to create a filter to exclude the wp-post-image on the home page, right?

In regards to the Lazy loading feature that I am using on the Ezoic side, they have the following 5 options to create an exclusion rule, but I don’t know which one I need to use to exclude wp-post-image:

> URL (src)
> Element Attribute
> Element Name
> Class name
> Inner Text

I tried to use the Class option class="attachment-full size-full wp-post-image", but it did not work.

Could you please let me know the correct rule target that I can use to exclude the wp-post-image?

Many Thanks!

[Elvin]

If I understood well, it’s not possible to create a filter to exclude the wp-post-image on the home page, right?

Can you explain a bit more on what you mean by filter it?

If it’s about lazy load exclusion then you can use the class.

But if the context is excluding the first instance of wp-post-image then the way to go is by adding another class for the purpose of being the “first” indicator.

That’s actually what the skip-lazy class suggested on the same topic was for. It’s for exclusion of skip-lazy so the lazyload exclusion is pin-pointed.

In regards to the Lazy loading feature that I am using on the Ezoic side, they have the following 5 options to create an exclusion rule, but I don’t know which one I need to use to exclude wp-post-image:

use the “Class name” option. Set wp-post-image. (Or skip-lazy of you’re using the filter from the link you’ve provided)

[Charbel]

Hello @Elvin, Thank you for your help!

I meant by the filter is to add a new class to exclude the wp-post-image from Lazy Loading at the home page.
The wp-post-image on the home page is like the Featured Image for a single post.

Google PSI is complaining about the Largest Contentful Paint (LCP) image was lazily loaded for class="attachment-full size-full wp-post-image". However, I don’t have this issue on single posts except for the home page.
You can see it here under diagnostics for Desktops: https://pagespeed.web.dev/report?url=https%3A%2F%2Fcharbelnemnom.com%2F

No, I am NOT using the filter from the link I’ve provided here: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/

I will try to add the “Class name” option set to wp-post-image to see if the Lazy loading option that I am using on the Ezoic side will skip lazy loading the featured image on the home page.
My question is, if I excluded the wp-post-image from Lazy loading, this will affect all the images on the homepage and not the Largest Contentful Paint element which is the big image on top, could you please advise?

Than You @Elvin!

[Elvin]

I meant by the filter is to add a new class to exclude the wp-post-image from Lazy Loading at the home page.

It’s possible. The code provided by David here – https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115 – should do that.

The code should add skip-lazy class to the img element.

My question is, if I excluded the wp-post-image from Lazy loading, this will affect all the images on the homepage and not the Largest Contentful Paint element which is the big image on top, could you please advise?

Yes it will. That’s actually what the filter David provided was for. 🙂 So you can manually add skip-lazy class to a specific image. 😀

[Charbel]

Thank you @Elvin!

The code provided by David here: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115 – Will add the first-featured-image class and not skip-lazy class, could you please confirm?

As he noted, this will add the first-featured-image class to the single post featured images and the very first post in the blog/archives as this will generally be towards the top of the page on mobile devices.

I don’t have an issue with the Featured Image for a single post, it’s for the home page (wp-post-image Header Element images are displayed as a background image).

The full image on top (home page) will always change as new articles will be published, so adding skip-lazy class to a specific image does not work in this case.

Could you please elaborate?

Thanks!

[Elvin]

The code provided by David here: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115 – Will add the first-featured-image class and not skip-lazy class, could you please confirm?

Ah that’s my bad. Yes you’re correct that it adds in first-featured-image instead of skip-lazy. (my bad. this code had a lot of variation that used skip-lazy)

I don’t have an issue with the Featured Image for a single post, it’s for the home page (wp-post-image Header Element images are displayed as a background image).

It’s likely because it’s not the cause of CLS. (perhaps its not above the fold)

The full image on top (home page) will always change as new articles will be published, so adding skip-lazy class to a specific image does not work in this case.

We can forget about skip-lazy if you’re using David’s code from the link and use first-featured-image class for the lazy load exclusion.

[Charbel]

Thank You @Elvin!

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts