LCP issue: longer than 2.5s (mobile)

Hi there,

try removing the padding from the single post featured image - it will help the browser to choose a smaller image size on mobile.

You can do this in Customizer > Layout > Blog --> Featured Images >>> Posts and uncheck: Display padding around images

I just unchecked it, and test this https://ponfish.com/best-facial-cleansing-brushes/.

The LCP is still 2.8s.

Can you check this URL?

It is really a headache.

best regards

daisy

Hi there,

WordPress image sizing using srcset can be tricky/buggy. In this case, it should be loading the smaller image on mobile.

Are you using any plugins/functions that may be altering the core srcset functionality?

Your overall score (95/100) is very good, but I agree it would be nice if the smaller image was loading.

Hi Tom

We use wp-rocket and autoptimize.

And imagify to optimize the images.

So you suggest that we try to make all of the images smaller?

Thanks for your fast reply.

Best regards

daisy

Can you add this CSS to fix the issue with the featured image overlapping the breadcrumb:

.no-featured-image-padding .featured-image {
    margin-top: 40px !important;
}

Once thats done i can recheck - by removing the padding we force the image to fill the width of the viewport ... this 'should' help the browser determine the best size image for mobile. I can then take a look at options for reducing the image size

Thanks so much.

It's done. You can check it now.

Well its grabbing Large Image ( better then before when i believe it was grabbing the Full Image ) - but it should be grabbing the medium-large image for mobile devices at the very most... which is most peculiar as all the HTML looks correct for that to happen.

Anyhow - you're using the Imagify plugin which has an option to generate webP images - is that option enabled as google isn't picking them up?

Some other pointers - your max image size ( unless you're really bothered about HD images ) doesn't need to be over 1200px which is the max-width of the container.

You can also try setting the Settings > Media > Large to 800px - which will trim down those large images a bit further for Tablet and Mobile devices. Note: to apply that change to existing images you will need to install and run the Regenerate Thumbnails plugin.

Hi David

Thanks for your support.

We will try it and let you know the result.

Best regards

daisy

You're welcome

Hi David

All are done, but I checked the LCP: 2.7S.

Can you check this: https://ponfish.com/best-electric-bikes-under-1000/ ?

Thanks so much.

best regards

daisy

Before we look at the metrics that come before the LCP - the images are still quite large. That bike image is 93kb and its a png image - did you enable webP in the Imagify settings or is that not an option ?

Hi David

We enabled webbP on imagify.

Please check again.

Thanks

best regards

daisy

Hmmm... doesn't look like thats working as it should replace the <img> HTML with a <picture>
Can you check with imagify support ?

Ok, Let me check with them.