Archived topic
Need Help With High LCP On Mobile
5 replies · Started by Sunil on June 19, 2021
Dear Team
I use GP premium, WP Rocket, and Shortpixel.
Made sure everything is alright from the other two plugin's end (I'm creating webp images and serving the same using WP Rocket).
As per your suggestions in other forums, I've tried not to lazy load my feature image using this PHP (and adding first-feature-image in WP Rocket)
// Add skip-lazy class ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( !is_single() && 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' );
And preloading the featured image using this code -
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">';
}
} );
Can you guide me how I can reduce the LCP on mobile? I'm using a good server and even cloudflare Argo for delivery. There must be something wrong with the delivery, image size or something I can't infer right now. Can you help?
Found the solution. I removed every code snippet and let WP rocket lazy load it. LCP issue resolved itself. Strange but wow, it helped.
Glad to hear that!
Dear David
Just checked the same on webpagetest. I guess it's not solved after all.
Can you give it a try at solving the issue?
Attached the link.
Can we use a mix of preload, no lazy load, and screen-apt sizes? If yes, can you provide me with snippets and/or CSS codes?
In the first PHP Snippet change:
if ( !is_single() && 0 == $wp_query->current_post ) {
to:
if ( 0 == $wp_query->current_post ) {
And remove the second preload code for now as thats going to always preload the Full size image even if its not being used.