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

[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

[David]

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…

[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?

[David]

It certainly does 🙂

Yep – you can add that using Code Snippets.

Let us know how you get on

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

[David]

Awesome – glad to hear that!

Ill give him a nudge 😉

[Sam]

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

[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?

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

[David]

Yep thats the one 🙂 Glad to see you got it resolved.

[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’

[Elvin]

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.

[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

[David]

Change this:

if ($featured_img_url) {

to:

if ( is_single() && $featured_img_url ) {

Then the code only gets output on your single posts

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

[Author]

Posts