[Support request] Largest Contentful Paint gets bad when serving images from Cloudflare

[Josue]

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,

[Elvin]

Hi there,

This is really tricky to deal with because on this particular page, the image is a background.

I’d do an A/B test with a version where the Container block uses 2 images of different size.

One image size for desktop and a smaller sized image for mobile PLUS reduced padding-top and padding-bottom for viewports smaller than 600px

I’ll apply the image by overriding the current background with custom CSS.

Example:

@media (max-width:600px) {
.gb-container-9d617d7c:before{
background-image: url('your cropped/smaller image for mobile viewport here');
}
}

and set a reduced padding top and bottom on the mobile tab of the container block.

You then test this page and see if it yields better LCP results. 😀

[Josue]

Hi Elvin,

Thank you for your advice! I’ve implemented it on one page and I think it works but I’m not sure, would you please check it on your end? Here it is: https://mayangateway.com/guatemala-a-bit-of-everything/

I also have a concern about implementing a custom CSS for mobile; my plugin cache is WP Cloudflare Super Page Cache https://wordpress.org/plugins/wp-cloudflare-page-cache/ – it implements the Cache Everything page rule from Cloudflare, which works excellent. Before I started with GP and GB I had other builders which created conflicts with this plugin when I changed a lot the mobile version. GP and GB has not created conflicts at all with this cache plugin, but I am just wondering if creating custom CSS for mobile version could create conflicts? do you know?

I have over 180 pages on my website, and before I started making these changes I want to be sure 🙂
I appreciate your help!

[David]

Hi there,

first off the CSS that Elvin provided goes in the Customizer > Additional CSS or a child theme styles.css – not in the Advanced CSS field for the Block.

But i don’t see manually adding the CSS for each and every image as a viable option, it will be a nightmare to maintain.

And the image size doesn’t seem to be the issue, but the connection times to the imagedelivery.net. See here:

https://www.webpagetest.org/result/210928_BiDc1H_119cc6ded1d75785d799c99a72936562/1/details/#waterfall_view_step1

You can see the long initial connection and SSL negotiation times. Might be worth addressing that with the service provider.

[Josue]

Hi David,
You are completely right, I understand very well. I will check on the supplier I’m using. Thank you for your help on this.

[David]

You’re welcome

[Author]

Posts