[Support request] High LCP loading time

[Ales]

Hi,

I am sure you’re already annoyed by all the bullsh*ts around Core Web Vitals, but unfortunately, Google didn’t give us much choice… So, because of the upcoming May update, I need to solve this as well.

I run Ezoic ads on my site, so that doesn’t exactly improve the page speed, but still, I would like to ask you if there is something I can do about it.

I use WP Rocket and WPX Hosting. I got mobile CLS to 0,001 and FID is also under 100 ms, so all good there. But I can’t get LCP to some reasonable values. Right now it’s about 4-6s on mobile. On desktop it’s okay.

For all posts, it’s always related to the featured image. The featured image’s size is always 700x400px and I try to keep the size under 50kb. So, that shouldn’t be a problem.

I found this script by David here on GeneratePress support forum:

add_action( 'wp_head', function(){
  $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
  if ($featured_img_url) {
    echo '
    <style>
    @media(max-width: 768px) {
      .page-hero {
        background-image: url(' . $featured_img_url . ');
      }
    }
    </style>';		
  }
});

Is this universal code I can use on my side, or it must be edited?

I am writing my site URL to the Private information field together with a link to a post (I use the same post structure everywhere).

Let me know what I can do to improve the page speed.

Thanks a lot!
Best regards,
Ales

[David]

Hi there,

That code only applies if you’re using a Header Element to display the featured image.

Looking at your site, the most probable cause of high LCP for the featured image is because its being lazy loaded. You don’t want it lazyloading when its above the fold.

Add this PHP Snippet:

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

It will add the first-featured-image class to the latest post on your blog and the single post.
You can use that class in your Lazy Loaders exclude images option.

[Ales]

Hi David,

Thanks for your help.

I added your PHP Snippet and excluded images with that class from Lazy Load in WP Rocket. Unfortunately, it didn’t have any effect at all. In fact, the loading times are even worse now.

The LCP element is still the same – featured image. Is there any way to modify that previous script I sent, so it would work for my site? Maybe that would help.

Thanks!
Ales

[David]

I am seeing a LOT more PSI issues flagged on your site today then when i checked yesterday.
The major issue is happening all up front before anything is loaded as you can see by the long FCP time.

First off the initial server repsonse time is slow, and then you have a large amount of 3rd party scripts ( adverts ) that are blocking the main thread.

[Ales]

Hi David,

Yes, I know the ads are making things much worse. Anyway, PageSpeed Insights still show a featured image as the main issue for LCP. Isn’t there anything we can do about it?

Thanks,
Ales

[David]

At the moment you have a lazy loaded featured image that cannot complete its request until the rest of the page has rendered, which is being slowed down by things like the advert scripts

The best solution is to NOT load adverts above the fold and ensure that any advert scripts are lazy loaded / deferred so their scripts do not interfere with the initial loading of the page.

[Justin]

Hey David,

Will this snippet “disable” lazy-loading for all featured-images across all posts on our blog?

Note: We do not use aHeader Element to display the featured image, but rather, we use the “Display featured images” option in Appearance > Customize > Blog > Archive/Singles options.

Thanks in advance for your help.

[Fernando]

Hi Justin,

That snippet only adds the class first-featured-image to the featured image of the latest post on your blog and all single posts.

In your plugin that has a lazy-loading feature, use that class to exclude the featured images from lazy loading.

Doing so should disable lazy-loading for all featured images across all posts, and for the first post on your Blog page.

[Simon]

Hi Ales
Do you know if your site has enough traffic for Ezoic to host your site?
If so, it’s worth a try.

[Justin]

Hey Fernando,

I found the issue and wanted to share my fix for posterity’s sake. I’m not using a plug-in for lazy-loading images, so I reached out to BigScoots (my managed host) to see if it could be something that Cloudflare (my CDN service) is doing.

They confirmed it was not Cloudflare, and discovered that WordPress implemented a native lazy load on images as of version 5.5.

We fixed this by adding this snippet to exclude featured images from lazy load.

// Disable lazy load for featured image only
function disable_lazy_load_featured_images($attr, $attachment = null) {
	$attr['loading'] = 'eager';
	return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_load_featured_images');

[Fernando]

I see. Thank you for sharing this Justin!

[Author]

Posts