Magento 2 Defer Javascript, WebP, Lazy Loading, TTFB Improvement Guide
Webstore speed and performance optimization is very important for increasing the performance of E-commerce websites. That’s why we have integrated Magento 2 Page Speed Optimization(Adobe Commerce).
The main purpose behind optimizing the store is to provide a better user experience. Especially if you are using the Adobe Commerce platform for your website.
Since Adobe Commerce Cloud 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.
You can also manage the images to check if the images are appropriate for uploading using the Magento 2 Indecent Content Checker extension.
You can also optimize the server storage by uploading the product, and CMS media content via the Magento 2 Digital Ocean storage extension so that the media is fetched and provided to customers directly from Digital Ocean servers.
Check the overview of the Speed and Performance 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.
- Magento 2 Page Speed Optimization module works well with other caching options in Adobe Commerce like varnish and Redis.
- Quick links implemented for page optimization.
- Fetch priority attribute management on images.
Install Extension from Webkul Store
The installation is quite simple just like the standard Magento 2 extensions.
#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:
#3 Run Commands
After uploading the module folder, you need to run the following commands in the Adobe Commerce Cloud 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 Magento 2 Page Speed Optimization extension from the Adobe Commerce 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 Adobe Commerce Cloud Marketplace, then choose Access Keys in the My Products section.
Go to Adobe Commerce 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.
If access keys are not created earlier, click Create A New Access Key, enter any name and click OK.
#2 Update composer.json File
To know the component name and version number, go to your Adobe Commerce 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.
After that, navigate to your Adobe Commerce Cloud 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 Magento 2 Page Speed Optimization 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.
![Magento 2 Speed and Performance Optimization [ How to Guide ]](https://cdnblog.webkul.com/blog/wp-content/uploads/2019/11/language-translation.png)
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 installation, the admin can see the store optimization side panel option.
From here, the admin can directly navigate to the configuration settings for the same.
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 the Magento 2 Page Speed 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 ]](https://cdnblog.webkul.com/blog/wp-content/uploads/2019/11/webp-1.png)
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.
![Magento 2 Speed and Performance Optimization [ How to Guide ]](https://cdnblog.webkul.com/blog/wp-content/uploads/2019/11/change-file-name.png)
- 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 ]](https://cdnblog.webkul.com/blog/wp-content/uploads/2019/11/defer-loading-image.png)
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 ]](https://cdnblog.webkul.com/blog/wp-content/uploads/2019/11/defer-loading-is-disabled.png)
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 the 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.
Warm-up Cache
Here, the admin can warm-up the cache so that customers can have a smooth experience.
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.
Quicklink Listen Fields
For Speed and Performance, the admin will –
- Enable or disable Quicklinks.
- Environment Modes – Select (Default, Developer, Production).
Note: Select the modes to make Quicklink in action. - Prerender – Set it as a Yes or No.
Whether to switch from the default prefetching mode to the prerendering mode for the links inside the viewport.
Note: The prerendering mode (when this option is set to true) will fallback to the prefetching mode if the browser does not support pretender. - Delay(MS) – The amount of time each link needs to stay inside the viewport before being prefetched, in milliseconds.
- Element – The DOM element to observe for in-viewport links to prefetch.
For speed and performance this option whatever element that you have selected within it all the href sections will get the highest priority.
The element can selected as – Class or Id.
Then use “.” before the class name or if using the ID then use #before the ID. For example in the case of class – .section can be added as required.
Other Available Settings
- Request Limit – The total requests that can be prefetched while observing the element container.
- Threshold – The area percentage of each link that must have entered the viewport to be fetched, in its decimal form (e.g. 0.25 = 25%).
- Concurrency Limit – The concurrency limit (throttle) for simultaneous requests while observing the element container.
For Speed and Performance, the admin will –
- Timeout(MS) – The requestIdleCallback timeout, in milliseconds.
- Priority – Whether or not the URLs are within the options.el container should be treated as a high priority. When ‘YES’, the quick link will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
- Origins – Defaults to the same domain origin (location.hostname), which prevents any cross-origin requests.
Important: Empty (no value) allows all origins to be prefetched. - Ignore List – Determine if a URL should be prefetched.
Rules that contain the string, then the URL is not prefetched.
Important: This logic is executed after origin matching! - Prerender URL List – Provide a static list of URLs to be prerendered, instead of detecting that in-viewport, customizing URLs is supported.
Prefetch URL – Provide a static list of URLs to be prefetched, instead of detecting that in-viewport, customizing URLs is supported
Fetch Priority Attribute For Images
The admin can set the fetch priority for the images of a page by editing the page and going to the content section.
Now, edit the respective image for the page and navigate to the Select Fetch Priority section to set the priority as – Low or High.
Now save the page. At the store front when this page loads the fetch priority was given to this image as High hence loads instantaneously.
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.