I've had my hosting team take a look into this issue for me many times and they have not been able to fix it, they suggested speaking to the Theme developers to see if they had any answers as it seems to be with the theme script.

I am getting very bad LCP/rendering results for my header image, only on Mobile and have no issues with the same header on desktop.

The header image is a basic webp file so shouldn't be causing any issues, the expert care team from my hosting platform seem to think it's an error with the Theme or how google is reading the Theme.

Can you please take a look and see if you can find what the issue may be? it doesn't seem to be the image itself, but a problem with the script/structure that is creating the issues with lcp/rendering.

The salient them was originally to have a video as the header, but this was to much load time for us, so we placed an image into placeholder instead, there was an option for this so we thought it would be fine?

I'm not sure if there are scripts included for a video and there are delays while searching for these?

The image also seems to have some kind of wrap/overlay over it that makes the image darker and might make the text harder to read? This is also something that is not needed.

Thanks

Hi Tahir

Thanks for your reply.

Yes, I have that turned on as seen in the screenshot attached.

Do you have any more suggestions? My hosting team were able to fix it by messing around with css and caching tools.. but it would never last long due to a plugin/wordpress update, also often the changes made to caching etc.. to fix the problem often cause a counter issue on another area of the page.

I'm happy to change the image, but even when i tried just a solid blank colour as header image it still had a long lcp/rendering issue. This makes me thing this issue is with the framework rather than the image in the placeholder.

Thanks

Dave

Hi Tahir

How would lazy loading the header image help? Wouldn't that make things worse?

I have lazy loading set up on my website already, but it think the header image is excluded from lazy load as this is best practise.

Thanks

Dave

Hi Tahir

Thanks for your message.

I'm happy to try your suggestions but i have no expertise in this kind of things, would it be possible to give me some clear step by step instructions to follow please?

Thanks

Dave

Hi Tahir,

Also, just note - my header image was previously in the page builder set up, it was causing issues and getting the same poor results (if not worse) so we removed this section and added it via the standard section lower down the page.

As we also tried using a plain colour block image for the header and still got poor LCP/Rendering issues, it seems the problem is not with the image itself but maybe the script? perhaps there is left over script or script created for the intended video to be in the banner etc..

The image is webp of less than 100kb, we have responsive images turned on which should resize based on viewing via mobile/tablet/desktop etc..

My host support says the page still loads very fast but for some reason Google is finding issues and reporting poor results in Insights, this will cause us to lose our passed core web vitals - which is obviously very important for ranking.

Thanks

Dave

Hi Tahir

Thanks for the advice, I'll look into all of this.

I just noticed my header image contains no "srcset" meaning it's not being altered to serve differently depending on what device is being used mobile/tablet etc.. 

Do you think this is what the problem could be? it would explain why the image loads fine on desktop with the uploaded size being designed for desktop, and then why there are issues with it when being viewed via mobile? it isn't a responsive image?

Thanks

Dave

Hi Tahir

Thanks for your message. I think i already have that feature turned on, see screenshot.

Hi Tahir

Thanks for your message,

Are you saying to turn off/deactivate SG optimizer completely?

I'm worried that in trying to fix the issue with the header image, we create more problems or loading issues by removing the SG optimizer plugin.

I would ideally like to have just one plugin for optimization but i'm not sure if both WP-rocket and SG-speed optimizer have different features i would then lose the benefit of.

Thanks

Hi Tahir,

So you are suggesting i remove SG-optimizer completely and just use WP-rocket?

My worry again is that MAY fix the issue with the header but create many other issues in other areas of the website OR lose optimizations that are available with SG optimizer not included in WP-rocket? It would potentially be gaining in one area and losing in others which doesn't sound like a great trade off.

I'm not totally sure which settings on either of the plugins i would need to have turned on/off to get maximum results.

Thanks

Dave

Hi Tahir,

What if we kept SG optimizer as that is a free plugin and is owned by my actual hosts so i always have fast support OR would you say WP-rocket is much better than the Siteground speed optimizer?

Can they both perform the same tasks?

Can we perform the tasks you mentioned in your last message via SG optimizer rather than WP-rocket? I'd hate to go through all of these alterations, have it not actually fix the problem and then also lose any other unique optimizations i may have been getting via running the 2 optimizers with the tweaks made.

I could deactivate WP-rocket and keep all setting the same, but which settings should i then turn on within SG optimizer to trial the solution for the header?

This way if it doesn't work I can reset the change made and re-activate WP-rocket with all the settings intact.

Thanks

Dave

I am having the same problem without using SG. Would be nice to get some help.