Low speed of the page load on a Magento 2 website is one of the main factors that cause cart abandonment and loss of customers’ trust. Besides, slow pages negatively affect rankings in the Google search results, which might lead to a decrease in the number of website visitors due to a disadvantageous position on SERP. One of the reasons for slowing down a website is the high quantity of images on website pages, which requires a significant amount of server resources to load a page. If you analyze your website in
Today, we are describing a solution that allows compressing the size of images and other files and significantly speeds up the loading of web pages. Meet Amasty Lazy Load for Magento 2 – an extension with a comprehensive set of tools for optimizing overall website performance. Below, we look closer at the functionality of the Magento 2 Lazy Load module and explore its backend interface.
- Configurable lazy load function;
- 2 options for loading strategy;
- Extended lazy load settings for each type of a web page;
- Image resize with no loss of quality;
- Automatic image compression to an optimal size;
- Creation of image copies in the WebP format;
- Support for the GIF, JPEG, and PNG image formats;
- Optimization of images in bulk;
- Generation of images queue;
- Minification of HTML, JS, and CSS code;
- Merging of CSS and JS files;
- Advanced JS bundling;
- JS defer parsing;
- Option to defer fonts loading;
- Asynchronous indexing;
- Signing of static files;
- Possibility to store product information in flat tables.
As you could already understand, the Amasty extension brings merchants the possibility to optimize website images by implementing the lazy load function. With this feature, off-screen images are loaded when a frontend user scrolls down to them. This way, even if a page has rich visual content, you can avoid lagging with no effect on customer experience. If necessary, you can set a value for the number of images that should be preloaded when a user first opens a catalog page.
The Magento 2 page speed optimizer module offers 2 options for the loading strategy – jQuerry Lazy Script or Native JS Lazy Script. Besides, it is possible to configure the lazy load function for each webpage type individually. Thus, with the extension, you get flexible settings for optimizing images on the homepage, category, product, and CMS pages separately.
Furthermore, to make page loading even faster, the Magento 2 Lazy Load extension can create copies of an image in different resolutions. The image resize function allows creating variants of the same picture in smaller sizes suitable for mobile and tablet devices.
Another valuable function available with the Amasty Lazy Load extension is related to the compression of images. The Magento 2 module automatically reduces the size of web store pictures without losing their quality. The extension supports gif, jpeg, and png formats that are the most widely used for images.
Besides, store owners can enable creating copies of images in the WebP format to make them smaller and automatically adjust the resolution. Images converted to WebP significantly increase a page loading speed and improve website positions in SERP.
The Magento 2 speed optimization module also allows users to leverage bulk image optimization. By default, all images saved in the catalog and WYSIWYG folders are automatically processed and moved to cache on a page load. If necessary, you can select other folders with your website pictures that should be optimized, as well as set the level of jpeg files compression and apply it to specific folders.
In addition to compressing images, The Magento 2 Lazy Load extension provides tools for optimizing code structure on a web store. One of the module’s features related to code compression is minification of HTML, CSS, and JS files. The extension removes some elements from a file, like tabs, comments, line breaks, spaces, etc., that are not important for reading the code. It allows reducing the size by 10 – 20% with no negative impact on the code itself.
As for some other advanced features offered by the Amasty Lazy Load extension, they include asynchronous indexing of the order data, automatic update of cached values by signing static files, and using flat tables for storing product and category info in the database.
Now, let’s proceed with the exploration of the backend interface of the Amasty Lazy Load extension.
To configure the Amasty Lazy Load extension, navigate to Stores -> Settings -> Configuration -> Amasty Extensions -> Google Page Speed Optimizer in your Magento Admin. You will need to set all the options in 3 sections: General, Settings, and Image Optimization.
In the General section, you can enable/disable the module.
In the HTML settings, you decide whether to minify HTML files.
In the CSS settings, you can allow merging and minifying CSS files. Here, you also decide whether to defer page fonts loading and which fonts to exclude from loading later. From this tab, it is also possible to move print CSS files to the bottom of the page.
In the next settings tab, you can choose whether to use the flat catalog for storing category and product information.
In the last tab of the Settings section, you can allow the signing of static files and apply asynchronous indexing to the order data.
As for the Image Optimization settings, first, decide whether to use the image compressor and optimize all images uploaded to the catalog and WYSIWYG folder automatically. Here, you can also select particular folders with images that should be optimized.
Next, you can choose which file formats you want to compress (JPEG, PNG, or GIF) and select the quality level for JPEG images compression. Here, you also decide whether to create image copies in the WebP format and create pictures in smaller resolution for mobile and tablet devices.
Then, you can enable the “Dump Original Images” option to have original pictures stored in a special folder. By clicking the “Generate Queue” button, you will start the process of the images queue generation in the database. Here, you can also set the number of images to be optimized in one request and start the optimization process of the files in the selected above folders manually by pressing the appropriate button. The extension also allows clearing optimized files in the folders with WebP, mobile, and tablet images in one click.
If you select advanced settings, you will be able to configure the lazy load functionality for each type of your store pages. The extension offers the same set of options that are available in the simple configuration.
Amasty Lazy Load for Magento 2 provides ecommerce store owners with all the necessary tools for optimizing website performance. By compressing images and code and implementing lazy load, you can drastically increase the speed of your website and quickly deliver store pages content to customers. The module helps merchants get a higher position in search engine rankings, improve customer satisfaction from browsing on a web store, and motivate shoppers to make a purchase. Besides, by applying the module’s functionality, you can significantly improve your website pages score in Google PageSpeed Insights. As for the price, you can buy the Magento 2 Lazy Load extension for $249.'