[Support request] Image Optimization on Mobile & LCP

[Sherri]

I’m trying to reduce the LCP stat on my webpages for mobile. It seems the problem is with the images. I use primarily full-width images on my site & a featured image width of 1200/675.

The display feature image function made stats really slow. So, in a staging environment, I disabled this & loaded a smaller 800 width image to display above the fold. This helped, but my scores are still too high on many pages.

Two Questions:

1. From what I can tell the medium-large size is being used on mobile. Reading through the other tickets it seems I may need a different thumbnail size. Is this what you would recommend or is there a better way to improve performance?

2. Is there any way you think I can use the featured image option to display full-width images without slowing down the LCP too much? I’d like to have it enabled on the blog.

I use SG Optimizer for image optimization. I’ve also tried Short Pixel, regenerated thumbnails, and turning on/off lazyload & other options, but haven’t been able to reduce the stat reliably yet. I’ve disabled the SG Optimizer plugin temporarily for troubleshooting.

Can you help me figure this out?

Thanks in advance.

[Tom]

Hi there,

You could try preloading the featured image using the function below.

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">';
    }
} );

On top of that, I would make sure your images have been optimized using some sort of optimization tool.

Also, it would help to reduce the number of render-blocking resources using a plugin like Autoptimize: https://docs.generatepress.com/article/configuring-autoptimize/

[Sherri]

Hi Tom,

Thanks for replying.

I added the code you gave me, but unfortunately, I don’t see much of a change. Is there a way to see if I added it correctly? I used the Code Snippets plugin.

With the code & featured images on I get: Largest Contentful Paint = 5.2 s
With featured images off & loading the smaller image within the body of the article, the LPC was 4.6s.

I host on SiteGround, so was using SG Optimizer for the front-end optimization & render-blocking scripts. I had turned it off for troubleshooting. I turned it back on now. Do you recommend Autoptimize in addition to this?

Thanks again for your help.

[David]

Hi there,

the code that Tom provided is working as the featured image is being pre-loaded – that should assist with the LCP. However, you have lazy loading enabled which is deferring the featured image to after the page has loaded.

Most lazy loaders provide an option to exclude image using a CSS Class.
You can add this PHP Snippet to give the featured image a class of: first-featured-image which you can use to exclude them:

// 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' );

Now for the in page images, in the Block Editor can you select an Image Block and in the Toolbar select Wide Width – this will expand the image beyond the padding – so its 100vw in mobile. The browser ‘should’ select a better size image for them.

[Sherri]

Thank you David for this information.

I’ve added the new code & tested both the featured image & the full-width on the in-content image. Unfortunately, I see no real change.

The post with the featured image has an LCP of 4.7 s (vs 4.8s) to the test just prior. The page with the in-content image is now 4.5 s (vs 4.4s).

I think there may an issue with the SG Optimizer Lazy Load feature not recognizing my skip-lazy class & the new one. I’m going to disable it & switch over to WP Rocket to see if it works better. I’ll update the ticket after I make the change.

Thanks again for your help.

[David]

No problems 😉

[Author]

Posts