[Support request] Too high LCP on mobile devices?

[Kathrin]

Dear David, I think we talk at across different purposes. I only want that the theme itself uses two different sizes:

desktop –> fullsize

mobile –> 900 pixel

At the moment unter Customizer –> Layout –> Blog there is defined that the theme should use the fullsize image. That’s ok for desktop, but isn’t it possible that the theme works with two different image sizes? So when the responsive mobile version of the theme is loaded just a smaller image is displayed than the fullsize one? Similar how you can do it in separate mobile theme…?

@media (max-width 768px) … {

add_filter( ‘generate_blog_image_attributes’, function( $atts ) {
// Set up our conditional
if ( is_post_type_archive( ‘portfolio’ ) ) {
$atts[ ‘width’ ] = 300;
$atts[ ‘height’ ] = 300;
$atts[ ‘crop’ ] = true;
}

// Return our options
return $atts;
} );}

Or something you had suggested here: https://generatepress.com/forums/topic/full-width-image-on-mobile/#post-1496710

In fact it is the same problem like the author mentioned here: https://generatepress.com/forums/topic/correct-image-thumbnail-size-not-used-on-mobile-and-ipad-larger-image-resized/ – it is always the fullsize image used and none of the thumbnails.

I have tried now to change the thumbnail size under Customizer –> Layout –> Blog –> Single

I have set it to mobile-large 900 px:

And the intrinsic size that is loaded is now 900×600 px instead of 1200×800 px:

View post on imgur.com

–> Page Speed Insights is satisfied

But WHY isn’t it possible to define two different sizes in the Customizer: one for mobile and one for Desktop? Can’t that be done with some peace of code? Because if I choose the 300 px image it looks nice on the cell phone but it is to small in size for Desktop.

View post on imgur.com

Greetings Kathrin

[David]

Maybe i am just not very good at explaining this 🙂 And i am not sure i can explain it any clearer than i already have.

IF WordPress introduces support for the <picture> element, then in the future we will be able to tell the browser EXCATLY what image to load for any size of device

But WordPress today only supports <img> element and src-set which i have covered how it works many times already.

Please note – this is not a Theme related thing, this is how browsers and src-set works. The theme can only provide the src-set and sizes attributes IT cannot change how browsers interpret them.

If i check your site now i see that there are only 2 x images being loaded in the src-set. I assume therefore you have reached a solution you’re happy with.

[Kathrin]

Ok, than I have to wait 🙂

Yes, I decreased the thumbnail-size and changed the size for the images in the customizer. Page Speed is now satisfied…

But thanks for your help!

Greetings Kathrin

[David]

Really glad to hear that 🙂

[Kathrin]

Hello, could you please explain me what that code does:

add_action( ‘wp’, function() {
if ( ! is_singular() ) {
add_filter( ‘wp_calculate_image_srcset’, ‘__return_false’ );
}
} );

Works it for featured images in single posts and archives?

Greetings Kathrin

[Ying]

Hi Kathrin,

It’s targeting archives.

[Kathrin]

Ok and what does that code do – disable srcset? And what is the improvement implementing this?

Greetings Kathrin

[David]

By default WP will output the Image HTML with src-set for the various sizes ie. the various medium, large, medium-large image sizes for the browser to choose from.
That code will tell WP to NOT output the src-set. The browser will not have a choice and will load the exact image it is provided.

Disadvantages: the browser always chooses the same image regardless of the screen/display size or device resolution. So make sure you tell WP to load the optimum size image*

Advantages: you can tell WP To load the most optimum size image* for all screen sizes, and that ‘may’ improve performance.

* In Customizer > Layout > Blog –> Featured Images >> Archives – you can select what Attachment size you want WP to load.

[Kathrin]

Dear David, thank you very much for that information.

Greetings Kathrin

[David]

You’re welcome

[Author]

Posts