LCP issue in Google PageSpeed

Hi there,

i ran a PSI test on the site and the LCP is 2.1s which is within Googles CWV targets.

It could 'probably' be a lot quicker by not lazy loading that image. As thats the LCP element and its being deferred until the rest of the page has loaded.

Most lazy loaders give you an option to skip an image with a specific CSS Class. You can add this PHP Snippet to your site:

function skip_lazy_class_first_featured_image_pages($attr) {
  if ( is_singular() ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image_pages' );

And then use the first-featured-image class for exclusion.

NOTE: Shortpixel swaps the core WP <img> HTML, to which that class will be added to, to a <picture> element which may mess it up...

Hi. I see. However these in screenshot popup as issues too (they relate to GP CSS files)
i.e. for https://mindfultravelexperiences.com/best-oregon-hiking-trails/

Check: https://prnt.sc/1xhq9ah

The first file is the GP Main Styles - its a tiny file and i can't it making much difference. If it did then your FPC would NOT be 1.2 seconds.

The second file is loaded by WordPress for the block styles... its not a GP thing.

The main reason for the long LCP time is the Lazyloading of that image.

You will also want to check the Diagnostic:

Reduce the impact of third-party code - Third-party code blocked the main thread

Yes I see. However, as I use shortpixel you say that this will be messed up? I mean if I use the code.
What do you mean with "mess it up?"

Hm. I used the code and adjustment in wprocket. Images load fine with <picture> and the LCP error dissapeared. However, the grade is yet higher but still lower.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmindfultravelexperiences.com%2Fbest-oregon-hiking-trails%2F

Mistake. The LCP issue with the image is still there. However the grade went up (but not green).

Next issue is this:

https://www.screencast.com/t/uVhXKrooOT

I would recommned deferring the loading of 3rd party advert scripts. As they are the main cause of the Minimize main-thread work being 2.3 seconds.

Yes. I am checking that.

Deferring those scripts should make a much greater improvement to performance then trying to reduce render blocking CSS. Those scripts not only require DNS loockups and 3rd party requests they tie up the Browser Main Thread, which will slow the browser down from doing anything else. So clearing them should improve how quickly CSS is loaded and interpreted by the browser.

Apart from these scripts that ara highly optimized, you will see that chain requests from the theme and the featured image contribute to the delay. So how to solve that? I mean I use your theme...
See image https://prnt.sc/1xl407x

You can combine and minimize the CSS files if you want using whatever optimization plugin you're running. Probably won't make much of a difference ( could make them load slower ) but you can try that.

The LCP timing is still mainly related to lazy loading the featured image, unless you can disable that then its always going to load later.