-
I am struggling with optimizing the LCP loading speed on mobile. On desktop it works great, it is only slower on mobile.
Based on the page speed google analysis the biggest issue is the loading of the featured image. So far I have deleted the header element where the featured image was loaded dynamically which reduced the leading speed by half.
I have also tried turning off lazy loading for the featured image but that didnt seem to have any effect.
If you have any suggestions on how to improve the loading speed of the image I would be grateful.
-
Hi there,
One thing you can try is preloading the featured image. If you’re using an optimization or caching plugin, check if it has a feature to preload images. This can help reduce LCP impact.
-
Hi I am currently using these 2 php scripts to preload the featured image and to stop the lazy loading of the featured image from these topics on the support forum:
https://generatepress.com/forums/topic/preload-featured-image/
// Add first-featured-image ( or any class ) to featured image of latest post function skip_lazy_class_first_featured_image($attr) { global $wp_query; if ( 0 == $wp_query->current_post ) { $attr['class'] .= ' first-featured-image'; } return $attr; } add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );(I also ofc excluded the first-featured-image class from lazy loading)
https://generatepress.com/forums/topic/image-optimization-on-mobile-lcp/
add_action( 'wp_head', function(){ $id = get_post_thumbnail_id(); if ( is_single() && $id ) { $size = 'full'; $img_src = wp_get_attachment_image_url( $id, $size ); $img_srcset = wp_get_attachment_image_srcset( $id, $size ); echo '<link rel="preload" as="image" href="' . $img_src . '" imagesrcset="' . esc_attr( $img_srcset ) .'" imagesizes="100vw">'; } } );However including them did not seem to yield any results. I am more thinking if there is perhaps some setting within the theme or maybe i setup something wrong because the speed on desktop is fine, its just the mobile that is the problem.
-
1. I don’t see this preload code working on your site.
2. You are preloading the full size image; however, it’s loading 768px width (medium large) version on mobile.
3. You can also add this code to rewrite the image scr rule so it loads the medium version on mobile:
function db_modify_srcset_sizes($sizes, $size) { $sizes = '(max-width: 420px) 150px, (min-width: 421px) 380px, (min-width: 769px) 1024px, 100vw'; return $sizes; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2); -
Hi, I tried adding the code but I also dont see the rel=”preload” when inspecting the image. Is there anything else I could try to preload the image?
This is what I put in the code snippets php snippet:
add_action( 'wp_head', function(){ $id = get_post_thumbnail_id(); if ( is_single() && $id ) { $size = 'full'; $img_src = wp_get_attachment_image_url( $id, $size ); $img_srcset = wp_get_attachment_image_srcset( $id, $size ); echo '<link rel="preload" as="image" href="' . $img_src . '" imagesrcset="' . esc_attr( $img_srcset ) .'" imagesizes="100vw">'; } } ); function db_modify_srcset_sizes($sizes, $size) { $sizes = '(max-width: 420px) 150px, (min-width: 421px) 380px, (min-width: 769px) 1024px, 100vw'; return $sizes; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2); -
Hi, I tried adding the code but I also dont see the rel=”preload” when inspecting the image
My code will not add the attribute or preload the image, it just asks the browser to load a smaller version of the image on mobile.
As you can see, now it’s loading the 300px (medium) size image on mobile:
https://app.screencast.com/YFVkIzQnnYIseYour preload code isn’t loading; it seems you didn’t add it correctly. Can you check?
And pagespeed insights uses the past 28 days’ data to generate the report, it’s not reflecting the current state.
I just did a lighthouse test for your site on mobile, and it scores 99:
https://app.screencast.com/WBbU3CVfjjr7C -
I couldnt figure out why the code isnt preloading but the image loads a little faster in lower res. Thanks.
-
The preloading code isn’t working, you might need to check how it was added.
- You must be logged in to reply to this topic.