[Support request] preload featured images

[ahmed]

I have optmized my site for speed. but i still have issues with high LCP. the main componenet that is cuasing the problem is my featured images.

I do use lazy loading for my images. i did add filter to make an exception for featured images but without any improvement of my LCP.

Is there is a piece of code that can “preload” my featured images all over the site?

[Elvin]

Hi there,

You can try to preload your featured image by using the PHP snippet provided on my reply here:
https://generatepress.com/forums/topic/i-want-to-get-the-featured-image-url-of-blog-post/#post-1514023

[ahmed]

Hey Elvin,

thanks for your reply.

i have added the code in a code snippet. it doesn’t seem to make a difference in LCP.
it doesnot to preload the image when i see the waterfall on GTmitrix.
I also deactivated lazy loading, without help either.

Any idea why it is not working?

Note: i cleared cache in both SG optmizer and cloudflare.

thanks again

[Elvin]

Can you tell us what exact code you’ve copied and pasted and how you’ve added it(code snippets, child themes, hook element, etc)? Let us know. thanks.

[ahmed]

i have added the following code as a code snippet:

add_action( ‘wp_head’, function(){
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),’full’);
echo ‘<link rel=”preload” as=”image” href=”‘.$featured_img_url.'”/>’;
});

[Tom]

Hi there,

You shouldn’t need to preload your images if they’re using lazy loading.

If you turn on lazy loading and open your “Network” tab in developer tools, you’ll be able to see exactly what is and isn’t loading when you first load your site. As you scroll down, you’ll see the images load as they appear on the screen.

[ahmed]

Hi Tom,

the problem is that LCP is high due to delay in my featured image loading late, either with or without lasy loading.

so i actually need and want to use “preload”, as i can see my featured images loading later than CSS, many other images on the page.

Do you have any idea why the above code didn’t work? i believe that code was run correctly.

or is there another code i can try to use?

Thanks

[Tom]

That code looks like it should work. Can you link us to your page?

[ahmed]

Sure. here is a typical post link:
https://www.benseena.com/cbc

[David]

Hi there,

in your Code Snippet is the snippet enabled and is set to ‘Run everywhere’ ?

[ahmed]

Hi David,

I always read your answers in the forum. your contribution to the forum are very useful.

Code snippets are active and marked to work everywhere. However, i learned yesterday that code snippets sometimes does not run the code.

so i did use the code in function.php which seem to work. however, it didn’t change my LCP due to calling the image link twice, probably due to choosing the incorrect image size.

please note, i do use a plugin to optmize image (EWWW image optimizer).

Any idea how to solve this?

[David]

I ran a pagespeed insights test and on the post you provided.
The LCP element is actually the banner text and not the featured image.

Looking at the report the main issue it raises is: Reduce initial server response time

I ran a GT Metrix report:

https://gtmetrix.com/reports/www.benseena.com/bLd1VfhY/

You can see on the Waterfall report that there are long request waiting times.
This may be down to your server location. But i would speak to your host to see if they can explain the long wait times.

[ahmed]

Regarding server, speed does fluctuate and i cannot tell you how many times i contacted them for that. no difference.

yeah i actually added this text box to push my featured image down.
i’m actually considering to use an image CDN.

i’m looking for one that is reasonably priced and fast in loading images.
i used shortpixel and Gumlet, both actually slowed down my site. do you recoomend an image CDN?

Any other advice to improve loading time for images above the fold?

Thanks

[David]

Don’t have a great deal of experience with Image CDNs.
Personally i would load any above the fold image from the sites server, and ensure it has NO lazy loading applied to it – if the image is the LCP element, then Lazy Loading will increase your LCP time.

[Author]

Posts