[Support request] Preload Background image

[Rostyslav]

Hello,

I want to reduce the LPC of my pages. I perfectly know what really makes that LPC high is the background image. What is the best choice to avoid that?

1) Preloading that image?
2) Lazy loading that image?

If so, how can I achieve that manually?

[Leo]

Hi there,

Does this thread help?
https://generatepress.com/forums/topic/preload-background-image/

[Rostyslav]

So, which is the best choice to avoid that?

1) Preloading that image?

or

2) Lazy loading that image?

I use a container with a background image at the beginning of all my pages.

[Elvin]

Hi there,

Preloading is generally the way to go.

Consider reducing the size of the container as well if possible.

[Rostyslav]

Okay,

I have a different background image on all my pages. How can I preload them? What code and where should I write it?

Thanks!!!

[David]

Hi there,

how are you adding the image ? Is it within the post editor to the container block background ?

[Rostyslav]

I added a container with generablocks and then background > URL image.

[David]

Unfortunately there isn’t much that can be done about that – there a static image so theres no way i can dynamically request that image to be preloaded.

[Rostyslav]

How can I do it manually?

[David]

Not sure about this – but one option you can try is:

1. Set the Featured Image on the post, using the same image as the container background.
2. Then Disable it so it won’t display:

https://docs.generatepress.com/article/disable-elements-overview/

3. Add this PHP Snippet to the site

add_action( 'wp_head', function() {
    if( is_singular() ) {
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" as="image" href="'.$featured_img_url_full.'"/>';
    }		
},1000);

[Rostyslav]

Is a good idea instead using a plugin? So I can manually select which image to preload.

[David]

If there is a plugin that does that and it makes the process easier then for sure 🙂

[Author]

Posts