Last week, we looked at different ways to optimize your WordPress images and reduce their impact on the speed of your mobile site. This was mostly focused on removing unnecessary images and using the right file format and size.
When you have made sure your images are optimized for mobile, but your site is still not loading fast enough, what can you do?
In this post we will explain another clever method for speeding up the delivery of your images and improve the overall user experience: lazy loading.
What is lazy loading?
Lazy loading is a web design technique that forces to load only the content above the fold (what is first visible when the user loads the page). This way, instead of bulk loading all of the elements of a page at once, assets can be loaded as they are needed.
In simple words, only content (such as images) visible without scrolling down the page will load. The rest will load as the user scrolls – when he/she accesses a part of the page that requires it. This is also known as on-demand loading.
Since only a part of your site needs to be downloaded when a visitor first lands on it, lazy loading can make your WordPress site a lot faster and give you a performance boost, especially if you have a lot of elements on your page.
Top lazy load plugins
The lazy load design pattern can be implemented in different ways, but the result is always the same. If you are looking to add lazy loading to your WordPress site, there are a few plugins that will make this work much easier for you.
BJ Lazy Load
BJ Lazy Load is a plugin that allows you to lazy load images and iframes. It can replace your featured images, thumbnails, gravatar images, text widgets, and content iframes with a placeholder and loads the actual content when it becomes visible on the user’s screen. Since it works with iframes, it also covers embedded videos.
Once you have installed and activated this plugin, you can configure what assets should be lazy loaded from your Settings page > BJ Lazy Load. It also lets you to use your own custom placeholder and skip images with classes.
The Lazy Load plugin uses jQuery.sonar to only load the images which are above the fold. There are no settings, so you don’t need to do anything else after its installation and activation. This plugin will automatically do all the work for you.
However, if you want to change the placeholder or the images that should be lazy load, you can do so by editing the php file. The authors have provided some code snippets that you can refer to.
Rocket Lazy Load
The Rocket Lazy Load plugin displays images, iframes, and videos on a page only when they are visible to the user. It is a tiny script for WordPress (it weights less than 10KB) and does not rely on any external libraries.
The plugin works on thumbnails, all images in a post content or in a widget text, avatars, smilies and iframes. After its activation, you can choose from the Settings page where lazy loading should be applied: in images, iframes and videos, or both.
Users don’t want to wait while pages load slowly. If they have to stare at an empty screen longer than 3 seconds, they will probably end up abandoning your site.
If you can’t get everything to load at once, make sure the first content people see on your site load fast and is available. Lazy loading can be a great usability boon and make a significant contribution to reducing the load time of your WordPress site.
Do you use lazy loading on your site? Have you used any of the plugins above? Feel free to share your thoughts in the comments below.