1
<?php the_post_thumbnail( 'medium-thumbnail', array( 'loading' => false ), [ 'alt' => esc_html ( get_the_title() ) ] );  ?>

Get Diagnostics info on pagespeed

Largest Contentful Paint image was not lazily loaded

what I wrong?

5
  • 5
    You’re literally telling it not to: 'loading' => false. Commented Oct 6, 2021 at 12:17
  • To expand on @JacobPeattie's comment: the_post_thumbnail() eventually calls wp_get_attachment_image(), and the loading value defaults to lazy. (If I'm reading it right, this was first added in v. 5.5.0.) So you really don't need to pass anything in the $attr array if you want lazy loading.
    – Pat J
    Commented Oct 6, 2021 at 16:40
  • Thanks But still have this error after removing this line. Can I create custom PHP function tags from the_post_thumbnail() to my_custom_thumbnail() with lazy loading and support to custom image size, eg.i have use for medium-thumbnail.
    – Bharat
    Commented Oct 6, 2021 at 18:21
  • A new function isn’t going to help. If the loading attribute isn’t working you likely have some other problem and a custom function won’t help. Commented Oct 7, 2021 at 23:20
  • problem is solved for lazy load using the_post_thumbnail( 'medium-thumbnail' ); but not solve pagespeed Largest Contentful Paint image was not lazily loaded
    – Bharat
    Commented Oct 13, 2021 at 12:20

3 Answers 3

2
<?php the_post_thumbnail( 'thumbnail', array( 'loading' => 'lazy' ) ); ?>
1

single-post.php:

<img src="<?php the_post_thumbnail_url('medium') ?>" class="img-fluid rounded shadow-3 mb-1" alt="<?php the_title() ?>" loading="lazy">
0
    add_filter( 'post_thumbnail_html', 'wpdd_modify_post_thumbnail_html', 10, 5 );
    /**
     * Add `loading="lazy"` attribute to images output by the_post_thumbnail().
     *
     * @param  string $html The post thumbnail HTML.
     * @param  int $post_id The post ID.
     * @param  string $post_thumbnail_id    The post thumbnail ID.
     * @param  string|array $size   The post thumbnail size. Image size or array of width and height values (in that order). Default 'post-thumbnail'.
     * @param  string $attr Query string of attributes.
     * 
     * @return string   The modified post thumbnail HTML.
     */
    function wpdd_modify_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    
        return str_replace( '<img', '<img loading="lazy"', $html );
    
    }

source: https://wpdevdesign.com/native-lazy-loading-responsive-images-in-wordpress/

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Feb 24, 2022 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.