LCP issue, featured image, srcset & scaled images

Hi there,

Browsers will (should) only load the src-set image that best fits the visible size required.
Unless you use CSS to re-size them - then the browser selects the largest available.
So its best to avoid using CSS to avoid resizing images if you can.

As the image is above the fold i would also exclude it from lazy loading. This may cause a slight increase in FCP but should reduce your LCP.

Thanks, I removed the following css:

.featured-image {
max-width: 100vw !important;
}

Is there a way to set the featured image to full width without using css? I've tried expanding the container width, which works, but it also expands the container for the entire site. I'd like to have a full width featured image with a container of 1100 px beneath it.

I am using WP Rocket to Lazy Load images. I looked up how to disable lazy load for specific images, and found the following resource:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images#:~:text=Disabling%20LazyLoad%20on%20an%20image,rocket_lazyload_excluded_attributes'%2C%20'rocket_lazyload_exclude_class'%20)%3B

It says to add class="skip-lazy" to . How do I access the html tag for the featured image?

Thanks!

Try adding this PHP Snippet to add the class:

function db-add-featured-image-class($attr) {
  remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
  $attr['class'] .= ' skip-lazy';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');

Thanks! Should I add that to functions.php or a different PHP file?

Regarding the featured image width, is there a way to set the featured image to full width without using css? I’ve tried expanding the container width, which works, but it also expands the container for the entire site. I’d like to have a full width featured image with a container of 1100 px beneath it.

If you want to maintain the responsive src-set sizing the best you can do is:

.featured-image {
    max-width: 100% !important;
}

But it will only be as wide as the original image size.

All other methods that force resize the image will break the src-set.

Thanks very much! Regarding the PHP snippet for the "skip-lazy" class, which PHP file should that be placed in?

Hi there,

That code can be added using one of these methods: https://docs.generatepress.com/article/adding-php/

Thanks! I installed the Code Snippet plugin, and duplicated the "Example JavaScript snippet." I cleared out everything in the box and pasted in the PHP snippet:

function db-add-featured-image-class($attr) {
  remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
  $attr['class'] .= ' skip-lazy';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');

It is giving me the following error:

"The snippet has been deactivated due to an error on line 0:
Parse error: syntax error, unexpected end of snippet"

How should I change the PHP to fix this error?

In addition, for this snippet to work, do I need to manually add the skip-lazy class to the HTML tag for the featured images? If so, how do I access the HTML tag for the featured images?

Try this instead:

add_filter( 'wp_get_attachment_image_attributes', function( $attr ) {
    $attr['class'] .= ' skip-lazy';

    return $attr;
} );

This function should add the class automatically for you.

Thank you! That snippet seems to have worked.

Results:
LCP mobile: 3.2 s
LCP desktop: 1.1 s

(Before adding the Code Snippet plugin and PHP snippet, LCP mobile was over 4 seconds, and LCP desktop was over 2.5 seconds.)

Glad we could help! :)

Hi again,

Sorry to open this back up -- I noticed that the PHP snippet actually added the 'skip-lazy' class to all images on the website. I only want to add the 'skip-lazy' class to featured images, because they are above the fold. How could I edit the PHP snippet to add the 'skip-lazy' class to featured images only, while leaving lazy load enabled for all other images?

That code should only affect the Featured images.
Can you re-add the code and let us take a look ?