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

[David]

If the gradient is causing the issue then maybe its best to disable that and instead just use some CSS to create a background overlay with this CSS:

.page-hero {
  position: relative;
}

.page-hero:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(20, 10, 4, 0.33);
}

.page-hero .inside-page-hero {
  z-index: 1;
  position: relative;
}

Linear Backgrounds are calculated and rendered as an image which adds processing time… whereas a straight rgba color does not…. give that a shot.

[Sam]

Thank you David – I will give it whirl.

I never knew that linear Backgrounds had that performance impact – everyday is a school day.

Which leads me on to a follow up question, hero related (seamless link)

On my home page, I have a background image in a GP block container that i am using as a page hero (Mike’s youtube tutorial)

I have two issues with this

1) I can’t figure out how to server a mobile version of the image (think the pseudo element bit is what has me confused). Thought it would as simple as the code example below

@media (max-width: 768px)
.Containername:before {
    background-image: url(https://imagepath-768x514.jpg);
}

2) This also has a liner-gradient, how can I swap this out for something similar to other hero overlays (can it be done within the container editor?)

[Elvin]

Hi Sam,

for #1:

You need to add content: "";, width and height property for the pseudo element for it to display on the viewport.

Example:

@media (max-width: 768px)
.Containername:before {
    background-image: url(https://imagepath-768x514.jpg);
    content: "";
    height: 100%;
    width:100%;
}

For #2:
You should be able to do it w/ custom CSS.

As for “container editor”, did you mean the Header Element UI? Are you pertaining to the background color overlay?

if so, then no, the background color picker is quite limited. Go with custom CSS.

[Sam]

Hi Elvin

***Home Page Hero using a GP Block and a Empty Hero Header Element ***

Thanks for #1 that works a treat

With regards #2 – I previously had a linear gradient as the background overlay, which I turned it off because of the extra processing overhead.

I have enabled a solid black background colour to the container (GP block), and then set the image Image Opacity to 80%.

Is this best option? Render wise? Or, should I use CSS to set a colour overlay to the container:after, with an opacity of 20%

Like in David’s page hero CSS? Or doesn’t it not really matter, in which case i use the GP-Block container settings

One last question – I have noticed that the overly is applied to nav menu items and logo. Is there a way to make them ‘sit on top’. As they are white, and a black overly dulls them and doesn’t make them pop

[David]

Personally i would go with the original steps:

1. For adding the mobile background image:
https://generatepress.com/forums/topic/hero-header-lcp-and-psi-metrics-not-the-new-harry-potter-title/#post-1695561

2. Add the overlay using this CSS:
https://generatepress.com/forums/topic/hero-header-lcp-and-psi-metrics-not-the-new-harry-potter-title/page/2/#post-1724507

If you can set it up like that i’ll take a look at the issue with the overlay affecting the site header.

[Sam]

Sorry I might have confused you

Both bits of code have been added. PHP and CSS.

I have three Hero Headers

A) Home Page – Empty Hero Element – Merged into a Background image within a GPB container on the home page
B) Page Hero (Hero header element) – Using imagine define in element header – Category, Contact, Search, Terms pages etc
C) Post Hero (Hero header element) – Using post feature imagine

The CSS in #2 puts a overlay on B & C. All good on that front

The PHP in #1 adds CSS for the mobile image for C only – as on Category archive pages it replaced the hero image with the feature post feature image.

And, on my contact, terms, cookie policy etc pages it didn’t add CSS for a mobile sized version of the image.

So for those pages, as the image is static, I just added CSS to serve the 768×512.jpg. And updated the PHP to single post

@media(max-width: 768px) {
      .page-id-3349 .page-hero, .page-id-3338 .page-hero, .page-id-3383 .page-hero, .page-id-2897 .page-hero, .page-id-3372 .page-hero, .page-id-3361 .page-hero, .author1.pagehero, .category .page-hero {
    background-image: url(https://URL-768x512.jpg);
      }

A) which is my home page hero, i have added to serve a 768 x 514 jpg on mobile

@media (max-width: 768px)
.SomeContainerName:before {
    background-image: url(https://imagepath-768x514.jpg);
    content: "";
    height: 100%;
    width:100%;
}

As the image is a background img within a full width GP block container – I can add a background and make the image 80% opaque (ie 20% see through) using the container setting within page editor

Wasn’t sure if this is the right thing to do, and/or give the same result as the CSS in #2?

I also feel, might just be my eyes, that the dark background has made the nav menu items muted.

The Meta data with the hero is fine, that looks like it sits on the top layer and is unaffected by any image or overly.

Is it easier to give you a log in? As I think I’ve might have man-plained this

[David]

I tested the site with a desktop color meter app and the menu items are pure white.
But there hero element in this instance is doing absolutely nothing as its not actually displaying any content so the CSS provided here is irrelevant:

https://generatepress.com/forums/topic/hero-header-lcp-and-psi-metrics-not-the-new-harry-potter-title/page/2/#post-1724507

You may want to check out GB Pro as that allows you to set different images for different device sizes…..

[Sam]

Ok – will do

[David]

You’re welcome

[Sam]

Hello again

I am totally over Core Vitals, stop the ride I want to get off. 🙂

Just wanted to thank you for the help so far and apologies for being a royal pain for yet another LCP hero header question.

All pages other than single post are passing PSI on mobile. Single posts are still a little hit and miss in relation to LCP

One run they fail, the next they just pass. Must be borderline.

So far we have added PHP to serve mobile appropriate images, removed background gradients and added CSS to replace with solid RGB colour overlay. All of which made marked improvements.

There anything more than I can do to bring the LCP down.

[David]

I tested both those links and although border-line they do fall within the accepted parameters for LCP.
Improving that you would need to look up the chain. If you compare FCP to LCP there is very little difference. So whatever can be done to reduce render blocking to improve FCP will trickle down to LCP.

You may want to try combining CSS files and JS files using a cache plugin to see if that reduces render blocking times…. but that can be counter-productive on a good server.

[Sam]

Thanks David – I will have a play with what you suggested to try and improve RRB and FCP.

I have also uncovered a CLS issue with perfmatters and lazyload iframe placeholders – so this might also help when Perf release a fix at the end of the month

[David]

Glad to be of help

[Author]

Posts