Pre-load Hero Header Image

Hi Sam,

Have you tried Tom's snippet here?
https://generatepress.com/forums/topic/image-optimization-on-mobile-lcp/#post-1682167

You can try testing with this and let us know if it's enough.

Else, we may have to preload each size on the img srcset.

Hi Elvin

Thanks, I have applied it but appears not to be pre-loading?

I still have the snippet in the top of my post enabled - would that be effecting it ?

Hi there,

experimental but give this a shot:

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) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        </style>';
    }		
});

This line is assuming you're using the default Large Image for desktop display:

$featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');

If you have filtered the size then you can change the full to the appropriate image size.

Ummmmmmmmm it seems to working, I am going run a few speed tests over night to see how it preforms - thank you

The only thing I have notice was an warning in Dev tools

The resource <url of image> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

I think that nailed it :)
Checking the dev tools i only see the appropriate size image load based on browser size.
Regarding the preload warning the as="image" is an appropriate value. Curiously i am not seeing that in my dev tools even if throttle the network and slowdown the CPU

They should call you the PHP Maverick!.....i feel the need, the need for PHP speed

I have let the site sit over night and run a few PSI tests - bizarrely, i kept seeing LCP go up and down and the page load size was also fluctuating at the same time.

What I have noticed is

- Although the image is being preloaded i am now seeing two instances of the image, a webp and a jpeg (seem to happen on the 2nd/3rd reload onwards)
- Its like its being preloaded then reloaded later in the chain

I can see that now .... thats a headache. What plugin / service are you using to do the webP conversion ?
As the only solution i can think of is to get that plugin to ignore those two preload links ( ie. stop converting them to webP ).

I use Shortpixel to create the WebP image then WPRocket to server it, it creates a Webp cache file.

The shortpixel method of updating the image tag to picture or modifying the Htaccess file caused me other issues

What i have noticed is, on my live site - which is using the code below - it only server the jpeg and no webp

add_action( 'wp_head', function(){
  $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
  if ($featured_img_url) {
    echo '
    <style>
    @media(max-width: 768px) {
      .page-hero {
        background-image:url(' . $featured_img_url . ');
      }
    }
    </style>';		
  }
});

Hold the line caller

I thought I would retest the <picture> method in shortpixel - knocked 0.3-0.5sec off LCP (mobile)

(Documenting the very basic steps for anyone finding this thread later on who is using Webp, ShortPixel and WP Rocket)

-Disable serving of webp in WPRocket
-Within SPIO enable serving of webp using the <Picture> tag syntax (Each tag will be replaced with a <picture> tag that will also provide AVIF and WebP images as a choice for browsers that support it)
-Add the following code 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) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        </style>';
    }		
});

-Clear all Caches

I think this - Disable serving of webp in WPRocket is the main resolution to the issue i raised here. I can only assume that function searched and replaced any image urls and swapped them to webp. Wherase the SPIO method is actually replacing <img> elements with <picture> so the preload in my function doesn't get affected.

Is this now resolved ?

Apologies - wanted to wait until all the server caches cleared over night (quirk of my host that it cant be cleared without clearing live site)

So ... I now have the both the full-sized image and med-large being preloaded on mobile

On desktop its fine, only the full-sized image is being preloaded

In your Header Element - disable the Featured Image background. The function i provided does that job for you.

I am not sure I follow - the background is disabled within the element header config

Although you gave me some CSS on another ticket to set the background overlay (as we swapped it out from a liner gradient to improve speed)

.page-hero {
  position: relative;
}
.page-hero:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(20, 10, 4, 0.33);
}

.page-hero .inside-page-hero {
  z-index: 1;
  position: relative;
}

I can still see the Header Element background image being requested in the generate-inline CSS. Looking back at this last code:

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) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        </style>';
    }		
});

If the header element background image was set to NONE - then in theory there should be NO image on desktop....
Can you double check the background image in the elements settings?