There are many ways to improve the performance of your magento store. All shop owners will know that product images play an important part. However, there is one problem with this. The more images you have, the slower the site loads and utilizes more bandwidth. A very good solution to this is to load your images on demand, or what is most commonly known as lazy loading.
Conclusion Lazy loading is a additional way to improve the page's loading time and overall performance. You only need 1-2 minutes to install this magento extension.
http://www.mgt-commerce.com/magento-lazy-load-images.html
- Extract zip archive and copy contents to the app/folder of your Magento installation
- Open the file "app/design/frontend/default/default/catalog/product/list.phtml"
search for
<img src="helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>"
width="135" height="135" alt="stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
replace with
<img class="lazy" src="getSkinUrl('images/mgt_lazy_image_loader/loader.gif'); ?>" data-src="helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
- Clear the cache in Admin > System > Cache Management
1.0.4
- Add newest jquery version
- Change namespace to Mgt
1.0.3
- Fixed typo in template
1.0.1
- Add lazy loading in catalog search results
1.0.0
- Fix typo