[Resolved] How to pre-load a background image in the page-hero element?

[Adrien]

Dear GP Team,

How can I pre-load a background image in the page-hero element?

Thank you for your help. Best, Adrien.

[David]

Hi there,

simplest method would be to add an image block somewhere on your page that contains the image you’re using in your header element, and then use some CSS to hide the image. As this image is loaded in the HTML the request for that image will be made before the CSSOM is generated.

You could even just add the HTML for the img in the header element with an inline style eg.

<img style="display: none;" src="full_url_to_image" />

If not then there are a few preloader plugins available in the WP repository.

[Adrien]

Hello David, Thank you!

In fact the preloading I was talking about was a directive defined within a <link> element for example as <link rel=”preload”>. Generally it is best to preload your most important resources such as images, CSS, JavaScript, and font files. This is not to be confused with browser preloading in which only resources declared in HTML are preloaded. The preload directive actually overcomes this limitation and allows resources that are initiated via CSS and JavaScript to be preloaded and define when each resource should be applied.

Hence, how can I change this using your solution into a real preloading

<img style="display: none;" src="full_url_to_image" />

into something like this

<link rel="preload" href="image.png">

I also have 3 little questions:

1/ By doing your genius method am I not loading the image twice?

2/ What image URL path should I enter for the best pre-loading speed? Should it be my full CDN image URL or the relative path?

3/ How can I check on my google inspector that the image is really preloaded?

Thank you so much David for your support.

PS: Here is the context as to why I’m doing this: my LCP is quite high on Google speed test mobile due to this background image banner: LCP = 3.3s. I don’t know what to do to solve this. I’ve read all the posts in the GP forum about this issue but couldn’t figure out a solution.

[David]

More info here on the link preload:
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Including_media

1.If the image URL is identical then only one image request will be made.
2.The path should be identical in your link/img as the background image.
3.In the Developers tools > Network tab you can see when the image request is being made.

Regarding LCP – check your FCP timings first – if there is not a huge difference between FCP and LCP then you should improve FCP first as this will improve all other stats.

[Adrien]

Dear David,

Thank you very much for taking the time. Everything is clear.
I will work according to your given directions.

Best. Adrien

[David]

You’re welcome

[Till]

Hey Adrien, Could we exchange emails? I have had the same challenge regarding preloading the background image in the past. And I am very curious as to how you went about it on your website!

[Elvin]

Hi Till,

I believe you’ve asked the same question and was answered here:
https://generatepress.com/forums/topic/is-it-possible-to-add-a-srcset-to-the-feature-image/

Is it not working? Let us know. You can open a new topic about this or reopen the older one if you require.

Let us know.

[Author]

Posts