LCP problem with blog hero div / gb-container

Hi there,

i assume the background image is the featured image?
If so you can try this PHP Snippet:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 768px) {
            .gb-container.blog-page-hero:before { background-image: url('.$featured_img_url .');}
        }
        @media(min-width: 769px) {
            .gb-container.blog-page-hero:before { background-image: url('.$featured_img_url_full .');}
        }
        </style>';
    }		
},1000);

What it will do is to preload the featured images, the full size image for desktop and the medium_large for smaller devices.
And then overwrite the hero CSS with the relevant featured image.

Give that a shot...

Hi David.

Thank you very much for your quick reply with the code.

I already paste it inside functions.php on my child theme and after a couple of pagespeed tests it looks like the LCP got a little bit faster, but on the end it's still between 2.5 and 3.2 on MOBILE wich takes to long for passing the pagespeed test.

Do you have any other idea for speeding up the LCP for mobile devices...?

Ok so thats better - and the code is working well. I can see it loading the medium_large image and its making that image request very early.
1 of the 3 URLs now passed in 2.4s - and its image is was only 64kb.
Whereas the other 2 URLs have images over the 100kb. So its probably still the image size thats dragging the LCP down.

You can try the updating the snippet to this, where we load the medium image for devices up to 400px:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url_small = get_the_post_thumbnail_url(get_the_ID(),'medium');
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 400px)" as="image" href="'.$featured_img_url_small.'"/>';
        echo '<link rel="preload" media="(max-width: 768px) and (min-width: 401px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 400px) {
            .gb-container.blog-page-hero:before { background-image: url('.$featured_img_url_small.');}
        }
        @media(max-width: 768px) and (min-width: 401px) {
            .gb-container.blog-page-hero:before { background-image: url('.$featured_img_url.');}
        }
        @media(min-width: 769px) {
            .gb-container.blog-page-hero:before { background-image: url('.$featured_img_url_full.');}
        }
        </style>';
    }		
},1000);

Or you will need to look at optimizing the images to get the file size down.

Hi David.

Thank you very much for the updated code. I've tried the new version with the additional medium image, but this seems to slow down the LCP again. So I already have changed back to the first code wich gave a small boost.

Anyway. You're right. I still have to do some optimizations of the blog posts from the WP theme change and during that, I will also try to optimize the images again and check if this brings a breakthrough.

For this time thank you very much for you help & the code again.

Cheers Christian

I made small change to the code here:

https://generatepress.com/forums/topic/lcp-problem-with-blog-hero-div-gb-container/#post-2231261

It was to include a min-width value to this preload:

echo '<link rel="preload" media="(max-width: 768px) and (min-width: 401px)" as="image" href="'.$featured_img_url.'"/>';

As previously the code would have preloaded both the small and medium images.... might be worth trying ?

Hello David.

That's amazing. Thank you.

The small change to the code brings some more speed. The most articles I've checked so far got a LCP between 2.3 sec and 2.5 sec. and I think some more image optimizations will do the rest.

Thank you so much for your support. ;)

Awesome - glad to be of help!

Hi David,

I have the same LCP background image issue. As the CSS selector changes from page to page, do we need to load this code for each page on the site? Any way to make this generic to all pages?

Much appreciated :)

Hi there,

How is your hero container being added to the site ?