How To Lazy Load Images To Speed Up WordPress

I don’t think there is any need to explain the importance of website’s speed optimization. I have already covered it many times in different articles. In WordPress speed optimization guide, I also explained the importance of lazy load images in WordPress.

Images are the primary reason why your website loads slowly. If your blog or websites use too many images, you need to seriously think of image optimization to make your website faster. On an average, images account for around 60% of web page’s size. So, you must think of using optimized images.

Also read: How to speed up WordPress blog

You can use image optimization plugins on WordPress to optimize images and reduce the size without compromising the image quality. Another good thing is to add lazy load in images. If you are not sure what is Lazy load and how to implement it on your WordPress based website, keep reading.

What is lazy load of image

Lazy load of images is limiting the images loading in order to reduce the page size. In this process, the website only loads images which are inside the viewport. So, images which are not in the viewport, that will not be loaded. When you scroll the page to see the other content of the page and a new image comes in the viewport, it loads that image.

This process makes web page faster by reducing the page size and it also helps in reducing the data bill of your visitor.

There are multiple jQuery plugins that allow you to lazy load images on your website. If you are using a custom HTML website, you can simply use those jQuery plugins. If you are using WordPress, you can either use any available plugin or customize the theme to include a jQuery plugin and then edit templates according to that jQuery plugin. The best way to implement lazy load images in WordPress is the use of WordPress Plugins. In this article, I am adding few plugins.

How to Lazy Load Images in WordPress

If you know jQuery and coding, you can do it manually. There are many lazy loading jQuery plugins are available. The easiest way is to use the WordPress plugins. Just install any good Lazy Load Plugins and you are done. Few plugins offer the options to customize few things, but I am not going to explain any individual plugin here. Below is the list of few lazy load plugins for WordPress

Best Lazy Load WordPress Plugins

1. Simple Lazyload

Simple Lazyload is a simple plugin that automatically replaces all images with the placeholder and loads the image content as it comes in viewport while page scroll.

It also offers lightbox effect or gallery slideshow effect for images.

Download this plugin

2. Lazy Load

Lazy Load is another nice plugin. It was developed by Automattic, the company behind WordPress, along with TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC). It uses jQuery.sonar to only load an image when it’s visible in the viewport.

In case you want to change the placeholder image, you also have option for that. But you need to edit the functions.php file to add the code for that.

Download:  Lazy Load

3. Image Lazy Load

Image Lazy Load helps in reducing the page size by adding the lazy load in images of page, post or custom post type. The developer behind this plugin has stopped working on the plugin. I will try to find a good one to replace this listing.

Download:  Image Lazy Load

4. BJ Lazy Load

BJ Lazy Load replaces all your post images, post thumbnails, gravatar images and content iframes with a placeholder and loads the image when it comes close to viewport. The best thing is that it also covers embedded video from YouTube, Vimeo etc.

Download:  BJ Lazy Load

5. a3 Lazy Load plugin

A3 Lazy Load plugin is also popular among  WordPress users. It helps you in adding Lazy load functionality in your WordPress blog and optimize the speed.

Download: a3 Lazy Load plugin

Install any of these plugins on your WordPress blog and activate. Check if you see any options for settings.

Final Words

There are many other good WordPress plugins available that help you in adding Lazy load in your WordPress. After implementing, try checking the website’s load time. You will surely see improvements in the load time.

Don’t forget to share your thoughts on this with us.