Magento 2 Lazy Load Products And Images by WeltPixel.

About the Lazy Load Products And Images 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. Download Here: Lazy Load Products And Images by WeltPixel. Included in the Pearl Theme for Magento 2.

Features of the Extension.

• Start Loading Early - PRO version only.
• Control the Lazy Load animation speed - PRO version only.
• Upload custom placeholder image for Lazy Load spinner - PRO version only.
• 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.

1 MINUTE INSTALLATION GUI.

• Step 1:
  Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.X. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
• Step 2:
  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
  app/code/WeltPixel/LazyLoading



Optional
Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
app/code/WeSupply/Toolbox

• Step 3:
  Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
  www.yourmagentostore.com/weltpixel-extension-installation/
  
• Step 4:
  In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
• Step 5:
  Wooohooo! The extension is now installed on your Magento store! Congrats!
  
  

Troubleshooting

If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

• Step 1:
  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.4.X. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
• Step 2:
  Copy the extension files to the paths of your Magento 2 instance listed below. If the ‘app/code/WeltPixel’ folder is missing, please create it manually:
  app/code/WeltPixel/Backend
  app/code/WeltPixel/LazyLoading



Optional
Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
app/code/WeSupply/Toolbox

• Step 3:
  Access the root of your Magento 2 project from the 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
  php bin/magento setup:di:compile
  php bin/magento setup:static-content:deploy -f
  
• Step 4:
  Flush any cache that you might still have enabled on your server or in Magento.
• Step 5:
  Woohoo, the extension is installed!

How to Upgrade the extension.

• Step 1. Remove extension code under app/code/WeltPixel/LazyLoading before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
• Step 2. Follow normal installation instructions above.

Magento Marketplace Installation.

• If the extension was purchased from the Magento Marketplace, follow the instructions in this article: How to install extension if purchased from the Magento Marketplace
• If asked for a license, follow the steps presented in section 7 of this article: License key for local / staging / development environment. Multi-store licensing.

How To Add Lazy Loading in Magento?

QUICK SETUP. 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.

ADVANCED SETUP. The PRO version of the module comes with an Advanced Feature: Start Loading Early. To enable this feature, head into Admin -> WeltPixel -> Lazy Loading Settings -> Advanced Settings -> Start Loading Early -> Yes. Negative Margin - Insert a threshold at which images are loaded before they appear on the screen. For example, you can insert the value "300", and images will be loaded when they're at 300px from the viewport. Effect Speed - Effect speed in milliseconds. Example: Insert 1000 to get an animation speed of 1 second. Loading Placeholder - This option enables you to upload your own image instead of the default Lazy Loading placeholder. Placeholder Width - Allows you to set a width for the placeholder image. Example: Set the value to 50 for a width of 50px.

How To Add Lazy Loading To Images In Your Magento Store. You can enhance default configuration by easily adding lazy load functionality to any image in your store. 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:

Download it now! Magento 2 Lazy Load Products and Images by WeltPixel