Magento 2 Page Speed Optimization Extension User Guide

by KS Tomar Webkul - Software Development Company

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

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.

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:flus

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.