CODEWITHSUNDEEP
javascripthtmlreactjs
dealwap
dealwap

Reputation: 721

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

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?

Upvotes: 0

Views: 1023

Answers (3)

Manish Parmar
Manish Parmar

Reputation: 1

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")
           });
     }

Upvotes: 0

Lorik
Lorik

Reputation: 525

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.

Upvotes: 3

Anshul Rasiwasia
Anshul Rasiwasia

Reputation: 245

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.

Upvotes: 5

Related Questions