[Resolved] Hero Header, LCP and PSI metrics (not the new Harry Potter title)

Home Forums Support [Resolved] Hero Header, LCP and PSI metrics (not the new Harry Potter title)

Home Forums Support Hero Header, LCP and PSI metrics (not the new Harry Potter title)

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #1695420
    Sam

    Hello

    On my blog posts, I have an hero header displaying the feature image with post meta, merged into Navigation bar – so my logo etc overlay.

    Created using an GP element header.

    Been trying to improve my speed metrics and have pretty much nailed all other than LCP on mobile – which appears to be due to the hero header.

    How can I improve this, as its the last piece in my PSI puzzle

    #1695561
    David
    Staff
    Customer Support

    Hi there,

    i think if it were a Harry Potter Title it would be something like Core Web Vitals and the never ending headache πŸ™‚

    You can try adding this PHP Snippet to your site:

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

    It will output some Mobile CSS for the background image using medium_large image size instead of the full image used on desktop…. for some it has helped…

    #1695583
    Sam

    It does feels like that – the never ending story

    Is it ok to add that using the code-snippet plug in – as I don’t have a child theme?

    #1695587
    David
    Staff
    Customer Support

    It certainly does πŸ™‚

    Yep – you can add that using Code Snippets.

    Let us know how you get on

    #1695661
    Sam

    Brilliant, thanks – that worked a treat

    99% mobile /100 % Desktop on all pages/posts

    Just the default image size for WPSHOWPOST to sort now – if you could just give Tom a nudge to release the beta.

    #1695663
    David
    Staff
    Customer Support

    Awesome – glad to hear that!

    Ill give him a nudge πŸ˜‰

    #1696302
    Sam

    Sorry – just noticed that since that change I appear to have lost the background gradient on mobile

    #1696306
    Sam

    linear-gradient(0deg, rgba(20,10,4,0.33),rgba(20,10,4,0.33))

    is missing – can that be added to that PHP snippet?

    #1696355
    Sam

    Not to worry – I figured it out

    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: linear-gradient(0deg, rgba(20,10,4,0.33),rgba(20,10,4,0.33)), url(' . $featured_img_url . ');
          }
        }
        </style>';		
      }
    });
    #1696437
    David
    Staff
    Customer Support

    Yep thats the one πŸ™‚ Glad to see you got it resolved.

    #1697841
    Sam

    I assume if I put ‘.post’ before than PHP statement, it will limited it to just post heros?

    Just I have another Hero for ‘pages’

    #1698206
    Elvin
    Staff
    Customer Support

    I assume if I put β€˜.post’ before than PHP statement, it will limited it to just post heros?

    Did you mean the .page-hero CSS within the PHP snippet?

    If so, then yes it would only apply on posts as .post means body.post which is a class added to the body for post pages.

    #1698354
    Sam

    Yes, .page-hero

    I just noticed that the CSS was also appearing everywhere there is a pahe.hero class

    For all other pages (other than posts), I have a custom picture – configured using a element header

    The css code above was also applying to my category. about, terms, priv etc pages. On my cat pages it was taking the first post archive feature image and making that the hero

    So I would like to limit it to just blog posts page heros

    #1698600
    David
    Staff
    Customer Support

    Change this:

    if ($featured_img_url) {

    to:

    if ( is_single() && $featured_img_url ) {

    Then the code only gets output on your single posts

    #1724340
    Sam

    Though I would reopen this thread rather start a new one

    Since adding the linear-gradient to the above code – my LCP has fallen out of range – PSI flagging page.hero as the issue.

    I get a flash of the background colour then the image loading. The background gradient is purely to darken the image so the overlaid text is readable

    Is there a way for me to improve this?

    I saw someone post on the FB group about preloading the hero, but cant for the life of me find the post.

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