How to Avoid Lazy Loading for a Single Image on WordPress Without a Plugin.

  • Post author:

I’ve spent a good while of my Sunday afternoon finding out how to lazy load just one entire image on WordPress. As you might know, since the WordPress 5.5 updates, WordPress loads all images with the lazy tag per default.

But when an image is above the fold, I advise disabling lazy loading as it can delay the largest contentful paint. And for SEO reasons we don’t want any delay there.

Without any further delay, here’s the fix:
1. Copy the code below:

/* Disable lazy loading for single image* */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 36, 'large' ); 
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 36, 36 );

2. In the fourth and in the last line you see the value 36. This is the image id number of the image I want to change.
Replace the 36 with the image id of your image.
You find the image id in the code editor of the WordPress page/post. Here’s how to find it:

  • Click on the three dots in the upper right
  • Select the Code editor or use the shortcuts: ⇧⌥⌘M for Mac and Ctrl + Shift + Alt + M for Windows
  • find the image id in the code

3. On WordPress go to Appearance > Theme Editor > functions.php
4. Insert the code snippet there
5. Hit the “Update File” button

That’s it!

In the video below, I walk you live through every step.

If you feel like contributing to my coffee spending while creating content, you can do so here: buymeacoffee.com/corinaburri
Many thanks!

This Post Has 3 Comments

  1. Thomas

    Thanks for the tip !

    Just have a question, what is the “add filter” part on the bottom with some IDs ?

  2. Corina

    Hi Thomas
    Thanks for pointing that out. tbh, the ids were a copy-paste error.

    The values in the last line should be the ids of the specific image you want to lazy load.
    I’ve updated the manual accordingly.
    Thanks for bringing my attention to it.
    Corina

  3. Atif

    Hey there, I’ve used a code add_filter(‘wp_lazy_loading_enabled’,’__return_false’); in the function.php and that’s working for the homepage first image but it doesn’t lazy load the post featured image. How to lazy load post featured images? Please assist me in a better way. Your favor in this regard would be greatly appreciated. Thank you

    Regard,
    Atif

Leave a Reply