Magento 2 Lazy Loading Enhanced
About LAZY LOADING For Magento 2.
Lazy Loading Enhanced for Magento 2 highly improves the page loading time by only loading page and product images as the user scrolls down the page. Fully integrated with default Magento 2 functionality, lazy loading is applied to listing pages, search pages, product pages, including related, up sell and cross sell products.
Easy to enhance functionality to any custom image in the store.
In addition lazy loading functionality can be easily enhanced and applied to any image in the store by simply adding the class “lazy” to the image element, as explained in documentation.
Easy to set up without technical skills
High speed and performance ensure a smooth user experience, better conversion and improved SEO score. After installing the extension, is it enough to Enable it from Magento Admin as it is integrated out of the box with Magento 2 product structure.
Features of the Extension.
- Better page loading time.
- Integrates out of the box with Magento 2 listing pages, search pages & product pages.
- Easy to enhance functionality to any custom image in the store.
- Smooth user experience.
- Improved conversions generated by improved page speed.
- SEO friendly, images can be indexed by search engines.
- Easy to install and use, light quality code.
How to Install the Extension:
Before installing Lazy Loading Enhanced for Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.2.2 It is recommended to install the extension first on a testing server before you install it on a live (production) server.
Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
app/code/WeltPixel/Backend ( download Backend from HERE if missing )
Access the root of your magento 2 project from command line and run the following commands:
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_LazyLoading --clear-static-content
php bin/magento setup:upgrade
Flush any cache that you might still have enabled on your server or in Magento.
Woohoo, the extension is installed!
HOW TO USE THE EXTENSION.
After installing the extension is it enough to Enable it from Magento Admin > WeltPixel > Lazy Loading > Enable [ Yes / No ] and the lazy loading functionality will apply out of the box for:
- Listing pages.
- Search pages.
- Product pages.
- Related, cross sell, up sell products.
- 1. Add the html class "lazy" to the img element
- 2. Add the html data-original attribute with the path to the image
- 3. Add a image in "src" attribute which will be displayed before the image loads, usually it's a gif animated image. Below is a full example:
You can enhance default configuration by easily adding lazy load functionality to any image in your store.
<img class="lazy" src="loading.gif" data-original="path/to/image/image.jpg" alt="">
What’s new in v.1.5.7 - December 14, 2017
- Added Support Center functionality in Magento Admin.
- Added Debugger functionality, checks for rewrites and points potential issues.
Adding fix for lazyload and hover images mouse over image on page load issue.
What’s new in v.1.5.5 - October 20, 2017
- Added fade loader functionality and image.
Added fade img for static pages lazy load.
What’s new in v.1.0.0 - October 6, 2017
- Initial relese.