In the previous article, we have seen how a slow checkout page would negatively affect your user experience and conversions, along with common reasons why the checkout page loads slowly in Magento 2. We shall see how you can resolve these issues and render your checkout process faster by using best practices to optimize your checkout page. We have seen many of our customers getting a faster checkout by using the below steps and have complied our Magento 2 Checkout page optimization practices for your benefit. As against using a separate one-step checkout extension for your store, we highly recommend initially using the below practices to get the optimal benefit for your store.

The major reason for the relatively slower checkout observed in some Magento 2 websites is due to the usage of Knockout.js in the checkout page. This causes a bulk code that needs to be loaded and executed in the page. When combined with third-party extensions and checkout page functionalities-it leads to many API’s being executed which delay the checkout process. The first part of a successful checkout page optimization would be to identify and use only the extensions, shipping, pricing methods and pricing rules that are useful and relevant. Once you have identified and optimized your website on those lines, you can now proceed with some of the best checkout page code optimization practices in Magento 2 to get a fast loading checkout page.

Magento 2 Checkout Page Optimization

Running in Production Mode:  Make sure that you are running your website in production mode, instead of the developer mode, as this would cause multiple individual JS files to be executed. You can switch to the production mode by using the below commands.

Checking the Current Mode: bin/magento deploy:mode:show

Setting to Production Mode: bin/magento deploy:mode:set production

Using Advanced Javascript Bundling:  As Magento 2 extensively uses Knockout.js to render the checkout page, it’s quite essential that you bundle the individual JS files to ensure that you have an optimal script bundle to be executed in the page. We recommend that you use the Advanced JavaScript Bundling option available for Magento 2.x, instead of the native JavaScript Bundling feature. You can disable it by following the below steps, and then can use the Advanced JavaScript Bundling to define your bundles by page types for all of your store’s pages, and then use only a fewer set of bundles that would cover all your dependencies.

To disable the Native JavaScript Bundling in your store, follow the below steps:

From Stores > Configuration > Advanced > Developer section, go to JavaScript settings and choose “No” in Enable JavaScript Bundling option.

To enable Advanced JavaScript Bundling option, please follow the below steps:

1) You would need access to Node Packet Manager (NPM) version 6.x and above, node.js (Version 8.x and above), along with Magento 2 Dev Tools and access to GitHub.

2) The Magento 2 Dev Tools module needs to be clone to your local repository.

3) Install and run the NPM Start.

4) In you Chrome Browser, navigate to Extensions, and enable “Developer Mode”. Then click on Load Unpacked and select the extension folder to be in the root of your repository. Close and re-open Chrome to finish the loading.

Once the Chrome extension is installed, open RequireJS ->Bundle Generator and click on “Record”.

5) Start with your website’s main page and navigate to all the purchase path pages of your website (Main->Category->Sub-Category->Product Detail Page->Cart Page-> Checkout Page).

Make sure that you have covered all the pages in your purchase path.

Once you have recorded all the pages, click on the record button again to stop the recording and follow the installation steps from the Bundle Generation UI.

6) Install and enable the Magento_Bundle Config Module from GitHub, and switch to the production mode.

7) For the specific theme that you are bundling the JS files, create a separate folder for all the language files by appending “_source” to each of the folders and move each of the language folder contents to that folder.

One you have the node.js installed locally or on your server, use NPM to install and enable “Require JS Optimizer”.

8) From the bundle generator tab, copy the saved configuration by using the copy to clipboard option, and then save it a file named build.js in the root of your store.

9) Clean the cache from the CLI, and you should have the optimized JS Bundles running in your store now.

Using Redis: Redis is a popular tool for page caching and session storage  in Magento. You can install Redis to increase the speed of your website’s front and backend code, and can also use it for storing sessions too. Magento 2 fully support Redis, so you would not need to have any external extensions installed to use the functionality.

For Magento 2.3.5, its recommended to use the Extended Redis cache implementation from MagentoFrameworkCacheBackendRedis.

Use the below code to configure Redis page caching:

bin/magento setup:config:set –page-cache=redis –page-cache-redis-=…

The different parameters would be as below:

Server: Defaults to  127.0.0.1 if Redis installation is done on the Magento Server.

Port: Defaults to 6379

Database: ‘0’ by default. If you are using for both default, page caching and session storage, use 0,1,2 respectively.

Password: The password as set in the Redis configuration file.

Example: bin/magento setup:config:set –page-cache=redis –page-cache-redis-server=127.0.0.1 –page-cache-redis-db=1

You should then see the output in your app/etc/env.php file, as per the given parameters.

Redis stores a lot of configuration data which can be used to pre-load data within the pages. The below values can be used to access the pre-loaded data.

DB Prefix_EAV_ENTITY_TYPES

DB Prefix_GLOBAL_PLUGIN_LIST

DB Prefix_DB_IS_UP_TO_DATE

DB Prefix_SYSTEM_DEFAULT

If the pre-loaded data is being used with the L2 Cache, you would need to use “:hash” as a suffix to the above keys.

Once you have successfully configured Redis, use the below command from the CLI to check its working, and refresh your store to get the session storage output.

$ redis-cli monitor

Once you see the session storage/page caching output, use the below command to check Redis-you should be getting “PONG” as the output.

$ redis-cli ping

These steps validate the successful installation of Redis in your store.

GZIP Compression: GZIP Compression works by compressing your web pages so that during a web page request in a user session, the compressed file would be rendered by the server which would significantly decrease the load time. GZIP can be easily installed for use with Magento 2, by adding the code to your “htaccess” file. It’s highly recommended to use the below steps to update the GZIP code in your file.

1) Ensure that mod_deflate is on your Apache server. You can check this by creating an “info.php” file and calling it.

2) The output should include the PHP/Apache Server specifications and mod_deflate should be loaded.

3) You can then modify the “htaccess” file to include the GZIP compression.

Minifying JavaScript and CSS files: You can minify your images and CSS files to make your website load faster. The options can be enabled by accessing your admin panel and under From  Stores > Configuration > Advanced > Developer Section, go to Minify CSS Files, and Minify JavaScript Files settings and choose “Yes”  to enable minifying your files.

Exinent has been in the forefront of Magento Consulting, Development, Migration, Support, and Maintenance since the past decade. We have successfully scripted success stories for hundreds of eCommerce stores. If you wish to discuss on Custom Magento Development, Migration, Consulting, Security and Audit services, do Contact Us and we will be glad to help you.