Redeem Now
Read More
Read now
Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    Blog Version - 2.0.x, 2.1.x, 2.2.x, 2.3.x, 2.4.x
    • Version 2.0.x, 2.1.x, 2.2.x, 2.3.x
    • Version 2.0.x, 2.1.x, 2.2.x, 2.3.x, 2.4.x

    Magento 2 Defer Javascript, WebP, Lazy Loading, TTFB Improvement Guide

    Webstore optimization is very important for increasing the performance of E-commerce websites. That’s why we have integrated speed and performance optimization for Magento 2.

    The main purpose behind optimizing the store is to provide a better user experience. Especially if you are using Magento 2 platform for your website.

    Since Magento is not a lightweight platform. So, without proper optimization of the website, it will be a headache for customers to use it because of the low loading speed.

    Magento 2 Speed and Performance Optimization – Features

    • The admin can enable image optimization features with the help of this extension.
    • The admin can select the image compression type i.e .webp or Jpeg. The selected type will result in the conversion of images into that selected file type from its original type
    • .webp file format will improve product and category page performance by loading the images at a faster rate.
    • Image responsive pixel functionality is available.
    • The admin can enter a comma-separated list of responsive pixels.
    • Defer loading functionality is available in this module.
    • The extension features an infinite scroller option for products available on category pages on the website. Thus helping in loading all the products of a category to be available on a single page.
    • The extension also features an image lazy loader feature which basically helps in loading the category pages faster.
    • In order to convert mass images available on CMS pages of the website then for that, the admin can easily by the help of terminal commands convert the images to .webP or to Jpeg file format.
    • Makes website performance and rating better.
    • This module works well with other caching options in Magento like varnish and Redis.

    Magento 2 Speed and Performance Optimization – Installation

    The customers will get a zip folder to install Magento 2 Speed and Performance Optimization module and they have to extract the contents of this zip folder on their system.

    The extracted folder has an src folder, inside the src folder you have the app folder.

    After this, they need to transfer this app folder into the Magento 2 root directory on the server as shown below.

    After the successful installation, the users have to run the following commands on the Magento root directory:

    First Command – composer require rosell-dk/webp-convert

    Second Command – “php bin/magento setup:upgrade”

    Third command – “php bin/magento setup:di:compile”

    Fourth command – “php bin/magento setup:static-content:deploy”

    Thus, in this way, you can install the module.

    Magento 2 Speed and Performance Optimization – Cache Management

    Thus, after running the commands, they have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below:

    Language Translation

    For module translation, navigate to the following path in your system  app/code/Webkul/storeoptimization/i18n/en_US.csv.

    After that, open the file named en_US.CSV for editing as shown in the below screenshot:

    Then replace the words after the comma(,) on the right in the file with your translated words.

    In addition editing and translating the CSV file, the users need to save the translated file name according to your region language and country code such as – de_DE.CSV.

    Followed by uploading the translated file to the same folder from where the users have obtained it.

    After that, the module language translation is completed.

    Module Configuration

    After installing the module, The admin can configure the module by navigating through Store> Configuration> Store Optimization Settings.

    Image Optimization Settings

    Under image optimization settings the admin can do the following:

    • Enable Image Optimization: Select “Yes” to enable image optimization extension.
    • Compression Type: The admin can select the compression type among WebP & JPEG which automatically convert the file type of the image to the selected compression type.

    Similarly, if you select the option to “Jpeg” then the file will get changed to Jpeg.

    Similarly, if you select ‘No’ then the file name will remained to the original file type.

    • Enable Image Responsive Pixels: Select ‘Yes’ to make the image pixels responsive in nature. This means the images will adjust according to the screen size of mobile, desktop, and tablet.
    • Enter Comma Separated List of Responsive Pixels: Here the admin can enter values for responsive pixels for example – 1, 2, 3. The value may vary according to different themes.

    Defer Load JS Settings

    Note: Defer loading means loading page content before javascript. It will increase performance.

    Enable Defer Loading: If you select ‘Yes’ then the page content will load before running any external script and this will increase the performance.

    The performance will get displayed only by running Audits.

    If you select ‘No’ then the scripts will be included and because of that, the performance will get decreased.

    Infinite Scroller

    The admin can enable the infinte scroller option by selecting “Yes”. This will help in showcasing all products on a single page available in a category.

    If the option is selected as “No” then, in this case, the products on category page will be visible to customers in multiple pages not on a single page.

    Image Lazy Loader

    The admin needs to select “Yes” to enable the image lazy loader feature which basically helps in loading the category page and product page faster by showcasing the content on pages first after that their images.

    Mass Convert Images to WebP or JPEG

    Using the command-line tool, the store administrator can convert the multiple numbers of image files to WebP or JPEG formats. This is useful for compressing a large number of different images quickly.

    Thus, that’s all about Magento 2 Speed and Performance Optimization Extension. For any further queries and suggestions, please raise a ticket at HelpDesk Support.

    Current Product Version - 4.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again

    Table of Content

    Hide Index