Does loading a javascript file inside window load event contribute to page load time?

dealwap 0
Viewed 84

I want to load a Javascript file after the page has fully loaded and I understand if this will affect the page load time.

I am doing something like the below:

    window.addEventListener('load', () => {
      loadScript('https://example.com/script.js')
    })

Will doing something like this affect page load time, speed index or time to interactive?

reactjs javascript html
3 Answers

As per mozilla,

The load event is fired when the whole page has loaded.

This would mean, your page load time or time to interactive should not be affected at all, as your script will be fetched post loading of page including static assets.

Anshul Rasiwasia0

From Google themselves:

Page Load Time : The average amount of time (in seconds) it takes that page to load, from initiation of the pageview (e.g., click on a page link) to load completion in the browser.

If we take a look at the bottom of the network tab:

enter image description here

You can see 3 important timestamps here. The one you are looking for is the last one, namely Load. This is the one Google takes into consideration in terms of SEO, hence why it's in red (as 790ms is quite high).

You also have Finish, which is a timestamp that shows whenever the page is done doing any other AJAX calls. These do not count as 'negative points' for SEO, because they don't block the web page for the user thanks to their asynchronous nature.

TLDR: No. Loading your external script asynchronously(!) after the load event has fired will not affect page load time, speed index or time to interactive. Thanks to its asynchronous nature, users are never blocked to interact with the site.

Lorik0 
No, A javascript file loading inside  window load its not contribute to page load time

Onwindow load you can load javascript file two ways
    
    1) using addEventListener
    
        window.addEventListener('load', function() {
              let scriptEle = document.createElement("script");
              scriptEle.setAttribute("src", FILE_URL);
              scriptEle.setAttribute("type", "text/javascript");
              document.body.appendChild(scriptEle);
              scriptEle.addEventListener("load", () => {
                console.log("File loaded")
              });
            })
    
    2) using window onload
    
        window.onload = onWindowLoad
        
        function onWindowLoad(){
         let scriptEle = document.createElement("script");
              scriptEle.setAttribute("src", FILE_URL);
              scriptEle.setAttribute("type", "text/javascript");
              document.body.appendChild(scriptEle);
              scriptEle.addEventListener("load", () => {
                console.log("File loaded")
              });
        }
userST2k10
Related