WordPress Tutorial: Enable Lazy Loading for Images and Avatars

The benefit of enabling lazy loading for WordPress images and avatars is that it can improve the loading speed of certain pages. Detailed introductions on hosting static resources on Qiniu Cloud storage and using Qiniu to cache Gravatar avatars to accelerate the site can be found in the articles Configuring WP Super Cache with Qiniu Cloud for CDN Acceleration and Using Qiniu Cloud Storage to Accelerate Gravatar Avatars.

About WordPress Image Lazy Loading: If your articles contain many or large images, lazy loading images allows the page to load first, deferring image loading, which significantly improves the visitor experience.

About Avatar Lazy Loading: Qiniu itself has multiple CDN acceleration nodes and is very fast. However, caching Gravatar avatars to Qiniu may take some time. If avatars that have not been cached yet appear on your page, they might still load slowly. This article can effectively solve the two problems mentioned above.

1. Add the jquery.lazyload.js Plugin

First, download the jquery.lazyload.js plugin. Unzip all JS and image files from the archive into the root directory of your theme. Then, add the following code to the footer.php file in your theme directory to include it.

<script src="<?php echo get_template_directory_uri(); ?>/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            effect:"fadeIn"
          });
        });
</script>

2. Image Lazy Loading

According to the official documentation, you need to add a data-original attribute to images. However, manually adding this is cumbersome. Instead, add the following code to the functions.php file in your theme directory. This will automatically add the data-original attribute to every image, achieving the goal of image lazy loading.

// Lazy load images
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/loading.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'\"]([^\'\"]+)[\'\"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}
// End lazy load images

3. Gravatar Avatar Lazy Loading

WordPress uses Gravatar avatars by default, which can slow down the entire page load speed. In the functions.php file (the location may vary depending on your theme), find Code 1 and replace it with Code 2.

Code 1 (Original):

<?php echo get_avatar( $comment, '32' ); ?>

Code 2 (Replacement):

add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/load_min.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'\"]([^\'\"]+)[\'\"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}

By following the three steps above, you can achieve lazy loading for WordPress images and avatars. The benefit is that images are only loaded when the user scrolls to their position, which improves the loading speed of pages with multiple images and reduces server load. The downside is that it may affect search engine indexing of images, and some browsers may display blank spaces when opening the page. However, from observation, most themes already use this feature by default. If needed, you can refer to this guide.

Part of the content is referenced from: WordPress Image Lazy Loading, reorganized by Xiaoz Blog.