[Support request] Mobile LCP – Post Featured Images

[a1reno]

Hi,

Brian at Perfmatters was doing an audit of my site to spot any glaring issues and he noticed that a major one is that I have an issue where on a mobile device, desktop-sized images are being requested instead of smaller mobile images.

He also noticed that the correctly-sized images are being generated but for some reason were not being displayed.

He recommended I reach out to you first to see what you have to say.

I am using Shortpixel plugin also and using WebP format.

Please guide me how to resolve this issue.

Thanks in advance.

[David]

Hi there,

i think we covered that here:

https://generatepress.com/forums/topic/image-size-requested-for-featured-images/#post-1900691

That snippet i provided will tell WP to NOT load an image larger then your 750px attachment size.
Then there will be no larger image for the browser to choose from.

[a1reno]

Hi David,

I did forget that we discussed this before! thanks for the reminder.

That snippet i provided will tell WP to NOT load an image larger then your 750px attachment size.
Then there will be no larger image for the browser to choose from.

Do you think this will be much of an issue on desktop aesthetics wise? For instance, I wouldn’t want a poor resolution image loaded on desktop? Or will there not be that much difference?

Thanks

[David]

Might do 🙂
Alternative to using that snippet is this one:

function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(max-width: 360px) 300px, (max-width: 768px) 750px, (min-width: 769px) 1024px, 100vw';
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

This will change the sizes setting in the src-set.
This line:

$sizes = '(max-width: 360px) 300px, (max-width: 768px) 750px, (min-width: 769px) 1024px, 100vw';

Any screen size upto 750px it will force the browser to load the 750px.
Screen size over 750px it will load the 1024px image, I am not sure what if your larges size is – so you may need to change 1024px to whatever size you have.

[a1reno]

I’ll give that one a try. At the same time I am confused why it says ‘woo commerce’ in the code as I don’t think I use this.

[David]

Oops… removed that condition 🙂

[a1reno]

I put in the code (https://share.getcloudapp.com/o0uPRGnP) but I don’t see any changes on the front end. Is it working for you?

[David]

Hmmm… not sure if that will work with the WebP image conversion thats going on.
Is the code still active ?

[a1reno]

Yes, it’s still active. Currently, the only Webp conversion work that’s going on would be via Cloudflare’s Polish.

[David]

Yeah, that code should have updated the sizes attribute in the HTML but it hasn’t. The HTML could be cached in cloudflare or the converter is grabbing the image earlier then the filter – to be honest i am not aware of how those things work.

3rd way is without any of the PHP added, and to add this CSS:

@media(max-width: 768px) {
    .page-header-image-single,
    .page-header-image-single img {
        margin-left: -30px;
        width: 100vw;
        margin-right: -30px;
    }
}

This will force the image to fill the viewport on small devices. And then the default src-set sizes will be interpreted better by the browser.

[a1reno]

Hi, I tried the code. The only problem is that the images and the text in the images are bumping right up against the side (which is expected if there is no padding) and doesn’t look that great (see screenshot).

I am a little confused why this whole problem is occurring for me.

Would this whole problem of the wrong sized images being called up on a mobile device happen on a fresh generatepress install and website? Is there something in my setup (plugins, code etc.) that is causing this? You mentioned it’s because I have padding around my featured images but then again I see everyone else has padding around their images and not everyone has this problem? So if there is something in my setup I can change I am willing to listen!

Thanks again for your help.

[David]

The code i provided here, which i have updated to cover the exact image sizes your site is using, should resolve the issue:

https://generatepress.com/forums/topic/mobile-lcp-post-featured-images-2/#post-1917910

It looks like you have disabled the webp/image optimization, if you can retry that code and i can take a closer look.

Issue:
When WP introduced src-set sizing they went for a ‘catch all’ responsive src-set sizing option.
Which for a lot of layouts just works. But its one major flaw is that it relies on the image filling the viewport container. If the image doesn’t, then the browser won’t use the designated size.

The code linked above rewrites those rules.

[a1reno]

I haven’t changed any webp optimization settings since last time, so it’s still just Cloudflare and Polish. Unless there were some pages cached that were still on Shorpixel wepb setttings which I turned off a few days ago.

I’ve put the code back in if you’d like to take a look.

Thanks

[David]

Thats working – and i ran a google PSI test and its not flagging the Properly size issues.

[a1reno]

I’m not seeing it working on my end.

And it never did flag a properly size issue in PSI even before the code. The issue only appeared if you looked a little closer when you inspect the page.

I still see the same sized image being generated (38,2kb one in this case) for both the desktop and mobile. see here: https://share.getcloudapp.com/GGuplOrm

[Author]

Posts