[Support request] Preload images – is this code ok?

[Ales]

Hi,

I would like to try to preload my images to improve the speed of my site, especially LCP. I think there is no site-wide solution as some plugin, etc., so my friend created a custom code for it:

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.'"/>';
});

Can this work when it’s used in the Code Snippets plugin? I want to check with you if it’s okay to use because I don’t want to mess anything on my site.

Thanks!

[David]

Hi there,

yep – that should work in Code Snippets – if it causes an issue then simply remove it.

But to note – that code will preload the Full Size image – which may not necessarily be the image that the browser loads or even generate the correct URL filename – as WP uses src-set images…. you may find you just end up loading 2 x images.

[Ales]

Hi David,

Thanks for your reply! That’s a good spot. Do you think you could check for me if it would work on my site, please? I attach one example URL to the “Private information” field. I certainly don’t want to load 2 x images.

Is there any way how to actually always preload the featured images efficiently and correctly? It looks like there is no solution for this, no plugin, nothing… This is kinda weird because it can really help the page speed, right.

Thanks a lot!

[David]

I can’t actually see that preload code in the head of the site. How did you add it ?

Preloading is not necessarily a way to improve loading time. All that happens is you make the request earlier on in the loading of the site – so you may just increase the FCP time….

Its not easy to get the specific size thats required.
WP outputs the image using src-set – which the browser chooses the best size for the device it is displayed on… which makes it impossible to know upfront what size image to load. So to be honest – i cannot see this working as you would like it to.

[Author]

Posts