How to Remove Unused JavaScript and defer loading scripts ?

-

How to Remove Unused JavaScript and defer loading scripts ?

How to Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity ?

Eliminate unused JavaScript: Start by identifying and removing any JavaScript code that is not being used on your website. This could include scripts that were added for previous features or functionality that are no longer in use. Removing unused JavaScript reduces the overall file size and decreases the network activity.

·         Split scripts into smaller modules:

Instead of having a single large JavaScript file, consider breaking it down into smaller modules based on functionality. This allows you to load only the required modules when needed, reducing the initial loading time.

·         Asynchronous and deferred loading:

Use the "async" or "defer" attributes when loading external JavaScript files. These attributes control how scripts are fetched and executed by the browser.

·         Async attribute:

Adding the "async" attribute to a script tag allows the browser to continue parsing the HTML document while the script is being fetched. Once the script is downloaded, it will be executed, which may occur out of order with respect to other elements on the page. This is suitable for scripts that do not depend on the DOM or other scripts.

Example: <script src="script.js" async></script>

                                                   or,

                <script async='async' src='script.js'/>

·         Defer attribute:

Adding the "defer" attribute to a script tag tells the browser to defer the execution of the script until the HTML document has been parsed. Scripts with the defer attribute will be executed in the order they appear in the HTML document. This is suitable for scripts that rely on the DOM or need to maintain execution order.

Example: <script src="script.js" defer></script>

                                   or,

                <script defer='defer' src='script.js'/>

·         Load scripts dynamically:

Instead of including all scripts in the HTML markup, you can load scripts dynamically when they are needed. This can be done using JavaScript techniques such as the createElement and appendChild methods to create and insert script elements programmatically.

·         Lazy loading:

For scripts that are not critical for the initial page load, you can implement lazy loading techniques. Lazy loading defers the loading of scripts until they are needed, typically triggered by user interactions or specific conditions. This can be achieved using libraries or custom JavaScript code.

By implementing these practices, you can optimize the loading of JavaScript files, reduce network activity, and improve the overall performance of your website.


Online Source

Comments

Post a Comment

Thanks for your Comments.

Popular posts from this blog

Office Tool_SPSS v23 + Serial key

-
Best Office Tool SPSS v23 + Serial key Download Activation Instruction: 1. Install IBM SPSS 2. copy “lservrc” into the installed dir(e.g. Windows: C:\Program Files\IBM\SPSS\Statistics\23)  OR 3. enter the following license code using the License Authorization Wizard: Serial key: VDOV7M8KUEIAWBZIKPP6DUKX4JIO3LWRSJQW4BTDCU5NS28ZLZSSROOZQ8HASZ6VUHRZRZ8I8DGWIFY9WJTIRD5P9Y
Next »

How to Fix FATAL error Failed to parse input Document ?

-
SEO Help and Tips How to Fix FATAL error Failed to parse input Document ? When encountering the "FATAL error Failed to parse input document" error, it typically indicates that there is an issue with the code used to parse the document. To fix this error, you can follow these steps: Review the parsing code:   Check the code responsible for parsing the input document. Ensure that it is correctly implemented and follows the correct syntax for the chosen parsing library or approach. Validate the input document:  Before parsing the document, validate its format and structure. Use a document validator or a specific validator for the document type you are parsing to ensure it adheres to the expected standards. This can help identify any syntax errors or inconsistencies in the document. Confirm the input document's compatibility:  Ensure that the parsing library or approach you are using supports the document type you are trying to parse. Some libraries specialize in specific doc...
Next »

How to Reduce Lazy Load Resources

-
How to Reduce Lazy Load Resources in Website Reduce Lazy Load Resources: Utilize lazy loading for resources such as images, scripts, and stylesheets. This means only loading these resources when they are needed, which can help reduce the initial DOM size and improve page load performance. Diagnose performance issues, Performance Values are estimated and may vary. The performance score is calculated directly from these metrics. See calculator. Images:  Lazy loading images can be achieved by setting the loading attribute to "lazy" on the <img> tag. This tells the browser to load the image only when it's about to come into view. <img alt="Lazy-loaded image" src="placeholder.png" data-src="image.png" class="lazyload" /> <script>   document.addEventListener('DOMContentLoaded', function() {     var lazyImages = document.querySelectorAll('img.lazyload');     //...
Next »

Popular posts from this blog

Office Tool_SPSS v23 + Serial key

-
Best Office Tool SPSS v23 + Serial key Download Activation Instruction: 1. Install IBM SPSS 2. copy “lservrc” into the installed dir(e.g. Windows: C:\Program Files\IBM\SPSS\Statistics\23)  OR 3. enter the following license code using the License Authorization Wizard: Serial key: VDOV7M8KUEIAWBZIKPP6DUKX4JIO3LWRSJQW4BTDCU5NS28ZLZSSROOZQ8HASZ6VUHRZRZ8I8DGWIFY9WJTIRD5P9Y
Next »

How to Fix FATAL error Failed to parse input Document ?

-
SEO Help and Tips How to Fix FATAL error Failed to parse input Document ? When encountering the "FATAL error Failed to parse input document" error, it typically indicates that there is an issue with the code used to parse the document. To fix this error, you can follow these steps: Review the parsing code:   Check the code responsible for parsing the input document. Ensure that it is correctly implemented and follows the correct syntax for the chosen parsing library or approach. Validate the input document:  Before parsing the document, validate its format and structure. Use a document validator or a specific validator for the document type you are parsing to ensure it adheres to the expected standards. This can help identify any syntax errors or inconsistencies in the document. Confirm the input document's compatibility:  Ensure that the parsing library or approach you are using supports the document type you are trying to parse. Some libraries specialize in specific doc...
Next »

How to Reduce Lazy Load Resources

-
How to Reduce Lazy Load Resources in Website Reduce Lazy Load Resources: Utilize lazy loading for resources such as images, scripts, and stylesheets. This means only loading these resources when they are needed, which can help reduce the initial DOM size and improve page load performance. Diagnose performance issues, Performance Values are estimated and may vary. The performance score is calculated directly from these metrics. See calculator. Images:  Lazy loading images can be achieved by setting the loading attribute to "lazy" on the <img> tag. This tells the browser to load the image only when it's about to come into view. <img alt="Lazy-loaded image" src="placeholder.png" data-src="image.png" class="lazyload" /> <script>   document.addEventListener('DOMContentLoaded', function() {     var lazyImages = document.querySelectorAll('img.lazyload');     //...
Next »