[Support request] Too high LCP on mobile devices?

[Kathrin]

Hi, I have made several tests with Page Speed Insights and it shows me a too high LCP on mobile for most of the pages on my blog. Can you confirm it and do you have any idea what could be the cause?

Greetings Kathrin

[David]

Hi there,

is there a specific URL i can check ?
I tested on at random and the LCP was within the guidelines

[Kathrin]

I have tried this URLs and in the check the LCP is always over 2,5 seconds on mobile:

https://www.topfgartenwelt.com/cremiges-apfeleis 2,6s
https://www.topfgartenwelt.com/kaiserschnitt-erfahrungen 2,7s
https://www.topfgartenwelt.com/steirische-spagatkrapfen 2,5s

Greetings Kathrin

[Ying]

Hi Kathrin,

I did a lighthouse test for the first link, as you can the LCP is mostly coming from the CSS files needs to be loaded:
https://www.screencast.com/t/myBCw9eAEJA

I marked out the GP and Gutenberg CSS files, other files are from plugins.

I would recommend avoid using unnecessary plugins and using cache plugin to combine the CSS files.

[Kathrin]

Dear Ying, thank you very much. I cleared the cache again and removed Google Analytics 4 which was implemeted besides Google Analytics Universal and now it seems that the LCP is ok again. Now it is between 1,5 and 1,7 seconds again. Can you verify it?

Greetings Kathrin

[Elvin]

Hi Kathrin,

To add to the conversation:

Consider following the suggestions on this article.
https://wp-rocket.me/google-core-web-vitals-wordpress/improve-largest-contentful-paint/

For your site specifically, I’d consider merging the CSS files to reduce the number of requests and deferring script if you still want to attempt to make it lower.

But yes, the pages are between 1.2 and 1.6s now when I checked. 😀

[Kathrin]

Thank you very much! The missing WebP and adaptive Images are linked to the plugin flying images. There was an update about one week ago and it seems that there went something wrong and crashed that options. Since this is not the first time having problems with that plugin I will move to Imagify. But it seems that Imagify doesn’t provide adaptive images. So is there a way to implement some code to Generate Press that a special mobile friendly image format is provided to mobile devices?

[Elvin]

So is there a way to implement some code to Generate Press that a special mobile friendly image format is provided to mobile devices?

The theme doesn’t have this functionality by default. It does what WordPress default does w/ the images.

While the theme is receptive to most custom coding, the code required to do something like what Imagify does is probably too long that it’s sheer size is equivalent to a plugins so it may be best to just get one instead of coding it from scratch. 🙂

[Kathrin]

Ok, but what plugin you can recommend? I didn’t have found one that is compatible to Imagify. The support from Imagify told me that Imagify just compress the images and I should create a thumbnailsize that fits for mobile devices and I should talk with you to tell me how I can force the theme to use that thumbnail size for mobiles. When WordPress it does on its own. Which thumbnail size it uses?

I mean to register a new image size in the function.php like this, for example: add_image_size( ‘post-image-mobile’, 300, 200); and force the theme to use the new registered size for mobiles.

Is there no way?

This is the answer from Imagify:
If I’m understanding correctly, you’re being flagged for the “Properly Size Images” section in Google Pagespeed tests for mobile?

The “Properly Size Images” warnings are actually not related to Imagify. Imagify doesn’t technically serve images, as that is the job of your theme. When you upload an image, your theme creates all the different thumbnail sizes of that image and (when working properly) serves the appropriate size based on where the image is used on your site, and the size of the visitor’s screen.

The reason that you’re getting these warnings is that your theme is serving images that are larger in size than the size at which they are actually displayed on your site. So for example, if an image is actually 1000 pixels wide, but your theme uses HTML or CSS to resize it down to 500 pixels wide when it is displayed, these warnings are saying your theme should actually just be creating a 500 pixel wide thumbnail version of the image to use.

Imagify optimizes all your thumbnail image sizes to reduce file size. However, even an optimized image will still get flagged if its dimensions are larger than necessary for the context in which it is used.

With that said, I would also mention that themes must be designed to look well on many different screen sizes, from small mobile phones up to large computer displays, so it’s possible your theme developer has done things this way intentionally.

Often, themes set image widths and heights based on a percentage of how wide the visitor’s screen is so the display looks good no matter the screen size. You mentioned your theme is responsive, so this could likely be the case for you. The downside of doing this, is that it causes the displayed dimensions of images (again based on percentages) to be somewhat smaller than the actual dimensions of the images, which leads to the speed tests flagging them, as is the case here.

The best course of action is likely to ask your theme developer about this, and to see whether they have any solutions or suggestions on how things could be improved. However, this is a tradeoff between design and function, so it is possible that you might want to leave things as they are for the sake of your site’s design and layout.

Greetings Kathrin

[David]

Hi there,

Comments on Properly Size Images metric

Google tests sites on a Simulated Moto 4G device, which is a 360px wide screen. And your image has 30px padding either side, so on that device it would display an image that is 300px wide ( thats CSS width ).
However the device is a 3x HD screen so it ideally would like a 300 x 3 = 900px wide image.

When i tested this page:

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

I can see its requesting the 862px image ( the original and largest size available ) – which actually has less pixels then the desired 900px image but is the best one available.
The 16kb Potential Savings that google recommends is because Google reckons your original 862px wide image could have been better compressed.

So with all intents and purposes this is working as expected. But if you want theres a couple of things we can do:

1. Add this PHP Snippet to tell the browser what size image we would ‘like’ to load on smaller screens”

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

That will tell devices of 420px or smaller to load the 400px image if possible*, on larger screens it will tell it to load the 800px.

2. This is an optional snippet – and what it will do is tell WordPress to NOT offer any image sizes over 800px:

function set_max_srcset_width( $max_width ) {
    $max_width = 800;
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

This means the largest image that can ever be requested in 800px wide.

NOTEs regarding these functions

1. The filters being used in those snippets are core WordPress functions. And they are related to the HTML that WordPress outputs ( GP doesn’t interfere here ). Some plugins that optimize images such as conversion to webP will REPLACE this HTML with its own. So we have to be mindful that this may not work with some image plugins installed.

2. Any caches, page caching, CDNS will need to be flushed to ensure the HTML in your pages is updated. Note that Google has its own caches, so any improvements to this, may not immediately show in Page Speed tests.

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.

Whilst looking around i spotted this

I ran webpagetest on one of your provided links :

https://www.webpagetest.org/result/220203_BiDc9M_c5c0e48a381caef2bc6101e863c733dd/1/details/#waterfall_view_step1

And the CDN serving your images is NOT compressing them:

https://www.screencast.com/t/ndudyoLY7fqj

Probably a good idea to get the CDN to compress the image if possible.

[Kathrin]

David, thank you very much for your detailled answer. The CDN for WebP, compressing and adaptive Images (Flying Images with Statically CDN) but stopped working and the support is no help. So I have to find another solution and this will be Imagify because I’m already using WP Rocket.

Should I add the code snippets in the code snippets tool?

In the code snippets there is no height defined. Will that be a problem with CLS?

I have also found the Responsive Images Plugin – do you know something about that? Would that provide the needed image sizes?

[David]

Should I add the code snippets in the code snippets tool?

Yes

In the code snippets there is no height defined. Will that be a problem with CLS?

No

I have also found the Responsive Images Plugin – do you know something about that? Would that provide the needed image sizes?

I personally would not use a plugin for this as there is no need for it.

[Kathrin]

David, you are great! Thank you very much!

But I have 3 image sizes:
1200×800 –> featured image
696×464 –> post image
426×639 –> post image portrait format

Does this matter? Should there be changes for it in the provided code?

Imagify told me this to register a new image size:

If you wanted to add a new thumbnail size with 300px width and a resulting height that will not distort or crop the image (the height will be variable to keep the same aspect ratio for the image), here is example code that you could add to your theme’s functions.php file (usually located at /wp-content/themes/[your-theme]/functions.php):

add_image_size( ‘you_can_name_this_thumbnail_anything_you_want’, 300, 9999, false );

The ‘9999’ value above means that the height would be adjustable based on what it needs to be for each image when it is resized to 300px wide.

If this has been done right, if you reload your Imagify plugin settings page, you should see this new size listed in the “Files Optimization” section.

I have added your code, but that register no new image size. How can do that in the code snippet tool?

Greetings Kathrin

[David]

When you upload an image to WordPress it:

1. saves the original image at the original size eg. 1200 x 800/
2. It creates a series of smaller size images – which you currently have set to 800px and 400px.
3. It won’t create any image larger then the one you uploaded, so a 696×464 image, WP will just create the 400px.

When the image is displayed on the page it:

1. Outputs an <img> element with the original width and height attributes
2. And a link to the original image file
3. The src-set links for the original image and any of the other sizes
4. A sizes attribute that tells the browser what i would like as defined this function i provided db_modify_srcset_sizes

In the db_modify_srcset_sizes we define we would LIKE to load a 400px image for this screen and 800px for a larger screen. But these are just guidance, if for example the images largest size is 696×464 – the browser won’t find an 800px and instead it will just use the original size.

So there is no need to change anything unless you want to.

[Kathrin]

Wow that was a quick answer. Ok than I will use those parameters.

According to Imagify I have to register a new image size. I found something like that:

if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘mobile-image’, 300, 9999 ); //300 pixels wide (and unlimited height)
} ?>

<?php echo get_the_post_thumbnail($post->ID, ‘???’); ?>

But I don’t know how to get in work in the code snippets tool? Maybe you have an advice for me?

Greetings Kathrin

[Author]

Posts