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

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

Home Forums Support How to pre-load a background image in the page-hero element?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1602758
    Adrien

    Dear GP Team,

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

    Thank you for your help. Best, Adrien.

    #1602764
    David
    Staff
    Customer Support

    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.

    #1602811
    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.

    #1603565
    David
    Staff
    Customer Support

    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.

    #1605749
    Adrien

    Dear David,

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

    Best. Adrien

    #1606045
    David
    Staff
    Customer Support
    #1694444
    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!

    #1695115
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.