[Resolved] Pre-load Hero Header Image

[Sam]

There are a number of code snippets in the forum that do just this but all with slight variation, not sure how to modify to fit my need.

I am currently using the following snippet to serve a smaller sized image on mobile for my post hero (single post feature image)

But how can i preload these and its full sided brother?

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>';		
  }
});

[Elvin]

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.

[Sam]

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 ?

[David]

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.

[Sam]

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.

[David]

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

[Sam]

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

[David]

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 ).

[Sam]

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>';		
  }
});

[Sam]

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

[David]

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 ?

[Sam]

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

[David]

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

[Sam]

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;
}

[David]

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?

[Author]

Posts