Archived topic
How to optimize LCP & FCP?
3 replies · Started by Sascha on January 9, 2023
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
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.
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?
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.