[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
    Posts
  • #2161816
    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?

    #2161827
    FunkyCss

    following

    #2161881
    David
    Staff
    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)"

    #2161944
    Christoph

    Thx it seems to be fine 😀

    #2161953
    David
    Staff
    Customer Support
    #2167299
    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?

    #2167303
    David
    Staff
    Customer Support

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

    #2167307
    Christoph

    yes its static or with custom field

    #2167313
    David
    Staff
    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

    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.

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