[Resolved] Page Hero LCP Problem

[Christoph]

Hey i searched and found a lot of topics here but dont know nothing helps right.

Last thing i tryed was this:

// Preload
add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url_medium = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
		$featured_img_url_small = get_the_post_thumbnail_url(get_the_ID(),'medium');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        
		echo '<link rel="preload" media="(max-width: 468px)" as="image" href="'.$featured_img_url_small .'"/>';
		echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url_medium .'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full .'"/>';
        echo '<style>
        .page-hero-home {
            background-position: center center;
        }
		
      	@media(max-width: 468px) {
            .page-hero-home { background-image: url('.$featured_img_url__small .');}
        }
		
		@media(max-width: 768px) {
            .page-hero-home { background-image: url('.$featured_img_url_medium .');}
        }
        @media(min-width: 769px) {
            .page-hero-home { background-image: url('.$featured_img_url_full .');}
        }
        </style>';
    }		
},1000);

Here u see its https://reisemarkt.com/

I tryed it without photo … it works fine but with background image on container it dont works.
its a page-here hook after_header.
Also with and without critical css from wp rocket.

Don’t know how to fix it?

[FunkyCss]

following

[David]

Hi there,

the logic is sound but the execution is a little off:

1. is_single() won’t work on the home page. For a static front page you will need: is_front_page()
2. Beware of multiple media statements in your preloads ie.

media="(max-width: 468px)" and media="(max-width: 768px)"

For example a screen size of 467px will result in both the media values being met and both images being preloaded.
Like @media queries they can support min and max so the latter one becomes:

media="(max-width: 768px) and (min-width: 469px)"

[Christoph]

Thx it seems to be fine 😀

[David]

Glad to hear that!

[Christoph]

Hi David

the code works fine with featured image … but how to set up for any image in the div .page-hero-home in my example?

[David]

How is the image being added ? Is it just a static background image ?

[Christoph]

yes its static or with custom field

[David]

Static images, theres no easy way to do it dynamically. And would entail you writing page specific CSS to swap the background and page specific hooks to make the preloads.

For Custom Fields the above method could work.

Except instead of: get_the_post_thumbnail_url you could use: wp_get_attachment_image_src

https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

You will need to store the ID of the image in the Custom Field.
And then use get_post_meta or get_field ( if ACF ) to retrieve and pass it to wp_get_attachment_image_src function.

[Author]

Posts