Hi guys,
I’m hopping you guys could give me a couple of advices about the LCP. My website is performing very well, and the LCP is loading quite fast actually.
Having said that, I want to serve the images from Cloudflare (to make sure they are serve in WebP and improve photo quality) but when I use an image from CloudFlare in the Hero section of a page the LCP increases a lot on mobile. It is strange. Even though, I preload the image with a Hook element, and I exclude it from Lazy load. I’ve also tried to use the best size possible according to each image, and the image is supposed to be optimized by the ‘Cloudflare Images’ new service.
Because my website doesn’t have problems with the LCP, I’ve been making most tests in my staging environment. I’ve used a photo from Cloudflare in one of the pages of my live website in the background of its Hero so you guys can see it though, as it is easier to test it: https://mayangateway.com/guatemala-a-bit-of-everything/
If you run a PageSpeed Insight audit you will see it. If you run a PageSpeed audit in any other page of my website, you will see that there is no LCP issues – obviously, not perfect but performing very well.
The issue seems to happen only on mobile.
Of course, the easy solution is not making any changes, but as I said above I’d like to improve the quality of the photos and serve them in WebP format by using Cloudflare.
Would you guys please check the link above? do you have any recommendations?
Thank you in advance,