[Resolved] Page Hero LCP Problem

Home Forums Support [Resolved] Page Hero LCP Problem

Home Forums Support Page Hero LCP Problem

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #2161816

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

    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?



    Customer Support

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


    Thx it seems to be fine 😀

    Customer Support

    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?

    Customer Support

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


    yes its static or with custom field

    Customer Support

    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


    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.