Preload Largest Contentful Paint image

Hi!

Since two weeks ago I started to receive this warning in lighthouse reports:
Preload Largest Contentful Paint image, and it’s linked to the biggest image above the fold.

Is there something we can do to preload this image? It comes from a flex block…

Thanks!

Hi, Vlad!

https://paste.pics/BRG1X You can see that the loading times of the images are not the problem… al of them load in 20ms or less.

I also tried to use this setting, but it creates more problems: https://forum.tagdiv.com/topic/defer-offscreen-images-2/

Any other suggestion?

Thanks!

Hi, Vlad!

I do know this article (and many others about the issue..). Thanks for sharing.

But what I asked in the first post was: is there a way to preload this image? It is a flex block, that changes everyday, and thus I cannot preload a url. Is there a way to preload a div class?

There is a song, by Prince, that resumes the mood for this Friday:

Still waiting / Waiting for that love
Still waiting / I wish on every star above
Still waiting / I’m waiting for the love to come around.
(Waiting for the love) Don’t you know that I’m waiting
(Waiting for the love) Say…
(Waiting for the love) To come around now

As this didn’t get fixed in the latest update, is there a way to keep the featured images from lazyloading as that is what is causing the Largest Content Paint Image to run high. WP Rocket actually has a section to list the files not to lazy load, and I’m assuming there must be code to do that on here. Thanks!

Hi, @gooma2 !

The support seems not to be interested in resolving this issue, but WP-Rocket released a helper plugin to try to mitigate this issue:
https://github.com/wp-media/wp-rocket-helpers/tree/master/lazyload/wp-rocket-exclude-x-first-images-by-attribute

If you use WP-Rocket (and their lazyload feature, not the buggy one from the theme), you can install this helper plugin and indicate there what class of image you want not to lazyload. I did that, and worked like a charm!

Hope this helps!

Hi jornalosaopaulo,

Is there a class for featured images? I would like to preload this rather than lazyload, and have WP Rocket, I just don’t know what exactly to do?

Hi @azurik !

If I am not wrong, the div class is ‘featured-image’; but, if you put ‘entry-thumb’ it works, too (and this I know for a fact: it is the class that I used in my setup).

With that helper plugin, you will have to edit the php file installed, and change two things: what class you do want to exclude from lazyload, and how many of these images you want to exclude.

If you want to not lazyload only the featured image, you can put 1 as the value (the default is 2).

You can do that in the plugin editor, in the left menu in the WP Dashboard.

Hope this helps!

Give that man a gold star! Thanks for sharing this valuable information! Have you figured out how to preload the featured image class yet?

hello,

would you be able to include an example of how you did this as all I can see is Div Class for the featured image and the JS Path is this

document.querySelector("#tdi_45 > div > div > div > div.td_block_wrap.tdb_single_bg_featured_image.tdi_56.td-pb-border-top.td_block_template_1 > div")

I can’t figure out how to put this in the way the PHP file is.

Any help on this would be greatly appreciated.