[Support request] How to optimize LCP & FCP?

[Sascha]

Hi,

as you can see here, my mobile-scores are below 90, although desktop is almost 100.

The report shows a high value LCP, but I have no idea about how to optimize this further.

The site is hosted on LiteSpeed Webserver, I have configured the LS-Cache-Plugin without any CSS or JS optimizations at the moment, because when I have tried them, the scores went event worse.

The element, that is reported to cause the high LCP. It is a container-block with different bg-images for desktop & mobile (via advanced bg, both optimized already I think). It also contains an animated headline-block by Greenshift, which is supposed to be a very lightweight block.

Can you help me with this? Admin-Access in private notes.

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

as a quick test, remove the background image from the mobile page hero.
and retest the site. It will give you a quick handle if it is the main culprit of a high LCP.

Note: you many need to wait a while or run a few tests as Google can have a habit of testing cached page. So you don’t immediately see any changes.

[Sascha]

Hey David,

thanks for the hint, I have replaced the image with a gradient and now the mobile-scores look great 🙂

Any advise about how to optimize the image I’d like to place as bg, so that LCP won’t be harmed as much as before?

[Ying]

You can use a tool like this to optimize the images:
https://compressjpeg.com/

And if you have GB pro, it has an option called Advanced background, so you can set different images for different devices.

[Author]

Posts