Read more

 

Unused JavaScript Kya Hai?

Unused JavaScript woh code hai jo aapke webpage mein load hota hai, lekin actual mein use nahi hota. Isse page load time badh sakta hai aur performance ko affect kar sakta hai.


Common Problems:

1. External Libraries:

  • Problem: Sometimes, external libraries jaise ki jQuery, Bootstrap, etc., poori tarah se use nahi hoti, lekin pura code load hota hai.
  • Solution: Unnecessary libraries ko remove karke, sirf required functions ko use karein.

2. Conditional Loading:

  • Problem: Kuch code sections hoti hain jo sirf specific conditions mein hi use hoti hain, lekin wo har case mein load ho jate hain.
  • Solution: JavaScript ko conditional statements ke through load karein, jisse wo sirf jarurat ke case mein hi load ho.

3. Unused Functions:

  • Problem: Code mein aise functions hote hain jo kabhi call nahi hote.
  • Solution: Unused functions ko identify karke, unko remove ya optimize karein.

4. Build Tools ka Use:

  • Problem: Kabhi-kabhi build tools ka istemal nahi hota, jo unused code ko detect aur remove karne mein madad karte hain.
  • Solution: Build tools jaise ki Webpack, Parcel, etc., ka use karein jo unused code ko automatically identify kar sakte hain.

5. Server-Side Rendering:

  • Problem: Client-side pe sabhi JavaScript load hota hai, bina zarurat ke.
  • Solution: Server-side rendering ka use karein, jisse sirf jaruri JavaScript hi load ho.

Steps to Reduce Unused JavaScript:

  1. Code Analysis:

    • Apne codebase ko analyze karein, unused functions ya libraries ko dhundhe.

  2. Minification:

    • Minification se code size ko reduce karein, jisse load time kam ho.

  3. Lazy Loading:

    • Jaruri nahi hai ki saara code ek hi baar load ho, kuch parts ko lazy load karke performance improve kiya ja sakta hai.

  4. Bundle Splitting:

    • Bundling se sirf required code ko ek bundle mein rakha ja sakta hai, aur unused code alag bundle mein.

  5. Use Browser Developer Tools:

    • Browser ke developer tools se performance analyze karein, unused JavaScript ko identify karein.

  6. Regular Audits:

    • Regularly apne codebase ko audit karein, aur unused code ko remove karte rahein.

  7. CDN Usage:

    • CDN se libraries ko load karna, jisse sirf required components hi download ho.

Yeh steps follow karke aap unused JavaScript ko reduce kar sakte hain. Isse page load time improve hoga aur overall performance better hogi. Koi specific example ya guidance chahiye toh zaroor bataiye!


1. External Libraries: try with this method:

Certainly, Facebook's SDK file is substantial in size, and optimizing its usage involves trimming unnecessary portions. To remove unnecessary libraries and use only the required functions:

Step-by-Step Process:

  1. Identify Required Functions:

    • Go through the Facebook SDK documentation to identify the specific functions you need for your website.

  2. Load Only Required Functions:

    • Instead of loading the entire SDK, load only the necessary parts or functions. For instance, if you need only the functionality for social sharing, focus on loading that part.

  3. Customize SDK Initialization:

    • If Facebook provides customization options for SDK initialization, tailor it to load only what you require.

  4. Manual Implementation or Build Tool Usage:

    • Manually integrating specific functions can be done by downloading the SDK file, editing it to keep only essential sections, and then hosting it on your server. Alternatively, if using build tools like Webpack or Parcel, you can configure them to import only the needed portions of the SDK.

  5. Asynchronous Loading:

    • Load the Facebook SDK asynchronously. This means it won't block other content from loading, improving overall performance.

  6. Testing and Monitoring:

    • After implementing these changes, thoroughly test your website's functionality to ensure that only the necessary Facebook functionalities are loaded and are working as expected.

  7. Sample Code for Asynchronous Loading:

Reduce unused JavaScript
0.30s
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.LCP
URL
Transfer Size
Potential Savings
Facebook
 Social
87.7 KiB
63.4 KiB
/en_US/sdk.js?hash=0b8531f…
(connect.facebook.net)
87.7 KiB
63.4 KiB

this problem will solve once u switch off ur social links from your layout or give ur social link there to work properly

 paste this code under <body section

<script> function loadFacebookSDK() { // Asynchronously load the Facebook SDK var js, fjs = document.getElementsByTagName(&#39;script&#39;)[0]; if (document.getElementById(&#39;facebook-jssdk&#39;)) return; js = document.createElement(&#39;script&#39;); js.id = &#39;facebook-jssdk&#39;; js.src = &#39;https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v13.0&#39;; fjs.parentNode.insertBefore(js, fjs); } // Call loadFacebookSDK function when needed, e.g., on a button click or when a certain section of the page is reached document.getElementById(&#39;yourButton&#39;).addEventListener(&#39;click&#39;, function() { loadFacebookSDK(); }); </script>




Reduce unused JavaScript
0.90s
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.LCP
URL
Transfer Size
Potential Savings
Blogger
 Hosting 1st Party
105.5 KiB
69.9 KiB
…widgets/306…-widgets.js
(www.blogger.com)
58.6 KiB
42.7 KiB
…res/293…-indie_compiled.js
(resources.blogblog.com)
46.9 KiB
27.2 KiB
Google Tag Manager
 Tag-Manager
156.3 KiB
63.8 KiB
/gtag/js?id=UA-187…-1&l=dataLayer&cx=c
(www.googletagmanager.com)
63.9 KiB
32.2 KiB
/gtag/js?id=G-S0JDL1SGNX
(www.googletagmanager.com)
92.4 KiB
31.7 KiB













<script type="text/javascript" src="https://example.com/path/to/your/script.js"></script>
this is basic code add your link in the basic code and paste it down the head
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3069997043-widgets.js/path/to/your/script.js"></script>



Facebook
 Social
87.7 KiB
63.4 KiB
/en_US/sdk.js?hash=0b8531f…
(connect.facebook.net)
87.7 KiB
63.4 KiB

Blogger
 Hosting 1st Party
105.5 KiB
69.9 KiB
…widgets/306…-widgets.js
(www.blogger.com)
58.6 KiB
42.7 KiB
…res/293…-indie_compiled.js
(resources.blogblog.com)
46.9 KiB
27.2 KiB
Google Tag Manager
 Tag-Manager
156.3 KiB
63.8 KiB
/gtag/js?id=UA-187…-1&l=dataLayer&cx=c
(www.googletagmanager.com)
63.9 KiB
32.2 KiB
/gtag/js?id=G-S0JDL1SGNX
(www.googletagmanager.com)
92.4 KiB
31.7 KiB




this is a basic code to remove all problem



<!DOCTYPE html>
<html>
<head>
  <!-- Other meta tags, title, stylesheets, etc. -->
  <script>
    // 1. Remove unnecessary libraries and include required functions
    function loadRequiredFunctions() {
      // Your required functions or libraries code here
    }
  
    // 2. Conditional loading through JavaScript
    function loadJSConditionally() {
      if (/* Your condition here */) {
        var js = document.createElement('script');
        js.src = 'https://www.example.com/path/to/your/javascript.js';
        document.head.appendChild(js);
      }
    }
  
    // 3. Identify and optimize/remove unused functions
    function usedFunction() {
      // Your used function code here
    }
  
    // 4. Use build tools like Webpack, Parcel for optimization (Not included in this code snippet)
  
    // 5. Server-side rendering to load necessary JavaScript only (Not implemented in this code snippet)
  
    // Triggering necessary functions on page load or event
    window.onload = function() {
      loadRequiredFunctions(); // Load required functions/libraries
      
      loadJSConditionally(); // Load JavaScript conditionally
  
      usedFunction(); // Use the necessary functions
    };
  </script>
</head>
<body>
  <!-- Your webpage content -->
</body>
</html>