There are many ways to improve the performance of your WordPress blog. We have discussed the use of caching plugin, cleaning up and optimizing your database and and also plenty other tips to speed up the loading time. In this article, we are going to show you how you can further improve your site’s performance by loading your images on demand.
All blog owners will know that images play an important part in a blog post. In Make Tech Easier, we love to use plenty of screenshots to make the tutorial clearer and easier to understand. However, there is one problem with this. The more images you have, the slower the site loads and utilizes more bandwidth. In addition, as we have outsourced our images hosting to Amazon S3, the higher bandwidth also translates to higher cost.
A good solution to this is to load your images on demand, or what is most commonly known as lazy loading.
Lazy loader is a jQuery plugin that delays the loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded until user scrolls to them. For sites that use plenty of images, lazy load can make the page loads faster and also help to reduce server load (and cost).
To avoid going into the technical detail, let us look at the (simplest) ways that you can integrate this into your WordPress blog.
1. jQuery Image Lazy Loader
Without a doubt, plugin is the way to simplify stuff in WordPress. jQuery Image Lazy Loader is one such plugin that integrate the lazy load feature into your site.
There are no configuration required. All you need to do is to install the plugin and activate it.
Once activated, the lazy load script will work on all pages of the site.
2. Lazy Loader
Lazy Loader is another plugin that integrates the lazy load feature into your site. The difference is, it is configurable. The Lazy Loader plugin is not available in the WordPress repository, so you have to go to the developer’s website and download it (which also means you won’t be able to install it directly from your WordPress dashboard).
Once you have downloaded, installed and activated it, you can go to “Settings -> Lazy Loader” section to configure the plugin.
Options available include inserting the lazy load script on all pages, home page, posts, pages, category etc. You can also set the threshold limit (the number of images to load below the viewport) to avoid a lag in the image loading.
Other options include the loading effects and using your own placeholder image.
Conclusion
Lazy loading is a good way to reduce your site bandwidth, improve the page’s loading time and overall performance. If you just want a plug and play solution, jQuery Image Lazy Loader is the one to go for. If you want to have more control, then the Lazy Loader plugin is a better choice.
Lastly, for those who are proficient enough, you may want to check out the lazy load project for deep integration into your site.
Image credit: takamorry
Our latest tutorials delivered straight to your inbox
