[Resolved] LCP high for hero image?

[Dan]

Hi. A few months ago, I changed my hosting provider and remade the entire site using GeneratePress/Blocks Premium editions. I’m now at a point where many numbers look really good in PSI except for LCP.

Current FCP is at 1.2 and LCP dances around 2.5-3.2 (typically going into the yellow). PSI is indicating that the hero container is the LCP element.

I’ve read at least a dozen posts from this forum among other sources trying to find an answer. Often times, the GP forums pinpoint lazy-loading as the culprit. I’ve tried a number of things – what I can remember:
– Turning off lazy-loading completely and selectively.
– Locally loading Google Fonts & Analytics.
– Deferring/Delaying JS.
– Optimizing CSS delivery and removing unused CSS.
– Optimized images along with serving WebP.
– Ensuring that the correct thumbnail size is selected.
– Selectively removing JS and CSS per page.
– Removing the background image completely from the hero container.

On a related note, I cannot get rid of the jQuery call because the sticky menu seems to require it. I did find another thread somewhere on these GP forums that indicated you are planning to rewrite that using vanilla JS. What is the status on that? jQuery is a relatively large D/L.

For every page, I manually put up the hero image and the text/buttons that appear in front of it. I will redesign the entire header if I need to, but I really only want that as a last resort as the current design feels good for my purposes and there are tons of pages that would need to be touched and tested.

Thanks for your time.

[Elvin]

Hi there,

Looking at the list, perhaps you’ve yet to try preloading the background image?

See David’s example PHP snippet here – https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/page/2/#post-1819584

[Dan]

Hi Elvin –

Thanks for the response. I have updated the front page with the preload. That has shaved off maybe 0.1 or 0.2 off the LCP, but still consistently in the yellow. There remains a gap of about 1.5 between FCP and LCP in PSI.

Regards.

[David]

Hi there,

simple test to perform would be to temporarily remove the background image, and use a color. Then re-run the test. If there is still a high LCP timing then it means there is something else either up the chain the interfering with the loading, or something that is making it difficult for google to calculate the LCP element.

If the LCP drops significantly then we can pinpoint the image request as part of the issue.

Let us know.

[Dan]

Hi David –

I appreciate the response. I have removed the background image and gone down to a solid color. This has resulted in an LCP score of 2.1, which is safely in the green. PSI also indicates that the LCP is now the H1 tag instead of the hero container. It also looks like there is about 0.9 between FCP in LCP.

Does all this sound right to you? Should the hero image be adding approximately 0.5 to the LCP?

Regards.

[David]

Yeah for an 50kb sized image, 0.5seconds to load isn’t bad considering Google PSI simulates a Mobile device over a throttled 3g Network.

Which says there is something else delaying the render. And the only thing listed by PSI is the CSS files.
I would try disabling the Combine CSS option in WP Rocket, as its serving a single large 33kb CSS file. Which ‘could’ be a lot worse than lots of little CSS files, as your server runs HTTP2, a modern browser can load many small files in one go.

[Dan]

Hi David –

Odd, separating out the CSS actually made the LCP go up a bit. I have some ideas that I’m considering right now.

IDEA #1
There are a couple images mentioned in PSI under “Properly Size Images” that look like they are being resized from 720 to 540. I don’t necessarily know that is holding back LCP, but if it is, one thing I could do is change the WP thumbnail sizes. Currently, I’m using 320, 720, and 1080. But maybe since I’m using a 1200-wide container in GP/B, I should be doing 300, 600, and 1200 or 270, 540, and 1080 instead. Do you have general recommendations for image sizes in WP with respect to GP/B and the 1200-wide container?

IDEA #2
Also, I’m thinking more on Analytics. I decided to remove it and the LCP did drop between 0.2 and 0.4. Not sure why it dropped now and not earlier, but maybe there was another setting I had on at that time. For business reasons, I can’t remove Analytics, but I did use GP Elements to put it in the footer instead of the head, and that seems to still shave a bit off.

IDEA #3
Finally, I’m playing around more with the preload code Elvin referenced from you earlier. I don’t necessarily use the Featured Image for every hero. So, I’m adjusting it to use the values I have selected in the GB Container “Backgrounds” section. How do I go about getting the values of those fields through PHP? Are those just regular WP custom fields? And if so, where can I find the IDs?

Thanks for your thoughts.
Regards.

[David]

Odd one – as when i check the network timings it loads those multiple CSS files in a shorter time then the one combined file.
Note – you should be able to enable Minify ( but not combine ) to compress them further.

I can now see that your front page is loading Woocommerce CSS and JS – which isn’t necessary. You may want to invest in Perfmatters which allows you to stop that kind of thing where its not required.

That would remove a big chunk of unused CSS.

#1 – shouldn’t make a difference to LCP – but its good practice to do so.
The Properly Size Images opportunity is related to the file size, although of course a smaller image would improve the filesize you may just find using a better compressed image will resolve the issue.
In most cases i leave the default image sizes alone adding more or different ones won’t necessarily resolve the issue.
Looking at the first image that gets flagged, its set to 720px width in its HTML but the way src-set works its requesting the 1000pxm image. For those images i would be inclined to Upload an image of 720px, so that is the largest size the browser can choose from ( which is fine as a retina x2HD device will want that size for your layout).

#2 Might want to check out the CAOS plugin for loading GA locally.

#3 That method Elvin provided only works with a Header Element that has the Featured Image as its background. It can be applied to a Block Element with Dynamic Featured Image background, but theres no way to do it for a block in the content with a static background image.

[Dan]

I am using Perfmatters, but did not blanket shut off WC because it turns off WC on other pages in the site where I drop a WC block. So, I turned off the whole WC section in ScriptManager with exceptions for those pages where the WC block exists. Evidently, I never turned off the generate-woocommerce (js), generate-woocommerce (css), or generate-woocommerce-mobile (css) enqueues in ScriptManager, which are including those WC files. I have since turned them off and there is a difference in LCP – the woocommerce-mobile (css) is relatively large.

In Perfmatters, there is a place to turn on local Analytics, but I have not used it since I have two different tags – one for Analytics and one for Adwords. I’ll look into CAOS, thanks.

[David]

That definitely made an improvement – i am seeing an LCP of 2.3s !
Which is great.

All good ?

[Dan]

Yes, I think so. I’m hoping the field data in PSI changes by next month. In any case, I appreciate yours and Elvin’s willingness to help. Thank you and take care.

[David]

Glad we could be of help

[Author]

Posts