Menu Close
    Searching for an experienced Magento 2 Development Company ?

    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.

    Check the overview of the plugin in the video mentioned below –

    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.
    • Compressed Image Quality functionality is available.
    • The admin can set Encoding Type.
    • 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.
    • The admin now can cache all the public pages of his site using cache warm-up feature
    • 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.

    Install Extension from Webkul Store

    #1 Download Module

    Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:

    installation

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    • composer require rosell-dk/webp-convert
    • php bin/magento setup:upgrade
    • php bin/magento setup:di:compile
    • php bin/magento setup:static-content:deploy
    • php bin/magento indexer:reindex
    • php bin/magento cache:flush

    Install Extension from Magento Marketplace

    If you have purchased this extension from the Magento Marketplace then please follow the below process or visit this link.

    #1 Get Access Keys

    You need to get access keys, navigate to My Profile in Magento Marketplace, then choose Access Keys in the My Products section.

    my-profile

    Go to Magento 2 and then you need to copy both the Access Keys – Public Key and Private Key. These access keys will be needed in the next steps for authentication.

    copy-keys

    If access keys are not created earlier, click Create A New Access Key, enter any name and click OK.

    create-key-name

    #2 Update composer.json File

    To know the component name and version number, go to your Magento Marketplace account section, My Profile>My Purchases, then find this extension to view the details. Please note – Below is an example image, every extension will have its unique component name and version.

    know-component-name-version

    After that, navigate to your Magento project directory and update your composer.json file in the following format.

    composer require <component-name>:<version>

    For example, to install version 4.0.1 of this extension you need to run the following command:

    composer require webkul/module-store-optimization:4.0.1

    #3 Enter Access Keys

    Now you will need to enter the Access Keys that you obtained as explained in the first step #1 Get Access Keys. Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.

    #4 Run Command

    You need to run the following commands:

    • composer require rosell-dk/webp-convert
    • php bin/magento setup:upgrade
    • php bin/magento setup:di:compile
    • php bin/magento setup:static-content:deploy
    • php bin/magento indexer:reindex
    • php bin/magento cache:flush

    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:

    LANGUAGE TRANSLATION

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

    Magento 2 Speed and Performance Optimization [ How to Guide ]

    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.

    Language translation

    Module Configuration

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

    Image-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.
    Magento 2 Speed and Performance Optimization [ How to Guide ]

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

    Screenshot_from_2020_05_19_16_45_06

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

    Magento 2 Speed and Performance Optimization [ How to Guide ]
    • Enter Compressed Image Quality: Here, the admin can determine the image quality after compression, image quality should be a number from 40 to 100.
    • Encoding Type: The admin can auto checks both lossy and lossless and choose the smallest.

    Defer Load JS Settings

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

    Magento 2 Speed and Performance Optimization [ How to Guide ]

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

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

    Magento 2 Speed and Performance Optimization [ How to Guide ]

    Infinite Scroller

    Screenshot-2-1

    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.

    Screenshot-3-1

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

    Screenshot-4-2

    Image Lazy Loader

    Screenshot-5-1

    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.

    Screenshot-7

    Warm-up Cache

    Here, the admin can warm-up the cache so that customers can have a smooth experience.

    warm-up

    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.

    Screenshot-8-1

    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.2

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

    Blog Version - Magento 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
    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index