Magento 2 - Defer JS - Extension User Guide

› Extension page

Introduction

The Defer JS extension allows you to defer loading of Javascript in the document, by placing all the Javascript in the HTML document rendered, at the bottom of the document before the closing body tag. Thus improving your overall document load time.

Defer Logic:

The extension also allows you disable certain Magento controller actions and/or URLs from deferring Javascript when the respective pages are loaded. This allows you to have complete control over which pages of your website should and which pages should not defer javascript.

You can also disable only certain scripts in a page from being deferred by adding a nodefer attribute to the script tag.

The extension is completely configurable at a store view level giving you complete control over which stores in your multistore setup defer Javascript and which don't.

Features Included

• Defer loading of Javascript.
• Exclude controller actions from deferring Javascript.
• Exclude URLs from deferring Javascript.
• Exclude scripts from deferring by adding a nodefer attribute to the script tag.
• Configurable at a store view level.

Compatibility

Installation

Web Setup Wizard

Unpack extension files: Log in to our website. Download the Base Extension. Unpack the Base extension file downloaded from our site and upload the contents of the file to the root directory of your magento installation. Unpack the purchased extension file downloaded from our site and upload the contents of the file to the root directory of your magento installation.
Go to System > Web Setup Wizard.
Select component manager to install the extension.
Enable Modules: Click on Select link on the Base Extension row(Module Name: HS_All). Click the Enable button on the menu that pops up. Next, click on the Select link on the row corresponding to the extension you downloaded (Module Name: HS_DeferJs).
Step 1: Readiness Check Click on the button Start Readiness Check to check you are running Magento on a compatible environment. Click Next upon completion of previous step.
Step 2: Create Backup Create a backup before you install the extension, by selecting the checkboxes against the Backup Options and clicking the button Create Backup. Click Next, upon completion.
Step 3: Enable Module Click on the button Enable.
You will see this page as your module installation is in progress. You can check for errors in the Console Log.
Module installation complete.

Configuration

Go to Stores > Settings > Configuration > Hungersoft Extensions > Defer JS.

Javascript Settings

Defer Js: To enable the extension select Yes and No to disable. You can configure this at a store view level allowing you to keep the module switched on only on the stores that you want and disabled on the rest. Exclude Home: On selecting Yes, the extension will not defer Javascript on homepage. Select No, to defer Javascript on homepage. Exclude Controller: You can add controller actions that must not defer Javascript. Click on the Add button to add a row and in the Expression field enter the controller action in the format {module}_{controller}_{action}. You can add any number of controller actions, one on each row. Exclude Path: If you wish to disable certain URLs from deferring Javascript add those URLs here. To add URL path, click on the Add button and enter the URL path exlcuding the base URL of your magento store. You can add any number of URL paths, one on each row. If you do not use URL rewrites the general format of the path is {module}/{controller}/{action}/[params...]. Example: Consider a URL for a category page as http://www.example.com/bags.html with base url http://www.example.com/ then, the path you need to enter is bags.html. Similarly, the path for http://www.example.com/gear/bags.html is gear/bags.html.

Read More

• Console / Command line module installation

Benefits

• Free updates for 1 year.
• Free support for 1 year. If you have any issues with the extension purchased please contact us using the contact form or by using the live chat.
• Meets magento standard development practices. No core files will be over written.
• 100% open source.