[Support request] Too high LCP on mobile devices?

[David]

You can add this function to Code Snippets:

add_action( 'init', function() {
    add_image_size( 'mobile-image', 300, 9999 ); //300 pixels wide (and unlimited height)
} );

It will create a size named mobile-image – can you check if thats all they need ?

[Kathrin]

Thank you David, the new format now displays in Imagify.

But I still don’t know, if I need an echo-function in the postloop, so that the pictures are displayed or is the code you provided me the echo function? Or is some other code necessary that the new format is displayed on mobiles? Because after doing some research, I found that at first the new size is registered, but I need an echo function too for displaying it.

Is that all that I need for displaying?:

function db_modify_srcset_sizes($sizes, $size) {
$sizes = ‘(max-width: 420px) 300px, (min-width: 421px) 800px, 100vw’;
return $sizes;
}
add_filter(‘wp_calculate_image_sizes’, ‘db_modify_srcset_sizes’, 10 , 2);

And will I get problems with CLS when the the size of 300x has an unlimited height? Or would it better to define a height?

Greetings Kathrin

[David]

GP outputs the featured image in the loop for you. But you may want to check with Imagify as to what its purpose is – i don’t know what this additional size is for 🙂

And will I get problems with CLS when the the size of 300x has an unlimited height? Or would it better to define a height?

You can leave this as unlimited height, the correct height will be calculated when the new thumbnail size is generated.

The code i provided:

function db_modify_srcset_sizes($sizes, $size) {
    $sizes = '(max-width: 420px) 300px, (min-width: 421px) 800px, 100vw';
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

I am not sure if you will need this – as I do not know what the plans are for Imagify. That code i provided is something to be used without the Imagify service.

[Kathrin]

Dear David,

thanks for getting me back.

I have activated the add missing height and width function in WP Rocket, so there should be for sure no problem.

Imagify just compresses the thumbnails and creates a WebP for each thumbnail, but Imagify doesn’t serve the pictures to the browser. So there is some code needed to display the right image size in the browser. So is the code you provided me, enough for displaying the images used as featured image / post image on a mobile browser:

function db_modify_srcset_sizes($sizes, $size) {
$sizes = ‘(max-width: 420px) 300px, (min-width: 421px) 800px, 100vw’;
return $sizes;
}
add_filter(‘wp_calculate_image_sizes’, ‘db_modify_srcset_sizes’, 10 , 2);

Imagify told me that:

Do I have to call that image thumbnail size with a code like that <?php echo get_the_post_thumbnail($post->ID, ‘???’); ?> , so that it is used by WordPress or does that happen automatically?

It depends on how you’re adding the image. If you’re adding it to a page or post content like I showed in my previous message, then you don’t need this code. WordPress will generate the necessary responsive code based on the registered thumbnail sizes for your site.

If you’re adding it on the theme side of things, then you may need something like the code you posted above. In this case I think the theme developer would be the best source of information, as they would know best how this can and should be done.

Greetings Kathrin

[David]

I have activated the add missing height and width function in WP Rocket, so there should be for sure no problem.

This should not be required. You should only enable that IF you are 100% sure you’re missing those attributes.

OK – so i think things are a little confusing. If all that Imagify is doing is compressing and creating webP BUT NOT changing HTML then yes add my snippet ie.

function db_modify_srcset_sizes($sizes, $size) {
    $sizes = '(max-width: 420px) 300px, (min-width: 421px) 800px, 100vw';
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

And NO you don’t need this: <?php echo get_the_post_thumbnail($post->ID, ‘???’); ?>

[Kathrin]

Thank you very much – I will try it out and get you back 🙂

Greetings Kathrin

[Kathrin]

Hi, I have regenerated all thumbnails for that link includig one with 300×9999 px and optimized them with Imagify:

https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.topfgartenwelt.com%2Fcremiges-apfeleis

Page Speed Insights shows following:

Apfeleis mit Zimt und Vanille ohne Ei – Foodblog Topfgartenwelt

So, I think not the right image was served. Maybe there is missing some code that forces the theme to effectively use the new image-size (300x9999px) on mobiles??

Greetings Kathrin

[David]

The code i provided is working as intended.
As i mentioned previously:

3. *Browsers choose the ‘appropriate’ size images based on several factors, including Screen resolution. So a x2 HD / Retina screen will want to load an Image with 2x the number of pixels. So on a 400px screen it will request the 800px image.

On a Moto 4G ( the device google simulates it mobile test ) the resolution is x3 – so the CSS image size is 300px * 3 = 900px. There is no 900px image but there is a 1200px so it uses.

So the properly sized image would be 900px here.

You can check this in the developers tools by setting a mobile DPR of 1.0 – see here at the resolution it requests the 300px image:

https://www.screencast.com/t/6wYcwvIOs3mB

The optional second code I provided here:

https://generatepress.com/forums/topic/too-high-lcp-on-mobile-devices/#post-2103816

Will make it so the largest available image is 800px. That way you won’t ever load an image larger then you need ( in googles eyes ).

The other 500px image thats coming from the Recipe plugin. Thats there code not GP’s you would need to check with that plugin developer to fix that.

[Kathrin]

Dear David,

I’m not sure if I correctly understand it:

The optional second code I provided here:

https://generatepress.com/forums/topic/too-high-lcp-on-mobile-devices/#post-2103816

Will make it so the largest available image is 800px. That way you won’t ever load an image larger then you need ( in googles eyes ).

I don’t have a format with 800px width, should I create an image size like that instead of the 300 px for mobiles?

It seems there is no change by using the optional code:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.topfgartenwelt.com%2Fcremiges-apfeleis

Greetings Kathrin

[Kathrin]

Thank you very much for your patience and your help. But in the end I think Imagiy isn’t the plugin which will meet my expectations. It is impossible to reach the guidelines from Google to serve the expected image size, it needs to much space for all the created thumbnails and WebP and the LCP is despite the compression. In the meantime I have tried Shortpixel Adaptive Images it does the same like Flying Images, and it seems that it works great! It the delivers via CDN the correct image size, the LCP is down where it was and no extra data on my webspace.

Greetings Kathrin

[David]

Glad to hear you found a solution that works for you!

[Kathrin]

Sorry for getting you back again. I have installed Short Pixel Adpative Images now and have recognized that Page Speed Insights only loads the placeholder for the featured image but not the image itself and the same happens when I use webpagetest.org:

https://www.webpagetest.org/result/220205_AiDcMC_CMG/1/details/#waterfall_view_step1
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.topfgartenwelt.com%2Fcremiges-apfeleis

The featured image is https://cdn.shortpixel.ai/spai/q_glossy+w_929+to_webp+ret_img/https://www.topfgartenwelt.com/wp-content/uploads/2021/12/Foodblog_Topfgartenwelt_Apfeleis_1.jpg – it is excluded from lazy load.

When I open the page http://www.topfgartenwelt.com/cremiges-apfeleis I can recognize that the featured image is loaded with some delay. Is that the cause that Page Speed Insights just show the placeholder? Could cause that problems?

Greetings Kathrin

[David]

The image is has this attribute: data-spai-lazy-loaded="true"
So i assume ShortPixel is lazyloading the image.

You need to tell shortpixel to stop lazy loading it.
You can exclude the featured image using the skip-lazy CSS class

[Kathrin]

Dear David, thank you very much! But I have excluded the class skip-lazy from lazy load and it is also saved like that. 🙁 That is strange…

[David]

You will need to check with ShortPixel support as i am not sure how that works.

[Author]

Posts